尧图网页设计 
简介这份资源面向Web前端与数据可视化方向的开发者聚焦Ajax异步请求与ECharts图表联动的实战场景帮助解决页面无需刷新即可动态加载并渲染图表的问题。包内共29个文件以cs后端代码、aspx页面、js脚本、dll程序集及config配置文件为主另有csproj、sln等工程文件压缩包约446KB构成一个可直接运行的ASP.NET示例项目。项目围绕两种典型用法展开一是点击按钮触发Ajax请求后加载图表二是页面初始化时自动异步获取数据渲染图表涵盖XMLHttpRequest通信、JSON数据解析、setOption更新图表及定时刷新等关键环节。已有1207人学习下载适合希望掌握前后端数据交互与ECharts动态渲染的中级开发者参考可据此理解异步加载流程、目录组织方式与常见错误处理思路。1. Ajax 动态获取数据 ECharts 图表为什么你的图表总是死在页面上很多人第一次用 ECharts都是照着官网示例把option写死在前端柱状图、饼图、折线图跑得挺欢。可一旦把数据源换成后端接口图表要么空白要么报Cannot read property length of undefined要么数据回来了图却不刷新。问题不在 ECharts而在 Ajax 动态获取数据这条链路上——请求发没发出去、编码格式对不对、返回结构是不是图表要的、异步时序有没有踩空任何一环断了图表就是一张静态图片。这篇笔记讲的就是把 Ajax 动态获取数据和 ECharts 图表接起来这件事从接口返回 JSON 到图表真正渲染中间要经过哪几步、参数怎么设、异步怎么处理、翻车了看哪里。适合已经会写基本 Ajax 请求、也能照着 ECharts 官网画出静态图但一接真实接口就卡住的同学。下面按先跑通最小闭环再拆参数和坑的顺序来。2. 从接口到图表Ajax 动态获取数据的完整链路拆解2.1 一次请求到底经历了什么Ajax 动态获取数据的本质是用XMLHttpRequest或fetch在页面不刷新的前提下向服务端要一段数据拿到后再交给 ECharts 渲染。整条链路可以拆成四段发起请求 → 服务端返回 → 前端解析 → 图表消费。发起请求时你要决定请求方法GET/POST、请求地址、请求头尤其是Content-Type、请求体。服务端返回后浏览器拿到的是字符串JSON.parse之后才变成对象。前端解析这一步最容易出问题有的接口返回{code:200, data:[...]}有的直接返回数组有的字段名是value有的是num。图表消费阶段ECharts 只认它规定的数据结构比如柱状图要xAxis.data和series[0].data两个数组长度还得对得上。理解这条链路的意义在于图表不显示不一定是 ECharts 的问题可能是请求根本没发出去也可能是返回结构和图表预期不匹配。排查时按链路顺序走比盯着option改半天有效得多。2.2 最小可运行闭环一个柱状图接口对接先跑通一个最小闭环。假设后端提供一个 GET 接口/api/sales返回最近五个月的销售额{ code: 200, data: [ { month: 1月, amount: 320 }, { month: 2月, amount: 480 }, { month: 3月, amount: 390 }, { month: 4月, amount: 560 }, { month: 5月, amount: 610 } ] }前端用原生fetch拿数据再喂给 ECharts// 1. 初始化图表实例绑定到页面上 id 为 chart 的容器 const chartDom document.getElementById(chart); const myChart echarts.init(chartDom); // 2. 发起 Ajax 请求获取数据 fetch(/api/sales) .then(res res.json()) // 把响应体解析成 JSON 对象 .then(res { // 3. 校验业务状态码避免把错误数据喂给图表 if (res.code ! 200) { console.error(接口返回异常:, res); return; } const list res.data; // 4. 把接口数据拆成 ECharts 需要的两个数组 const months list.map(item item.month); const amounts list.map(item item.amount); // 5. 配置 option 并渲染 myChart.setOption({ tooltip: { trigger: axis }, xAxis: { type: category, data: months }, yAxis: { type: value }, series: [{ name: 销售额, type: bar, data: amounts }] }); }) .catch(err console.error(请求失败:, err));这段代码的关键点有三个。第一res.json()返回的是 Promise必须再.then一次才能拿到真正的数据对象少写一层就会拿到 Response 对象。第二map把对象数组拆成两个平行数组顺序必须一致否则月份和金额会错位。第三setOption放在数据回来之后调用而不是页面加载时先调一次空配置。参数上xAxis.type设为category表示类目轴适合月份、品类这类离散值yAxis.type设为value表示数值轴。series[0].type换成line就是折线图换成pie则数据结构要改成{name, value}形式后面会讲。2.3 请求参数怎么传GET、POST 与编码格式实际项目里接口很少不带参数。GET 请求把参数拼在 URL 上POST 请求放在请求体里。用fetch发 POST 时Content-Type必须和请求体格式匹配否则后端解析不到。// POST 请求查询指定年份和地区的销售数据 fetch(/api/sales/query, { method: POST, headers: { // 告诉后端请求体是 JSON 格式这一行漏了后端可能收到空对象 Content-Type: application/json;charsetUTF-8 }, body: JSON.stringify({ year: 2024, region: east, page: 1, pageSize: 12 }) }) .then(res res.json()) .then(res { if (res.code ! 200) return; renderChart(res.data); });Content-Type设成application/json时请求体必须是JSON.stringify后的字符串直接传对象会变成[object Object]。如果后端用的是表单接收则要改成application/x-www-form-urlencoded请求体用URLSearchParams拼接。编码格式不匹配是参数传了但后端收不到的头号原因中文参数还涉及charset声明漏了可能乱码。参数赋值时还要注意类型。page传字符串1还是数字1有的后端框架会严格校验。我一般会在前端做一次显式转换避免后端报类型错误。2.4 异步时序为什么数据回来了图还是空的Ajax 是异步的setOption如果写在请求外面会在数据回来之前就执行图表自然是空的。这是新手最常踩的时序坑。// 错误写法setOption 先执行数据后到 let chartData []; fetch(/api/sales) .then(res res.json()) .then(res { chartData res.data; }); myChart.setOption({ series: [{ type: bar, data: chartData }] // 此时 chartData 还是空数组 });正确做法是把setOption放进.then回调里或者用async/await让代码读起来是同步的async function loadChart() { try { const res await fetch(/api/sales); const json await res.json(); if (json.code ! 200) return; myChart.setOption({ xAxis: { type: category, data: json.data.map(i i.month) }, yAxis: { type: value }, series: [{ type: bar, data: json.data.map(i i.amount) }] }); } catch (err) { console.error(加载图表失败:, err); } } loadChart();await会暂停函数执行直到 Promise 完成写起来像同步代码但本质还是异步。注意await只能在async函数里用且要配合try/catch捕获网络错误否则请求失败时页面没有任何反馈。3. ECharts 消费数据不同图表类型的数据结构差异3.1 柱状图与折线图类目轴 数值轴柱状图和折线图共用一套直角坐标系结构数据都是类目 数值的平行数组。接口返回对象数组时用map拆成两个数组即可。如果接口直接返回两个数组那就更省事。// 接口返回{ categories: [1月,2月], values: [320, 480] } myChart.setOption({ xAxis: { type: category, data: res.categories }, yAxis: { type: value }, series: [{ type: line, data: res.values, smooth: true }] });smooth: true让折线变平滑适合趋势展示柱状图不需要这个参数。多个系列时series数组里放多个对象每个对象的data长度要和xAxis.data一致否则会出现柱子错位或缺失。3.2 饼图name 和 value 的键名约定饼图的数据结构和柱状图不同它要的是{name, value}对象数组。接口返回的字段名往往不叫name和value需要手动映射。// 接口返回[{ product: 手机, sales: 1200 }, { product: 电脑, sales: 800 }] const pieData res.data.map(item ({ name: item.product, // 映射成 ECharts 认识的 name value: item.sales // 映射成 ECharts 认识的 value })); myChart.setOption({ tooltip: { trigger: item }, series: [{ type: pie, radius: 60%, data: pieData, label: { formatter: {b}: {c} ({d}%) } // 显示名称、数值、百分比 }] });radius控制饼图大小60%表示占容器短边的 60%。label.formatter里的{b}是名称{c}是数值{d}是百分比。如果饼图中间要显示文字用title组件配合left: center、top: center定位或者用graphic组件这是热词里echarts pie 中间的字的常见做法。3.3 数据映射的通用写法一个函数适配多种接口项目里接口格式五花八门写一个通用映射函数能省很多重复代码。/** * 把接口返回的数组映射成 ECharts 需要的结构 * param {Array} list - 接口返回的数据数组 * param {string} nameKey - 名称字段名 * param {string} valueKey - 数值字段名 * param {string} type - 图表类型bar/line/pie */ function mapToChartData(list, nameKey, valueKey, type) { if (type pie) { return list.map(item ({ name: item[nameKey], value: item[valueKey] })); } // 柱状图和折线图返回两个数组 return { categories: list.map(item item[nameKey]), values: list.map(item item[valueKey]) }; }调用时根据图表类型走不同分支柱状图/折线图拿categories和values饼图直接拿数组。这样接口字段变了只改调用处的参数不用动渲染逻辑。4. 避坑与排查Ajax 接 ECharts 最常见的 5 个翻车现场4.1 图表空白控制台报 data 未定义现象页面加载后图表区域一片空白控制台提示Cannot read property length of undefined或data is not defined。原因setOption执行时数据还没回来或者接口返回结构里根本没有data字段res.data是undefinedmap直接报错。解决把setOption放进请求回调里在映射前加一层判断if (!res.data || !res.data.length) return;数据为空时给个占位提示而不是让代码崩掉。4.2 请求成功但图表不刷新现象第一次加载图表正常切换筛选条件后接口返回了新数据图表还是旧的。原因setOption默认是合并模式新数据会和老配置合并某些情况下旧系列没被覆盖。或者图表实例被重复初始化新实例盖在旧实例上。解决切换数据时用myChart.setOption(option, true)第二个参数true表示不合并、完全替换。初始化前先判断实例是否存在echarts.getInstanceByDom(chartDom) || echarts.init(chartDom)避免重复初始化。4.3 中文参数乱码或后端收不到现象GET 请求带中文参数后端收到乱码POST 请求后端收到空对象。原因GET 中文参数没做encodeURIComponentPOST 的Content-Type和请求体格式不匹配。解决GET 参数用encodeURIComponent包一层POST 根据后端要求选application/json或application/x-www-form-urlencoded前者请求体用JSON.stringify后者用URLSearchParams。4.4 跨域请求被浏览器拦截现象控制台报Access-Control-Allow-Origin相关错误请求状态显示 CORS 错误。原因前端页面域名和接口域名不一致浏览器同源策略拦截。解决开发阶段配置本地代理把/api转发到后端地址生产环境由后端设置Access-Control-Allow-Origin响应头。这是服务端配置问题前端改请求头解决不了。4.5 数据量大时图表卡顿现象接口返回几千条数据图表渲染慢交互卡顿。原因一次性把全部数据喂给 ECharts渲染压力大。解决后端分页或聚合前端只取展示需要的量折线图数据点多时开启sampling: lttb降采样柱状图超过一定数量考虑横向滚动或缩放。5. 进阶技巧让动态图表更稳的几个习惯5.1 用 loading 和空状态兜底数据请求有延迟用户看到空白区域会以为坏了。ECharts 自带showLoading和hideLoading请求前显示加载动画数据回来或失败后隐藏。myChart.showLoading({ text: 加载中..., color: #5470c6 }); fetch(/api/sales) .then(res res.json()) .then(res { myChart.hideLoading(); if (res.code ! 200) { // 接口异常时给个空状态提示 myChart.setOption({ title: { text: 暂无数据, left: center, top: center } }); return; } myChart.setOption(buildOption(res.data)); }) .catch(() { myChart.hideLoading(); myChart.setOption({ title: { text: 加载失败, left: center, top: center } }); });showLoading的text和color可以自定义hideLoading必须在成功和失败两条路径上都调用否则加载动画会一直转。5.2 窗口缩放时图表自适应ECharts 实例不会自动跟随容器尺寸变化窗口缩放后图表会变形或留白。监听resize事件手动调用resize方法。window.addEventListener(resize, () { myChart.resize(); });如果图表在弹窗或标签页里容器初始尺寸为 0init时图表会渲染异常。这种情况要在容器显示后再init或者调用resize重新计算。5.3 封装一个可复用的请求 渲染函数项目里图表多了以后每个都写一遍请求和映射很累。封装成函数传入接口地址、字段名、图表类型返回配置好的实例。async function renderChart(domId, url, nameKey, valueKey, type) { const dom document.getElementById(domId); const chart echarts.getInstanceByDom(dom) || echarts.init(dom); chart.showLoading(); try { const res await fetch(url).then(r r.json()); chart.hideLoading(); if (res.code ! 200 || !res.data) { chart.setOption({ title: { text: 暂无数据, left: center, top: center } }); return chart; } const mapped mapToChartData(res.data, nameKey, valueKey, type); const option type pie ? { series: [{ type: pie, data: mapped }] } : { xAxis: { type: category, data: mapped.categories }, yAxis: { type: value }, series: [{ type, data: mapped.values }] }; chart.setOption(option, true); return chart; } catch (err) { chart.hideLoading(); console.error(图表渲染失败:, err); return chart; } }这个函数把请求、校验、映射、渲染串在一起调用方只需要传参数。注意setOption第二个参数传true保证每次都是全量替换避免旧数据残留。我自己的习惯是任何接接口的图表先确认接口返回结构再写映射最后才调setOption。顺序反了就会在option里反复改却找不到问题。另外Content-Type和encodeURIComponent这两个点我每次新接口都会检查一遍血泪经验是它们导致的参数丢失占了排查时间的一大半。希望帮到你。本文还有配套的精品资源点击获取 Ajax动态获取数据与ECharts图表对接实战：从接口到渲染的完整链路与避坑指南
简介这份资源面向Web前端与数据可视化方向的开发者聚焦Ajax异步请求与ECharts图表联动的实战场景帮助解决页面无需刷新即可动态加载并渲染图表的问题。包内共29个文件以cs后端代码、aspx页面、js脚本、dll程序集及config配置文件为主另有csproj、sln等工程文件压缩包约446KB构成一个可直接运行的ASP.NET示例项目。项目围绕两种典型用法展开一是点击按钮触发Ajax请求后加载图表二是页面初始化时自动异步获取数据渲染图表涵盖XMLHttpRequest通信、JSON数据解析、setOption更新图表及定时刷新等关键环节。已有1207人学习下载适合希望掌握前后端数据交互与ECharts动态渲染的中级开发者参考可据此理解异步加载流程、目录组织方式与常见错误处理思路。1. Ajax 动态获取数据 ECharts 图表为什么你的图表总是死在页面上很多人第一次用 ECharts都是照着官网示例把option写死在前端柱状图、饼图、折线图跑得挺欢。可一旦把数据源换成后端接口图表要么空白要么报Cannot read property length of undefined要么数据回来了图却不刷新。问题不在 ECharts而在 Ajax 动态获取数据这条链路上——请求发没发出去、编码格式对不对、返回结构是不是图表要的、异步时序有没有踩空任何一环断了图表就是一张静态图片。这篇笔记讲的就是把 Ajax 动态获取数据和 ECharts 图表接起来这件事从接口返回 JSON 到图表真正渲染中间要经过哪几步、参数怎么设、异步怎么处理、翻车了看哪里。适合已经会写基本 Ajax 请求、也能照着 ECharts 官网画出静态图但一接真实接口就卡住的同学。下面按先跑通最小闭环再拆参数和坑的顺序来。2. 从接口到图表Ajax 动态获取数据的完整链路拆解2.1 一次请求到底经历了什么Ajax 动态获取数据的本质是用XMLHttpRequest或fetch在页面不刷新的前提下向服务端要一段数据拿到后再交给 ECharts 渲染。整条链路可以拆成四段发起请求 → 服务端返回 → 前端解析 → 图表消费。发起请求时你要决定请求方法GET/POST、请求地址、请求头尤其是Content-Type、请求体。服务端返回后浏览器拿到的是字符串JSON.parse之后才变成对象。前端解析这一步最容易出问题有的接口返回{code:200, data:[...]}有的直接返回数组有的字段名是value有的是num。图表消费阶段ECharts 只认它规定的数据结构比如柱状图要xAxis.data和series[0].data两个数组长度还得对得上。理解这条链路的意义在于图表不显示不一定是 ECharts 的问题可能是请求根本没发出去也可能是返回结构和图表预期不匹配。排查时按链路顺序走比盯着option改半天有效得多。2.2 最小可运行闭环一个柱状图接口对接先跑通一个最小闭环。假设后端提供一个 GET 接口/api/sales返回最近五个月的销售额{ code: 200, data: [ { month: 1月, amount: 320 }, { month: 2月, amount: 480 }, { month: 3月, amount: 390 }, { month: 4月, amount: 560 }, { month: 5月, amount: 610 } ] }前端用原生fetch拿数据再喂给 ECharts// 1. 初始化图表实例绑定到页面上 id 为 chart 的容器 const chartDom document.getElementById(chart); const myChart echarts.init(chartDom); // 2. 发起 Ajax 请求获取数据 fetch(/api/sales) .then(res res.json()) // 把响应体解析成 JSON 对象 .then(res { // 3. 校验业务状态码避免把错误数据喂给图表 if (res.code ! 200) { console.error(接口返回异常:, res); return; } const list res.data; // 4. 把接口数据拆成 ECharts 需要的两个数组 const months list.map(item item.month); const amounts list.map(item item.amount); // 5. 配置 option 并渲染 myChart.setOption({ tooltip: { trigger: axis }, xAxis: { type: category, data: months }, yAxis: { type: value }, series: [{ name: 销售额, type: bar, data: amounts }] }); }) .catch(err console.error(请求失败:, err));这段代码的关键点有三个。第一res.json()返回的是 Promise必须再.then一次才能拿到真正的数据对象少写一层就会拿到 Response 对象。第二map把对象数组拆成两个平行数组顺序必须一致否则月份和金额会错位。第三setOption放在数据回来之后调用而不是页面加载时先调一次空配置。参数上xAxis.type设为category表示类目轴适合月份、品类这类离散值yAxis.type设为value表示数值轴。series[0].type换成line就是折线图换成pie则数据结构要改成{name, value}形式后面会讲。2.3 请求参数怎么传GET、POST 与编码格式实际项目里接口很少不带参数。GET 请求把参数拼在 URL 上POST 请求放在请求体里。用fetch发 POST 时Content-Type必须和请求体格式匹配否则后端解析不到。// POST 请求查询指定年份和地区的销售数据 fetch(/api/sales/query, { method: POST, headers: { // 告诉后端请求体是 JSON 格式这一行漏了后端可能收到空对象 Content-Type: application/json;charsetUTF-8 }, body: JSON.stringify({ year: 2024, region: east, page: 1, pageSize: 12 }) }) .then(res res.json()) .then(res { if (res.code ! 200) return; renderChart(res.data); });Content-Type设成application/json时请求体必须是JSON.stringify后的字符串直接传对象会变成[object Object]。如果后端用的是表单接收则要改成application/x-www-form-urlencoded请求体用URLSearchParams拼接。编码格式不匹配是参数传了但后端收不到的头号原因中文参数还涉及charset声明漏了可能乱码。参数赋值时还要注意类型。page传字符串1还是数字1有的后端框架会严格校验。我一般会在前端做一次显式转换避免后端报类型错误。2.4 异步时序为什么数据回来了图还是空的Ajax 是异步的setOption如果写在请求外面会在数据回来之前就执行图表自然是空的。这是新手最常踩的时序坑。// 错误写法setOption 先执行数据后到 let chartData []; fetch(/api/sales) .then(res res.json()) .then(res { chartData res.data; }); myChart.setOption({ series: [{ type: bar, data: chartData }] // 此时 chartData 还是空数组 });正确做法是把setOption放进.then回调里或者用async/await让代码读起来是同步的async function loadChart() { try { const res await fetch(/api/sales); const json await res.json(); if (json.code ! 200) return; myChart.setOption({ xAxis: { type: category, data: json.data.map(i i.month) }, yAxis: { type: value }, series: [{ type: bar, data: json.data.map(i i.amount) }] }); } catch (err) { console.error(加载图表失败:, err); } } loadChart();await会暂停函数执行直到 Promise 完成写起来像同步代码但本质还是异步。注意await只能在async函数里用且要配合try/catch捕获网络错误否则请求失败时页面没有任何反馈。3. ECharts 消费数据不同图表类型的数据结构差异3.1 柱状图与折线图类目轴 数值轴柱状图和折线图共用一套直角坐标系结构数据都是类目 数值的平行数组。接口返回对象数组时用map拆成两个数组即可。如果接口直接返回两个数组那就更省事。// 接口返回{ categories: [1月,2月], values: [320, 480] } myChart.setOption({ xAxis: { type: category, data: res.categories }, yAxis: { type: value }, series: [{ type: line, data: res.values, smooth: true }] });smooth: true让折线变平滑适合趋势展示柱状图不需要这个参数。多个系列时series数组里放多个对象每个对象的data长度要和xAxis.data一致否则会出现柱子错位或缺失。3.2 饼图name 和 value 的键名约定饼图的数据结构和柱状图不同它要的是{name, value}对象数组。接口返回的字段名往往不叫name和value需要手动映射。// 接口返回[{ product: 手机, sales: 1200 }, { product: 电脑, sales: 800 }] const pieData res.data.map(item ({ name: item.product, // 映射成 ECharts 认识的 name value: item.sales // 映射成 ECharts 认识的 value })); myChart.setOption({ tooltip: { trigger: item }, series: [{ type: pie, radius: 60%, data: pieData, label: { formatter: {b}: {c} ({d}%) } // 显示名称、数值、百分比 }] });radius控制饼图大小60%表示占容器短边的 60%。label.formatter里的{b}是名称{c}是数值{d}是百分比。如果饼图中间要显示文字用title组件配合left: center、top: center定位或者用graphic组件这是热词里echarts pie 中间的字的常见做法。3.3 数据映射的通用写法一个函数适配多种接口项目里接口格式五花八门写一个通用映射函数能省很多重复代码。/** * 把接口返回的数组映射成 ECharts 需要的结构 * param {Array} list - 接口返回的数据数组 * param {string} nameKey - 名称字段名 * param {string} valueKey - 数值字段名 * param {string} type - 图表类型bar/line/pie */ function mapToChartData(list, nameKey, valueKey, type) { if (type pie) { return list.map(item ({ name: item[nameKey], value: item[valueKey] })); } // 柱状图和折线图返回两个数组 return { categories: list.map(item item[nameKey]), values: list.map(item item[valueKey]) }; }调用时根据图表类型走不同分支柱状图/折线图拿categories和values饼图直接拿数组。这样接口字段变了只改调用处的参数不用动渲染逻辑。4. 避坑与排查Ajax 接 ECharts 最常见的 5 个翻车现场4.1 图表空白控制台报 data 未定义现象页面加载后图表区域一片空白控制台提示Cannot read property length of undefined或data is not defined。原因setOption执行时数据还没回来或者接口返回结构里根本没有data字段res.data是undefinedmap直接报错。解决把setOption放进请求回调里在映射前加一层判断if (!res.data || !res.data.length) return;数据为空时给个占位提示而不是让代码崩掉。4.2 请求成功但图表不刷新现象第一次加载图表正常切换筛选条件后接口返回了新数据图表还是旧的。原因setOption默认是合并模式新数据会和老配置合并某些情况下旧系列没被覆盖。或者图表实例被重复初始化新实例盖在旧实例上。解决切换数据时用myChart.setOption(option, true)第二个参数true表示不合并、完全替换。初始化前先判断实例是否存在echarts.getInstanceByDom(chartDom) || echarts.init(chartDom)避免重复初始化。4.3 中文参数乱码或后端收不到现象GET 请求带中文参数后端收到乱码POST 请求后端收到空对象。原因GET 中文参数没做encodeURIComponentPOST 的Content-Type和请求体格式不匹配。解决GET 参数用encodeURIComponent包一层POST 根据后端要求选application/json或application/x-www-form-urlencoded前者请求体用JSON.stringify后者用URLSearchParams。4.4 跨域请求被浏览器拦截现象控制台报Access-Control-Allow-Origin相关错误请求状态显示 CORS 错误。原因前端页面域名和接口域名不一致浏览器同源策略拦截。解决开发阶段配置本地代理把/api转发到后端地址生产环境由后端设置Access-Control-Allow-Origin响应头。这是服务端配置问题前端改请求头解决不了。4.5 数据量大时图表卡顿现象接口返回几千条数据图表渲染慢交互卡顿。原因一次性把全部数据喂给 ECharts渲染压力大。解决后端分页或聚合前端只取展示需要的量折线图数据点多时开启sampling: lttb降采样柱状图超过一定数量考虑横向滚动或缩放。5. 进阶技巧让动态图表更稳的几个习惯5.1 用 loading 和空状态兜底数据请求有延迟用户看到空白区域会以为坏了。ECharts 自带showLoading和hideLoading请求前显示加载动画数据回来或失败后隐藏。myChart.showLoading({ text: 加载中..., color: #5470c6 }); fetch(/api/sales) .then(res res.json()) .then(res { myChart.hideLoading(); if (res.code ! 200) { // 接口异常时给个空状态提示 myChart.setOption({ title: { text: 暂无数据, left: center, top: center } }); return; } myChart.setOption(buildOption(res.data)); }) .catch(() { myChart.hideLoading(); myChart.setOption({ title: { text: 加载失败, left: center, top: center } }); });showLoading的text和color可以自定义hideLoading必须在成功和失败两条路径上都调用否则加载动画会一直转。5.2 窗口缩放时图表自适应ECharts 实例不会自动跟随容器尺寸变化窗口缩放后图表会变形或留白。监听resize事件手动调用resize方法。window.addEventListener(resize, () { myChart.resize(); });如果图表在弹窗或标签页里容器初始尺寸为 0init时图表会渲染异常。这种情况要在容器显示后再init或者调用resize重新计算。5.3 封装一个可复用的请求 渲染函数项目里图表多了以后每个都写一遍请求和映射很累。封装成函数传入接口地址、字段名、图表类型返回配置好的实例。async function renderChart(domId, url, nameKey, valueKey, type) { const dom document.getElementById(domId); const chart echarts.getInstanceByDom(dom) || echarts.init(dom); chart.showLoading(); try { const res await fetch(url).then(r r.json()); chart.hideLoading(); if (res.code ! 200 || !res.data) { chart.setOption({ title: { text: 暂无数据, left: center, top: center } }); return chart; } const mapped mapToChartData(res.data, nameKey, valueKey, type); const option type pie ? { series: [{ type: pie, data: mapped }] } : { xAxis: { type: category, data: mapped.categories }, yAxis: { type: value }, series: [{ type, data: mapped.values }] }; chart.setOption(option, true); return chart; } catch (err) { chart.hideLoading(); console.error(图表渲染失败:, err); return chart; } }这个函数把请求、校验、映射、渲染串在一起调用方只需要传参数。注意setOption第二个参数传true保证每次都是全量替换避免旧数据残留。我自己的习惯是任何接接口的图表先确认接口返回结构再写映射最后才调setOption。顺序反了就会在option里反复改却找不到问题。另外Content-Type和encodeURIComponent这两个点我每次新接口都会检查一遍血泪经验是它们导致的参数丢失占了排查时间的一大半。希望帮到你。本文还有配套的精品资源点击获取