简介针对Web前端与后端开发人员这是一份演示Ajax异步请求与ECharts图表动态渲染的ASP.NET示例程序。资源以Visual Studio项目形式提供包含完整C#后端代码、aspx页面、JavaScript脚本及依赖DLL可直接打开调试帮助理解从创建XMLHttpRequest请求、解析JSON响应到调用setOption更新图表的完整链路。压缩包共29个文件主要类型包括8个C#源文件、3个aspx页面、3个JavaScript脚本、4个DLL库及3个配置文件等体积仅446KB轻量易用。已有1193人学习下载适合初入数据可视化的开发者参考。示例中覆盖初始化图表、按钮触发加载两种模式并包含Web.config等部署配置可快速迁移到实时监控、数据看板等场景。 做前端开发的几乎都躲不开这么一件事页面加载完了后端数据还在路上图表区域要么空白要么转圈。而把“数据拿到手”和“把图画出来”这两件大事打通最常见的组合拳就是——Ajax 拉数据ECharts 画图。这篇内容不会只给你贴一段“点按钮然后图表变了”的 demo而是把整个动态图表的链路拆开Ajax 请求怎么传参、怎么设置编码不产生乱码、请求回来的数据怎么处理成 ECharts 能吃的格式、初始化报错怎么排查、移动端点不动怎么办、怎么让图表有科技感、3D 效果。适合刚接手数据可视化项目的新手也适合用它自查那些“图表明明会写但不稳定”的老问题。1. 整体设计从“后端给什么”到“ECharts 画什么”1.1 一次动态图表的数据链路我刚开始做数据可视化的时候总习惯把数据直接写死在 option 里后端一改需求就得改前端代码重新发版非常被动。后来换成了标准三层结构后端接口返回 JSON 数据前端通过 Ajax 请求获取拿到数据后拼装成 ECharts 的 option再调用setOption渲染。这样做的好处是页面结构、接口地址、图表类型三者解耦。后端只要保证接口返回稳定前端改需求时只改数据处理逻辑图表组件不用动。你可能想问都用上 Ajax 了为什么不用 WebSocketWebSocket 适合实时性要求很高的场景比如股票行情、在线协作它需要服务端主动推送部署成本高。而普通后台看板、报表这种场景数据更新频率是秒级甚至分钟级用 Ajax 定时轮询足够而且代码直观、排查问题容易。1.2 一份“前后端都舒服”的 JSON 结构ECharts 接收的数据其实很灵活但如果你和后端对接最好约定一个统一的结构不然每次接口返回格式都不同前端的“适配层”会越来越臃肿。我自己常用的是这种{ code: 0, msg: ok, data: { categories: [衬衫, 羊毛衫, 雪纺衫], values: [5, 20, 36] } }code用来判断业务是否成功data里包含图表需要的字段。如果是饼图我会让后端直接返回[{ name: 衬衫, value: 5 }, { name: 羊毛衫, value: 20 }]刚好对应饼图的 data 格式。这样前端几乎零转换。如果后端返回的字段名不匹配也不要急着改后端可以在前端写一个mapData方法把接口字段映射成 ECharts 需要的结构。数据层面的“小隔离”能避免很多跨端联调拉扯。2. Ajax 请求的细节别让数据在门口就丢了2.1 传参、编码、赋值一个不少Ajax 动态获取数据最常见的坑不是请求失败而是参数不对、参数编错了、或者后端读不到值。先看传参。jQuery 的$.ajax支持三种常见传参方式$.ajax({ url: /api/order/list, method: GET, data: { startTime: 2025-01-01, endTime: 2025-01-31 }, success: function (res) { renderChart(res.data); } });只要data是一个 JS 对象jQuery 会自动把它序列化成startTime2025-01-01endTime2025-01-31拼到 URL 上。如果你需要动态给参数赋值比如从日期控件里取值直接在发起请求前把它塞进对象里就行var params { page: 1, pageSize: 10 }; params.startTime $(#startTime).val(); params.endTime $(#endTime).val(); $.ajax({ url: /api/order/list, data: params });这种做法比字符串拼接 URL 安全的地方在于jQuery 会自动对参数值做encodeURIComponent避免特殊字符引起的解析错乱。再说编码。Ajax 请求设置编码格式关键就在contentType和页面字符集的一致性。如果是 POST并且后端用的是 Java Spring 这类框架默认能解析application/x-www-form-urlencoded; charsetUTF-8所以一般这么写$.ajax({ url: /api/order/save, method: POST, contentType: application/x-www-form-urlencoded; charsetUTF-8, data: { name: 中文名称 }, success: function (res) { } });如果你发现后端收到的中文变成乱码先别怀疑 ECharts先检查请求头里Content-Type的 charset 和后端解码头是否一致再检查页面本身字符集是不是 UTF-8。多数“Ajax 乱码”都是这里不一致导致的。注意data如果传的是 JSON 字符串contentType要改成application/json; charsetUTF-8后端接收方式也要对应调整不能混用。2.2 layui 场景下的 ajax 写法热词里有人搜“layui ajax get”因为很多后台管理系统用的是 layui它内置了自己的layui.$或者直接用 jQuery。在 layui 里发起请求常见的写法有$.get(/api/user/list, { role: admin }, function (res) { // res 是后端返回的数据 }, json);也可以用$.ajax全写这两种本质上一样。区别在于$.get无法自定义contentType如果后端要求特定的请求头还是老老实实写$.ajax。我实际项目里更习惯把请求封装成一个公共函数统一处理 loading、错误提示、数据解包业务层只需要传 url 和参数回调用解包后的 data。这样几十个图表页面不会出现“十个请求九个乱写”的情况。3. ECharts 核心配置与动态渲染3.1 初始化与 setOption静态改成动态关键就两行很多新手一开始是把 option 写好然后chart.setOption(option)。动态获取数据的区别在于option 里数据部分变成了变量在 Ajax 的 success 里赋值。var chart echarts.init(document.getElementById(main)); function renderChart(data) { var option { tooltip: {}, series: [{ type: pie, data: data }] }; chart.setOption(option); } $.ajax({ url: /api/category/ratio, success: function (res) { if (res.code 0) { renderChart(res.data); } } });注意echarts.init要在容器渲染完成之后再调用否则容器宽高是 0图表根本画不出来。另外如果你多次调用setOptionECharts 默认是合并模式也就是说如果新 option 缺少某个字段旧配置还会保留。想完全刷新可以加第二个参数chart.setOption(option, true);设置为true后会清除上一次的渲染状态适合做“完全刷新”的场景。但如果你只更新数据不希望 tooltip、legend 等交互状态被重置建议不要用true直接 setOption 即可。3.2 饼图、多 y 轴柱状图、雷达图、visualmap pieces 一锅出热词里出现频率很高的几个echarts 饼图、多 y 轴图表、雷达图展示单点信息、visualmap pieces。这几个正好覆盖了日常报表的常用场景。饼图最常见的问题是“怎么让数据变成百分比”和“怎么让 label 不重叠”。前者用formatterlabel: { formatter: function (params) { return params.name params.percent %; } }后者可以通过增大series.radius的差值、设置minAngle来减少极小扇区的重叠。多 y 轴场景通常是因为左右两边数据量级不同比如柱子显示销售额万折线显示转化率%。配置要点是yAxis: [ { type: value, name: 销售额 }, { type: value, name: 转化率, splitLine: { show: false } } ], series: [ { type: bar, yAxisIndex: 0, data: salesData }, { type: line, yAxisIndex: 1, data: rateData } ]这里yAxisIndex就是告诉当前系列用第几个 y 轴。第二个 y 轴的splitLine.show设置为false是为了避免两条横向网格线叠加在一起看图时容易看岔。雷达图展示单点信息意思是数据只有一个人或一个维度比如“当前用户的能力模型”。这种做法的关键不是雷达图本身而是要把数据构造成雷达图要求的格式radar: { indicator: [ { name: 技术, max: 100 }, { name: 沟通, max: 100 }, { name: 管理, max: 100 } ] }, series: [{ type: radar, data: [{ value: [80, 70, 60] }] }]visualmap pieces 我一般在散点图或地图上用用来按值域分段着色。比如 PM2.5 数据按优、良、轻度污染分段visualMap: { type: piecewise, pieces: [ { min: 0, max: 50, label: 优, color: #00b050 }, { min: 51, max: 100, label: 良, color: #ffff00 }, { min: 101, max: 200, label: 轻度污染, color: #ff9900 } ] }这个配置省去了自己手动 split 数据的麻烦视觉上也很直观。实操心得visualMap 的 pieces 优先级会比连续型 visualMap 高如果你的图表配色很怪先检查 series 里是否设置了多余的itemStyle.color它会把分段颜色盖掉。3.3 科技感图表与伪 3D 柱状图热词里有两个很有意思“中心是数字占比周围散发长短不一的动态线条”和“柱子要 3d 的或者看着像 3d 的”。这俩其实都是“看起来炫但实现不复杂”的需求。先看“中心数字 动态线条”。这个场景很像一个动态仪表盘。中心显示占比四周有运动的装饰线条。实现思路是底图用环形图饼图的一种中心加一个 graph 或者直接用 option 里的graphic元素放文本动态线条用lines系列配effect实现series: [ { type: pie, radius: [55%, 70%], data: pieData, label: { show: false } }, { type: lines, coordinateSystem: polar, effect: { show: true, period: 4, trailLength: 0.6 }, data: lineData } ]其中lineData可以不断通过setInterval重新生成随机长度和位置注意在 setInterval 里调用的函数要保存chart实例避免闭包引用丢失。至于 3D 柱状图如果你的项目用的是 ECharts 5可以直接引入echarts-glimport echarts-gl;然后配置series: [{ type: bar3D, data: data.map(function (item) { return [item.x, item.y, item.z]; }), shading: lambert, label: { show: true } }]如果不想引入额外的包也可以用“伪 3D”方案把一根柱子叠成 5-10 段每段颜色由深到浅视觉上就有圆柱感。这种方式对性能友好适合数据量大、对真实 3D 渲染不敏感的场景。3.4 legend 一键全选与框选事件“echarts 如何一键 legend 全选全不选”也是一个实用需求。ECharts 本身没有直接“全选”的 API但可以通过监听legendselectchanged事件遍历所有系列并设置 selected 状态chart.on(legendselectchanged, function (params) { var allSelected params.selected; var seriesNames Object.keys(allSelected); var anySelected seriesNames.some(function (name) { return allSelected[name]; }); // 如果全部为 false则把所有系列设为 true if (!anySelected) { var newSelected {}; seriesNames.forEach(function (name) { newSelected[name] true; }); chart.dispatchAction({ type: legendToggleSelect, name: seriesNames[0] }); } });还有一种更粗暴的方式直接重设整个 series 的显示状态但 dispatchAction 的方式不会丢失其他配置和状态体验更好。框选事件则依赖brush组件。你需要先声明brush: { toolbox: [rect, polygon, clear], xAxisIndex: 0 }然后监听chart.on(brushSelected, function (params) { var brushSelected params.branches[0].selected; // 里面包含选中的 series 索引和数据索引 });框选事件常用于地图、散点图的区域筛选联动。注意brush 组件的xAxisIndex如果不设置默认对所有轴生效实际使用时容易导致只想框 x 轴却把 y 轴也框进去了。4. 常见问题与排查技巧实录4.1 这个报错我先替你趟过了cant get dom width or height热词里出现了log.js:72 [echarts] cant get dom width or height. please check dom.clientWidth这是 ECharts 最常见的报错没有之一。它的原因特别简单你调用echarts.init(dom)的时候那个 dom 元素的宽度或高度是 0。常见触发场景有三种容器 CSS 没设置宽高容器还在display: none的状态比如用了 Tab 切换容器还没插入到文档流中就 init 了。解决办法也很直接给容器设置明确的 CSS比如width: 100%; height: 400px;如果是 Tab 切换在切换完成后再调用 init 或chart.resize()如果用了 Vue 或 React不要在created里 init要到mounted或nextTick之后再操作。#main { width: 100%; height: 400px; }我自己遇到过最阴间的场景容器宽度是百分比父级元素在 Flex 布局里Flex 项没设置min-width: 0导致容器塌陷成 0。排查的时候直接用document.getElementById(main).clientWidth打印一下如果输出 0就去查父级布局。4.2 移动端无法点击与小程序 wx-canvas 适配“echarts 移动端无法点击”这个热词通常不是 click 事件的问题而是 tooltip 的触发方式。移动端默认没有 hover如果选项里写了tooltip: { trigger: axis }它响应的是鼠标悬浮手指点击时可能不灵敏。建议移动端统一设置tooltip: { trigger: item, confine: true }trigger: item让触控点在数据项内就能触发提示框confine: true防止提示框被屏幕边缘截断。小程序环境则是另一个坑。ECharts 官方提供了wx-canvas方案核心是用echarts.init(canvas, null, { width, height })手动创建 canvas。注意在小程序里不能直接用document.getElementById去拿节点要使用wx.createSelectorQuery()。如果你只在移动端 H5 上用还有一个省事技巧在chart.setOption之后监听window.resize事件调用chart.resize()不然屏幕旋转或软键盘弹出后图表可能白屏。4.3 模块加载与按需引入require 到底什么时候用热词里有“echarts require”这说明有不少人在 ECharts 的模块引入上踩了坑。旧版本的 ECharts 3/4 可以用require(echarts)这种 AMD 风格引入但 ECharts 5 默认推荐 ES Module 按需引入。如果你是 webpack 工程可以这样写import * as echarts from echarts/core; import { PieChart, BarChart } from echarts/charts; import { TooltipComponent, LegendComponent } from echarts/components; import { CanvasRenderer } from echarts/renderers; echarts.use([ PieChart, BarChart, TooltipComponent, LegendComponent, CanvasRenderer ]);这样打包体积会比全量引入小很多对首屏性能有帮助。如果你只需要一个图表类型却全量引入首屏会白白多加载几百 KB。不过如果你是在老项目里用 script 标签引入echarts.min.js那直接全局echarts.init就行不需要写require。require报错大概率是因为运行环境不支持 AMD而你却在自定义脚本里写了require。避坑技巧不要混用全局echarts和import echarts两种方式一旦混用可能出现echarts.use is not a function或者图例消失这类诡异问题。选一种方式全项目统一。4.4 常见问题速查表现象原因解决图表白屏dom 宽高为 0设置容器宽高Tab 切换后 resizeAjax 返回中文乱码请求 contentType 与后端解码不一致统一 UTF-8POST 时显式设置 contentType移动端点了没反应tooltip 依赖 hover改用trigger: item加confine: truesetOption 后旧数据不消失默认合并模式需要完全刷新时用setOption(option, true)legend 全选无法一键恢复没有事件处理监听 legendselectchanged全不选时 dispatchActionvisualMap 颜色不生效series itemStyle 覆盖去掉 series 内 itemStyle 的颜色设置小程序里图表不显示没有正确创建 canvas 节点使用官方 wx-canvas 适配方案我个人做动态图表项目时最大的体会是Ajax 和 ECharts 分开看都是成熟技术真正影响体验的往往是它们之间的“接缝”处——数据结构不一致、参数编码不对、容器时机不对。把这些接缝处理好了图表的稳定性会大幅提升。最后再分享一个小技巧接口返回数据后尽量先打印到控制台确认结构再往setOption里填能少踩一半的坑。本文还有配套的精品资源点击获取