Vue3 人机对话界面实现：流式请求与 ECharts 图表集成

介绍基于 Vue3 的人机对话界面实现方案。核心包括使用 fetchStream 进行流式数据请求以实现打字机效果；利用 markdown-it 结合 preprocessMarkdown2 预处理函数规范 AI 生成的 Markdown 内容；通过 extractAndRenderCharts 解析后端返回的 JSON 数据并在前端使用 ECharts 渲染图表。文章提供了关键代码片段及逻辑分析，涵盖请求控制、渲染节流、DOM 更新时机及图表生命周期管理，适用于复杂前端应用开发参考。

活在当下发布于 2026/4/5更新于 2026/4/132 浏览

Vue3 人机对话界面实现：流式请求与 ECharts 图表集成

本文深入剖析基于 Vue3 构建的智能人机对话界面的前端实现。重点讲解如何利用 fetchStream 实现高效的流式数据请求与处理，如何集成 markdown-it 并配合自定义预处理器优雅地展示 Markdown 内容，以及如何动态接收后端数据并使用 ECharts 在前端渲染多种类型的图表。

1. 流式响应：告别漫长等待，实现即时打字机效果

传统的 API 请求模式是'发送请求 -> 等待 -> 接收完整响应'。这对于 AI 生成长文本的场景来说，用户体验很差。更好的方式是像 ChatGPT 那样，实现流式响应，即 AI 边生成边返回结果，前端边接收边显示，营造出'打字机'般的效果。

fetchStream 函数

// utils/streamUtils.js 或直接写在组件中
export async function fetchStream(url, data, onChunk, onError, onComplete, signal) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
      signal,
    });
    if (!response.ok || !response.body) {
      throw new Error('Response body is not readable');
    }
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let done = false;
    try {
      while (!done) {
        const { value, done: streamDone } =  reader.();
        done = streamDone;
         (value) {
           chunk = decoder.(value, { :  });
          (chunk); 
        }
      }
      onComplete?.();
    }  {
      reader.();
    }
  }  (error) {
     (error. === ) {
      .();
      ; 
    }
    onError?.(error);
  }
}

相关免费在线工具

RSA密钥对生成器

生成新的随机RSA私钥和公钥pem证书。在线工具，RSA密钥对生成器在线工具，online

Mermaid 预览与可视化编辑

基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。在线工具，Mermaid 预览与可视化编辑在线工具，online

Keycode 信息

查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online

Escape 与 Native 编解码

JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online

JavaScript / HTML 格式化

使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online

JavaScript 压缩与混淆

Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online

// index.vue - handleSend 函数片段 const handleSend = async () => { // ... 用户输入校验、清空旧请求逻辑 ... let rawText = ''; // 用于累积原始文本 const controller = new AbortController(); abortController.value = controller; try { await fetchStream( '/knowledge/api/knowledge/query', // API 地址 requestData, // 请求参数 (chunk) => { // onData 回调：处理接收到的每一个数据块 if (controller.signal.aborted) return; // 如果请求被取消，直接返回 // 1. 将 chunk 转为字符串 const chunkStr = typeof chunk === "string" ? chunk : new TextDecoder().decode(chunk); // 2. 按行分割（SSE 常用格式） const lines = chunkStr.split("\n"); let hasNewVisibleContent = false; for (const line of lines) { if (line.startsWith("data:")) { // SSE 格式，内容在 data: 后面 let content = line.slice(5).trim(); // 去掉 "data:" // 清理掉 AI 的思考过程标签 content = content.replace(/<think>[\s\S]*?<\/think>/g, "").trim(); if (!content) continue; // 跳过空内容 rawText += content + "\n"; // 累积到 rawText hasNewVisibleContent = true; } } if (hasNewVisibleContent) { if (!loadingAnswer.hasContent) { loadingAnswer.hasContent = true; // 标记已有内容 } // 实现渲染节流，避免频繁 DOM 操作 const now = Date.now(); if (now - lastRenderTime.value >= renderThrottleDelay && !pendingRender.value) { pendingRender.value = true; setTimeout(() => { // 异步执行渲染 try { let processedText = preprocessMarkdown2(rawText); // 预处理 const renderedContent = md.render(processedText); // 渲染为 HTML if (renderedContent !== loadingAnswer.content) { loadingAnswer.content = renderedContent; // 更新 DOM lastRenderedLength.value = rawText.length; // 更新缓存长度 } } catch (error) { console.error('渲染错误:', error); } finally { lastRenderTime.value = Date.now(); pendingRender.value = false; } }, 0); } } }, (error) => { /* onError 回调 */ }, () => { /* onComplete 回调：处理请求结束 */ } ); } catch (error) { /* ... */ } };

// index.vue - extractAndRenderCharts 函数 function extractAndRenderCharts(text) { const jsonRegex = /```(?:\w*)?\s*([\s\S]*?)\s*```/g; // 匹配代码块 let match; let chartDataMap = new Map(); // 存储图表 ID 和数据的映射 let processedText = text; let chartIndex = 0; const conversationId = Date.now() + '-' + Math.random().toString(36).substr(2, 9); while ((match = jsonRegex.exec(text)) !== null) { // 查找所有 JSON 代码块 try { let jsonContent = match[1].trim(); jsonContent = fixJsonFormat(jsonContent); // 修复 JSON 格式 let data = JSON.parse(jsonContent); if (Array.isArray(data) && data.length > 0) { // 验证数据有效性 const chartId = `${conversationId}-${chartIndex}`; chartDataMap.set(chartId, data); // 用占位符替换原代码块 const originalCodeBlock = match[0]; if (processedText.includes(originalCodeBlock)) { processedText = processedText.replace( originalCodeBlock, `<div></div>\n\n` ); } chartIndex++; } } catch (error) { console.error('解析 JSON 数据失败:', error); } } if (chartDataMap.size > 0) { nextTick(() => { // 确保 DOM 更新后渲染 renderCharts(chartDataMap); }); } return processedText; // 返回替换后的文本 } // index.vue - renderCharts 函数 function renderCharts(chartDataMap) { nextTick(() => { chartDataMap.forEach((data, chartId) => { const container = document.querySelector(`.echartContainer[data-chart-id="${chartId}"]`); if (!container) return; // 销毁旧实例（如果有） if (container.chartInstance) { container.chartInstance.dispose(); } if (!data || data.length === 0) return; // 初始化 ECharts 实例 const chart = echarts.init(container); container.chartInstance = chart; // 存储实例引用 // 解构数据 const dataX = data.map(item => item.data_time); const dataY = data.map(item => item.data_value); const pointName = data[0].point_name; const showType = data[0].show_type || '折线图'; // 根据 showType 生成不同的 ECharts 配置 let option; switch (showType) { case '柱状图': // ... 配置柱状图 option ... break; case '饼状图': // ... 配置饼状图 option ... break; case '折线图': default: // ... 配置折线图 option ... break; } chart.setOption(option); // 应用配置 }); // 添加窗口大小监听器，用于图表响应式 if (!window.resizeEventListenerAdded) { window.addEventListener('resize', () => { document.querySelectorAll('.echartContainer').forEach(container => { if (container.chartInstance) { container.chartInstance.resize(); } }); }); window.resizeEventListenerAdded = true; } }); }

Vue3 人机对话界面实现：流式请求与 ECharts 图表集成

Vue3 人机对话界面实现：流式请求与 ECharts 图表集成

1. 流式响应：告别漫长等待，实现即时打字机效果

fetchStream 函数

更多推荐文章

相关免费在线工具

2. 内容渲染：`markdown-it` 与 `preprocessMarkdown2` 的协作

3. 图表可视化：`extractAndRenderCharts` 与 ECharts 的集成

总结

Vue3 人机对话界面实现：流式请求与 ECharts 图表集成

Vue3 人机对话界面实现：流式请求与 ECharts 图表集成

1. 流式响应：告别漫长等待，实现即时打字机效果

fetchStream 函数

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2. 内容渲染：markdown-it 与 preprocessMarkdown2 的协作

3. 图表可视化：extractAndRenderCharts 与 ECharts 的集成

总结

2. 内容渲染：`markdown-it` 与 `preprocessMarkdown2` 的协作

3. 图表可视化：`extractAndRenderCharts` 与 ECharts 的集成