★ FEATURED ARTICLE 一直在用 ECharts 做可视化项目前前后后也踩了不少坑。说实话这玩意儿上手很容易照着官方示例复制粘贴就能跑起来一个图表但真到了实际项目里——大屏适配、地图数据、tooltip 换行、label 偏移这些小问题一个比一个磨人。这篇就把我平时用 ECharts 的实战经验整理一遍从基础概念到具体场景的写法都有重点放在那些官方文档里不会细讲、但你在真实开发中大概率会撞上的坑。1. 内容整体设计与思路拆解1.1 ECharts 到底是什么为什么大家都在用它ECharts 是一个基于 JavaScript 的开源可视化图表库底层依赖 Canvas 渲染官方说法叫“使用 JavaScript 实现的开源可视化库”涵盖常规的折线图、柱状图、饼图、散点图也包括地图、热力图、关系图、桑基图这类高级图表。我最早接触它是在 2017 年前后那时候做后台管理系统老板要各种数据报表当时可选的东西不多Highcharts 商用要授权费D3.js 学习曲线又太陡ECharts 几乎是唯一一个免费、功能全、中文文档还特别完善的选择。到现在它已经更新到 5.x 版本无论是渲染性能、动画效果还是 TypeScript 支持都好了很多社区也活跃基本上你搜一个问题都能在 issue 或者社区里找到答案。ECharts 的核心思路就是“配置驱动”。你不需要像 D3 那样手动操作 SVG 元素只需要给一个配置项对象option里面描述“我要画什么类型的图、数据是什么、坐标轴怎么显示、颜色是什么”ECharts 会自动完成渲染。这个设计极大降低了数据可视化的门槛也正因为如此它适合的群体非常广——前端工程师、数据分析师、后端开发临时要画个图、甚至产品经理自己想做原型都可以用。1.2 使用场景与项目适配从我的实际经验看ECharts 最常见的落地场景有这四类数据可视化大屏政务大屏、企业展厅、物流监控中心这类场景。特点是深色背景、渐变色、大尺寸、多图表联动ECharts 的visualMap、graphic、动画能力都派得上用场。后台管理系统报表统计、运营监控最常用的是折线图、柱状图、饼图配合 Element UI 或 Ant Design 这类组件库使用。地图数据展示基于 GeoJSON 渲染中国地图或省市地图配合散点图、飞线图做数据分布展示。ECharts 内置了中国地图数据虽然 5.x 后移到了扩展包里使用很方便。移动端 H5 报表配合 rem 或 vw 适配实现移动端图表展示。我这次讲的以“ECharts 的讲解”为主线把常见的东西串起来讲一遍基础图表绘制、样式调整、真实项目整合原生 JS jQuery Ajax ECharts、地图可视化、以及大屏适配和 rem 适配的问题。如果你正准备做数据可视化项目或者刚开始学 ECharts 不知道从哪入手这篇文章应该能帮你少走很多弯路。1.3 我用到的版本与环境建议直接使用 ECharts 5.x 版本npm 安装npm install echarts5或者直接用 CDNscript srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script后续的所有示例我都基于 5.x 的写法如果你还在用 4.x大部分代码兼容但少部分配置项比如labelLine的某些属性会有差异这点我会在对应位置单独提醒。2. ECharts 基础配置精讲从柱状图到坐标系2.1 第 1 关柱状图的绘制最简单也最典型很多人学 ECharts 的第一个图就是柱状图。先把最基础的流程走一遍后面所有进阶内容都建立在它之上。用原生方式写一个柱状图只需要四步!DOCTYPE html html head meta charsetUTF-8 titleECharts 入门/title !-- 1. 引入 ECharts -- script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style /* 2. 容器必须要有宽高 */ #chart { width: 600px; height: 400px; } /style /head body div idchart/div script // 3. 初始化图表实例 var chart echarts.init(document.getElementById(chart)); // 4. 设置 option 并渲染 var option { tooltip: {}, xAxis: { type: category, data: [一月, 二月, 三月, 四月, 五月] }, yAxis: { type: value }, series: [{ name: 销售额, type: bar, data: [120, 200, 150, 80, 170] }] }; chart.setOption(option); /script /body /html这里面有几个关键点值得展开说。第一容器的宽高一定要设置如果不设置ECharts 会渲染在 0 宽或 0 高的容器里图表显示不出来。很多人第一次用就卡在这个问题上浏览器控制台还不会报错特别坑。建议直接把宽高写在 CSS 里。第二echarts.init会返回一个实例对象后续所有操作都通过这个实例完成。同一个 DOM 节点上只能 init 一次重复 init 会报“There is a chart instance already initialized on the dom”的错误。如果要在同一个容器上重新渲染用chart.setOption(option)就行。第三option是整个 ECharts 的核心。柱状图这里用了xAxis、yAxis、series三段。xAxis的数据叫“类目数据”通常是文字或者日期yAxis是“数值轴”ECharts 会自动计算刻度范围。series里的type: bar决定这张图是柱状图数据data对应每个类目的数值。这里再补充一个理解维度柱状图本质上是一个二维坐标系里的矩形集合。理解了这个后面再看折线图、散点图你会发现它们只是把“矩形的绘制”换成了“折线的绘制”或“圆点的绘制”坐标系和配置思路是完全一样的。2.2 折线图与 x 轴刻度的两个高频问题柱状图搞明白了折线图就是换汤不换药——type: bar改成type: line即可。但实际项目里用得多了折线图的 x 轴刻度出现的问题也最多。下面这两个是我被问过最多、自己也踩过的问题一x 轴刻度标签挤在一起或显示不全当你的数据点很多比如一年 365 天或者类目文字很长时ECharts 默认会把所有文字都渲染出来结果就是互相重叠完全没法看。解决办法是设置axisLabel的interval和rotatexAxis: { type: category, data: days, // 假设有365个日期 axisLabel: { // 每隔几个标签显示一个0 表示全显示1 表示隔一个显示 interval: 6, // 文字旋转角度-45 表示逆时针旋转45度适合长文字 rotate: -30 } }interval配合rotate基本能解决大多数拥挤问题。如果你希望“让 ECharts 自动判断间隔多少合适”可以不设置interval或者直接设成auto这是默认行为。但当你的数据是动态变化时自动判断的效果不一定好所以生产环境我一般手动指定。问题二x 轴第一根刻度和最后一根刻度超出绘图区域这个问题在 4.x 版本经常出现表现为折线的第一根线紧贴左边框最后两根线甚至跑到边框外面去了。根本原因是类目轴两侧的留白不够。解决办法是boundaryGapxAxis: { type: category, boundaryGap: true, // 默认为true // ... }boundaryGap: true表示类目轴两端留白适合柱状图boundaryGap: false表示线与坐标轴两端对齐适合折线图。但有些场景下折线图也希望留一点边距避免最左侧的数据点被遮挡这时候可以不用boundaryGap而是给 x 轴设置min和max来手动控制两端留白。需要说明的是如果你使用type: time的时间轴刻度的控制逻辑和category轴不一样时间轴的刻度由splitNumber和interval两个参数控制单位是毫秒。高频场景下建议用type: time而不是把所有时间转成字符串塞进类目轴。2.3 tooltip 自动换行官方没说但你迟早会遇到tooltip 就是鼠标悬停在图表上时弹出的提示框。官方默认的 tooltip 内容是一个单行文本格式是“series名称数据值”。数据项一多或者你想展示的内容稍微丰富一点单行就显示不下了。我最早遇到的坑是在开发一个“监控大屏”tooltip 要显示设备名称、当前值、告警等级、更新时间默认格式根本放不下所有字段全部挤在同一条横线上。当时花了不少时间才搞清楚tooltip 的换行需要自己通过formatter函数加\n。最常用的写法是函数返回值里带上换行符tooltip: { trigger: axis, formatter: function(params) { // params 是一个数组trigger为axis时 // 或者一个对象trigger为item时 var res params[0].name br/; params.forEach(function(item) { res item.marker item.seriesName item.value br/; }); return res; } }注意tooltip 的内容支持 HTML 标签所以br/才是换行而\n在普通文本里是换行但如果你用默认的字符串模板比如{b}br/{c}两者都可以如果用函数返回推荐使用br/因为 tooltip 默认容器是rich文本环境\n不一定每次都生效。另外当trigger: axis且坐标轴上有多个 series 时params是一个数组数组里的每个元素代表一个系列在当前坐标下的数据点item.marker是图例的小圆点或小方块标记加上它会美观很多。字符串模板写法也支持换行tooltip: { trigger: axis, formatter: 时间{b0}br/最大值{c0}br/最小值{c1} }但如果你的需求稍微复杂一点比如要根据数值大小显示不同颜色字符串模板就力不从心了推荐直接用函数式。2.4 饼图的 labelLine 末尾小圆点偏移5.x 的专属坑饼图的标签线labelLine是指从饼图扇区延伸到文字标签的那条引导线。默认情况下引导线末端会有一个小圆点用来指明这块扇区的颜色。但有段时间我在做图表时发现饼图标签线末端的小圆点位置总是偏移——明明在线条端点的位置小圆点却跑到了文字的左边或上面视觉上很突兀。查了很久才发现这是 ECharts 5.x 一个已知的渲染细节问题和label的align设置有关。具体表现是当饼图标签文字较长或位置在左侧时小圆点和线条末端对不齐。解决办法有两个方向方案一直接把小圆点关掉series: [{ type: pie, labelLine: { show: true, length: 20, length2: 30, // 关闭线条末端的小圆点 endSymbol: none } }]方案二如果你确实需要小圆点可以手动设置endSymbol的偏移labelLine: { show: true, length: 20, length2: 30, endSymbol: circle, endSymbolSize: 4, endSymbolOffset: [-5, 0] }endSymbolOffset接受一个数组分别表示水平方向的偏移和垂直方向的偏移单位是像素。根据小圆点实际偏移的方向去调整这个值即可。我试下来大多数情况下水平方向偏移 -5 基本能对齐但如果文字在饼图左侧可能还需要微调垂直方向的偏移。如果你想彻底理解这个坑需要知道 label 的align策略。饼图默认会根据扇区所在的角度自动决定文字在左侧还是右侧这个“自动决定”的过程在计算 labelLine 时可能使用了一套坐标在渲染小圆点时又使用了另一套坐标所以在某些角度下就对不齐了。了解这个原因后你就知道为什么手改endSymbolOffset是有效的——它本质上就是人工补偿了这两套坐标系之间的偏差。3. 原生 JS jQuery Ajax ECharts 整合实践3.1 背景为什么还要讲这种“老”技术组合可能有人会觉得现在都用 Vue、React 了谁还用原生 JS jQuery Ajax 这套组合实际情况是很多企业现有的老项目就是这套技术栈构建的尤其是 2015 年前后的管理系统。你接手的时候大概率不会有人让你用 Vue 重写一遍而是在现有页面里新增一个图表模块。另外了解这种组合方式也能帮你更清晰地认识 ECharts 的本质——它不依赖任何框架就是一个独立的 JS 库哪怕没有构建工具一个 HTML 文件也能跑起来。这个章节我就带你完整写一个“数据可视化报表页”用原生 JS 做页面逻辑、jQuery 操作 DOM、Ajax 请求后端接口、ECharts 渲染图表。这个实例基本还原了我实际项目里的一个页面结构。3.2 完整实战Ajax 获取数据并渲染中国地图我以“中国地图数据展示”为例这也是热搜词里出现的高频场景。流程拆解如下页面加载完成后用 jQuery 的$.ajax请求后端接口拿到各省份的统计数据。将数据格式转换成 ECharts 地图系列要求的格式。初始化图表用registerMap注册中国地图的 GeoJSON 数据然后渲染。先看整个页面的核心代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 title全国数据分布/title script srchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts5/map/js/china.js/script style #mapChart { width: 100%; height: 600px; } /style /head body div idmapChart/div script $(function () { var chart echarts.init(document.getElementById(mapChart)); // 使用 jQuery 的 Ajax 请求后端接口 $.ajax({ url: /api/province/data, type: GET, dataType: json, success: function (res) { if (res.code ! 0) { alert(数据请求失败); return; } // res.data 是 [{ name: 北京, value: 100 }, ...] 的形式 var mapData res.data; var option { tooltip: { trigger: item, formatter: function(params) { return params.name br/数值 (params.value || 0); } }, visualMap: { min: 0, max: 200, left: left, top: bottom, text: [高, 低], inRange: { color: [#e0f3f8, #abd9e9, #74add1, #4575b4, #313695] } }, series: [{ name: 省份数据, type: map, map: china, roam: true, label: { show: true, fontSize: 10 }, data: mapData }] }; chart.setOption(option); }, error: function () { alert(网络异常); } }); }); /script /body /html这里有三个关键点需要展开。关键点一地图数据的来源。ECharts 5.x 之后默认的 build 包不再包含中国地图 GeoJSON 数据你需要单独引入。最简单的方式是引入echarts/map/js/china.js这个 CDN 文件4.x 内置5.x 移到了扩展仓库。引入后ECharts 内部会通过registerMap(china, geoJson)自动注册。如果你要用省市地图原理一样引入对应的 js 文件或者自己提供 GeoJSON。如果后端能直接返回 GeoJSON 格式你也可以用echarts.registerMap(myMap, geoJson)手动注册这样地图数据就可以动态加载灵活性最高。关键点二visualMap 的作用。visualMap是 ECharts 里非常强大的一个组件它在左侧或底部生成一个颜色渐变条并根据数值大小把地图上的省份自动染成不同的颜色。inRange.color数组里的颜色顺序对应从最小值到最大值的渐变过程。我在项目里常用的色系就是蓝到深蓝比较适合政务大屏。关键点三roam: true开关。设为true后用户可以拖动和缩放地图。大屏演示时建议关闭设为false因为演示过程中地图不小心被拖动后会很尴尬。需求允许的话用roam: false锁定视角更稳妥。3.3 Ajax 请求、数据转换与渲染时序上面这个实例里最容易踩的坑有两个。第一个坑是统计数据的格式。后端返回的 JSON 不能直接给series.data用必须是[{ name: 省份名, value: 数值 }]的格式。如果后端返回的是{ 北京: 100, 上海: 200 }这样的对象你需要先转换var mapData Object.keys(res.data).map(function (key) { return { name: key, value: res.data[key] }; });第二个坑是渲染时序。$.ajax默认是异步的如果你在$.ajax外面调用chart.setOption(option)此时mapData还是空的图表自然显示不出来。所以图表初始化必须在success回调里完成或者用async/await保证数据到位后再渲染。这个最基本的时序关系我在面试候选人的时候发现很多人其实不理解——他们觉得“反正都是 JS顺序无所谓”实际上异步回调的顺序完全由网络响应时间决定不是你写代码的顺序。如果你用的是fetch或者axios逻辑完全一样都是“请求成功后渲染”只是语法不同。用async/await写会更清晰$(async function () { var res await $.ajax({ url: /api/province/data, type: GET }); // 进行数据转换 ... chart.setOption(option); });3.4 真实项目里的页面整合经验这里再分享一个我在实际项目中总结的整合经验——当页面里同时存在多个图表时要给每个图表一个独立的 DOM 容器和一个独立的图表实例同时建议在窗口大小变化时统一调用resize$(window).on(resize, function () { chart1.resize(); chart2.resize(); // 有多个实例就逐个调用 });当然如果你的项目里图表很多比如大屏里有十几个图这种方式写起来会有点繁琐。可以考虑用 5.x 提供的echarts.init的替代方案——echarts.getInstanceByDom(dom)然后遍历所有容器实例统一调用$(window).on(resize, function () { $([data-echarts-container]).each(function () { var chartInstance echarts.getInstanceByDom(this); if (chartInstance) { chartInstance.resize(); } }); });echarts.getInstanceByDom是官方提供的 API作用是获取绑定在指定 DOM 节点上的图表实例如果该节点没有初始化图表返回undefined。遍历调用这个方式管理多图表实例会方便很多。4. 数据可视化大屏与 rem 适配4.1 大屏项目的常见布局与视觉设计数据可视化大屏和普通管理后台的图表开发完全是两种思路。普通后台追求的是信息密度和信息准确性大屏追求的是视觉冲击力、空间层次和数据动态展示效果。我参与过几个大屏项目从中总结出的核心经验是第一背景以深色为主。深蓝、黑灰是最经典的配色底子这样图表发光效果的对比度才会高。ECharts 默认的白色背景在大屏上会非常“出戏”一定要设置backgroundColorvar option { backgroundColor: #0f1c3a, // ... 其它配置 };第二大屏的项目里通常会使用grid组件把多个图表拼接起来。比如一张大屏上有四个图表分布在左上、右上、左下、右下可以分别用四个grid或多个独立的 div 容器来实现。我的习惯是用独立的 DOM 容器div加 CSS Grid 或 Flex 布局去排布图表的展示区域而不是用一个大容器塞多个grid。原因很简单——独立的容器可以让图表实例的生命周期更清晰也方便定位和调试。第三图表内的文字、图例、组件尺寸都要相对更大。大屏的观看距离通常是 3 到 5 米字号过小等于白写。ECharts 里label.fontSize、legend.textStyle.fontSize、xAxis.axisLabel.fontSize这些值需要根据屏体尺寸来定一般至少 12px 起步大尺寸下用 14-16px 更常见。第四动画效果要适度。ECharts 默认入场动画很顺滑animationDuration默认 1000ms。大屏上动效多一点可以增加科技感但不要每个图表都搞大动效演示会上容易显得浮夸。折线图建议animationDuration: 1500柱状图保持默认即可饼图可以调成animationType: scale让入场效果更细致。4.2 设计稿尺寸和 px 转 rem 的适配方案移动端 H5 或者大屏项目里最常见的设计稿适配方案就是 rem。rem 的原理很简单html根节点的font-size设置一个基准值页面里所有使用 rem 单位的元素都按基准值 * rem数计算。比如基准值是 50px那么宽度3.2rem就是 160px。通常我们用 lib-flexible 或者手写一段 JS 来动态设置根节点的font-size。以一个常见的设备宽度 375px、设计稿宽度 375px 为例根节点 font-size 设置为375 / 10 37.5px这样设计稿里 75px 的宽度写成2rem就行。但是ECharts 的配置项里写的是像素值不是 CSS 的 px即使页面的根字号变了这些像素值依然是绝对的设备像素。也就是说如果图表是在 Vue 项目里通过 rem 方案适配你给xAxis.axisLabel.fontSize写死 14那它在任何设备上都是 14 设备像素不会像页面的其他 HTML 元素一样跟着根字号走。这个就是热搜词里“pxtorem 对 echarts 没起到效果 vue3”这个问题的根源。4.3 pxtorem 对 ECharts 不起作用原因与解决方案先解释 pxtorem 是什么。它通常是一个 PostCSS 插件postcss-pxtorem在构建时把 CSS 里的px自动转换成rem。比如你写width: 75px构建后自动变成2rem。但 ECharts 的配置项设置的是“绘图参数”不是 CSS 样式。你在 Vue 组件里写的xAxis: { axisLabel: { fontSize: 14 } }这个14是 JavaScript 对象里的一个数字最终被 ECharts 拿去做 Canvas 绘制。PostCSS 的 pxtorem 插件只处理 CSS 文件不会处理 JavaScript 对象所以这个14不会变成0.28rem假设基准值 50px。这就直接导致——页面所有 HTML 元素在移动端都能正常缩放唯独图表里的文字、线条、图例纹丝不动。明白了原因解决方案就有多种思路了。这里给出三种实践方案。方案一reset 后手动计算监听窗口 resize或使用 rem 的基准根字号变化时机动态重设根字号后再重新渲染图表。function getRemBase() { // 假设设计稿宽度是 375分成 10 份 return document.documentElement.clientWidth / 10; } function updateChartSize() { var base getRemBase(); // 以 14px 作为设计稿原始值14 / 37.5 得到 rem 数值再乘当前 base var realPixel (14 / 37.5) * base; chart.setOption({ xAxis: { axisLabel: { fontSize: realPixel } } }); chart.resize(); } window.addEventListener(resize, updateChartSize);这个方案的好处是不依赖第三方库缺点是每个涉及 px 的地方都要手动计算比较繁琐。适合图表数量较少的项目。方案二图表自适应缩放整套配置如果你不想一个一个计算可以在拿到设计稿的option后根据当前屏幕宽度与设计稿宽度的比例对整棵配置树做一次比例缩放。简单做法是写一个递归函数但要注意只缩放那些“表示尺寸”的字段比如fontSize、width、length、symbolSize、itemWidth等不能无脑全缩放否则data里的数值会被一起改掉。function scaleOption(option, scale) { if (Array.isArray(option)) { option.forEach(function(item) { scaleOption(item, scale); }); return; } if (option typeof option object) { Object.keys(option).forEach(function(key) { var val option[key]; if (typeof val number SIZE_KEYS.indexOf(key) -1) { option[key] val * scale; } else if (typeof val object) { scaleOption(val, scale); } }); } }SIZE_KEYS是一个白名单数组包含fontSize、width、height、symbolSize、length、length2、itemWidth、itemHeight、radius等。这个方案有一定的风险误改了不该改的字段会导致效果异常但用熟了之后效率很高。方案三使用媒体查询切换视图模式如果你做的是大屏而且目标设备的尺寸相对固定比如 1920×1080 的显示器和 1366×768 的小屏完全可以通过监听resize事件切换两套option配置一套是“大屏模式”的字体尺寸和布局参数一套是“桌面模式”的。这个方案最稳定但需要维护两套配置。就我自己的经验来说如果图表数量少用方案一如果你是做通用组件库方案二更合适如果只是公司内部用、屏幕尺寸固定方案三最省事。没有银弹选最适合团队的就好。4.4 Vue 3 项目里的 ECharts 实践补充如果你的项目正好是 Vue 3这里补充一点组合式 API 的使用经验。Vue 3 中图表实例的创建和销毁需要跟随组件生命周期import { onMounted, onBeforeUnmount, ref } from vue; import * as echarts from echarts; export default { setup() { const chartEl ref(null); let chart null; onMounted(() { chart echarts.init(chartEl.value); chart.setOption({ /* ... */ }); }); onBeforeUnmount(() { chart chart.dispose(); chart null; }); return { chartEl }; } }需要注意chart.dispose()的调用。不销毁图表实例会导致内存泄漏尤其是在单页应用里频繁切换路由时图表实例会越积越多。ECharts 官方文档里明确提到了dispose方法但很多人容易忽略。另外Vue 3 里如果通过 v-show 控制图表的显示隐藏图表容器是 display:none 状态时init后图表可能显示不出来或者位置错乱。这是因为 ECharts 在初始化时会读取容器的宽高display:none 的容器宽高为 0。解决方式是在容器可见后再调用chart.resize()或者使用 v-if 确保在 DOM 渲染完成后再 init。5. 常见问题与排查技巧实录5.1 高频问题速查表我把这些年 ECharts 开发中遇到的高频问题整理成一个速查表建议收藏备用。问题现象根本原因解决方案图表不显示页面空白容器宽高为 0或 ECharts JS 未正确引入给容器设置显式宽高检查网络请求是否加载成功图表显示但数据不更新setOption没有设置notMerge为 true第二次调用时传chart.setOption(option, true)x 轴文字重叠类目太多或文字太长axisLabel.interval强制间隔或rotate旋转折线图两端显示不全类目轴默认boundaryGap: true或轴上 min/max 不合适折线图设置boundaryGap: false或手动设 min/maxtooltip 内容不换行默认模板是单行文本用函数式 formatter 加br/地图上数值不显示数据格式不对不是[{name, value}]结构转换数据格式饼图标签线端点偏移ECharts 5.x 已知渲染细节关掉endSymbol或用endSymbolOffset手动修正rem 适配后图表字体不变pxtorem 只处理 CSS不处理 JS 配置手动计算像素值或缩放配置树图表在弹窗/折叠面板中显示错位容器初始宽高为 0容器可见后调用chart.resize()切换路由后页面卡顿未在组件销毁时调用chart.dispose()在beforeDestroy/onBeforeUnmount中销毁实例5.2 两个典型的排查实录实录一setOption 数据不更新有一次我在做一个实时监控页面后端每 5 秒推送一次最新数据我用setInterval获取数据后调用chart.setOption(newOption)但图表纹丝不动。排查了半天最后发现问题出在series数组的data更新上——ECharts 默认会做数据合并merge如果新旧数据的series.name一样它会尝试“增量更新”而不是完全替换。当新旧数据的数据项数量不一致或结构差异较大时合并结果就可能不符合预期。解决办法是在第二次及后续的更新中显式指定第二个参数为truechart.setOption(newOption, true);notMerge设为true后新的配置会整体覆盖旧的配置。注意如果你用这种方法更新所有未在新配置里出现的组件都会被移除——比如你第一次设置过visualMap第二次的 newOption 里没写visualMap那它会被删除。所以要么每次更新都带上完整配置要么只在需要覆盖的地方使用notMerge。实录二弹窗里图表错位一个管理系统里用 element-ui 的 Dialog 弹出图表第一次打开弹窗时图表显示正常关掉后再打开图表要么变成了空白要么发生了偏移。这个问题很典型本质原因是弹窗打开时图表已经初始化过了但容器由display: none变为可见时图表内部缓存的计算宽度/高度并没有同步更新。解决方案也很简单在弹窗打开后或dialog的open回调里调用this.$nextTick(() { if (chart) { chart.resize(); } });如果你用的是 Vue 3注意在nextTick回调里调用确保此时弹窗的 DOM 已经渲染完成。5.3 调试工具与日常工作流最后分享几个开发调试 ECharts 的心得。ECharts 官方在 5.3 版本后提供了调试模式在页面 URL 上加参数?echarts-devtool或在初始化的 DOM 上设置>var option { backgroundColor: #1a1a2e, tooltip: { trigger: axis }, legend: { data: [销量, 增长率], textStyle: { color: #ccc } }, grid: { left: 3%, right: 4%, bottom: 15%, containLabel: true }, xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月, 6月], axisLabel: { color: #aaa } }, yAxis: [ { type: value, name: 销量, axisLabel: { color: #aaa } }, { type: value, name: 增长率, axisLabel: { color: #aaa } } ], dataZoom: [ { type: inside, start: 0, end: 100 } ], series: [ { name: 销量, type: bar, data: [120, 200, 150, 80, 70, 110], itemStyle: { borderRadius: [4, 4, 0, 0], color: #5470c6 } }, { name: 增长率, type: line, yAxisIndex: 1, data: [0.1, 0.2, 0.15, 0.3, 0.25, 0.4], smooth: true, label: { show: true, formatter: function(params) { return (params.value * 100).toFixed(0) %; } } } ] };这个模板里yAxis是数组形式支持左右两个 Y 轴series中通过yAxisIndex: 1指定使用右侧 Y 轴。这种双轴混合图在“销量 增长率”这类场景很常见。6.2 中国地图 散点图叠加地图上叠加散点图这是一种很常见的可视化形式。散点图用来标注具体城市的位置和数值大小var option { tooltip: { trigger: item }, geo: { map: china, roam: false, itemStyle: { areaColor: #1c2b4a, borderColor: #2d5a9b } }, series: [ { name: 省份热力, type: map, geoIndex: 0, data: mapProvinceData }, { name: 城市点, type: scatter, coordinateSystem: geo, data: cityPoints, symbolSize: function(val) { return Math.max(val[2] / 20, 4); }, itemStyle: { color: #ffd700 } } ] };这里的geoIndex: 0让第二个系列“共享”第一个 geo 坐标系散点图的coordinateSystem: geo表示点的坐标使用经纬度数据。cityPoints的格式是[{ name: 北京, value: [116.4, 39.9, 200] }, ...]前两个是经纬度第三个是用于计算散点大小的数值。这种配置的关键在于geo和series的关联方式。地图系列可以不直接传入map数据而是通过geoIndex引用底图这样可以让多个系列共享同一个地理坐标系。6.3 大屏风格仪表盘仪表盘在监控大屏上也很常见var option { series: [ { type: gauge, startAngle: 220, endAngle: -40, min: 0, max: 100, progress: { show: true, width: 20, itemStyle: { color: { type: linear, x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: #36cfc9 }, { offset: 1, color: #2378ff } ] } } }, axisLine: { lineStyle: { width: 20, color: [[1, #1c2b4a]] } }, data: [ { value: 66, name: 服务器负载 } ] } ] };这里的渐变颜色需要手动定义colorStops测出的效果会比较有质感。startAngle和endAngle控制仪表盘的圆弧范围220 到 -40 差不多是一个 260 度的半圆。以上这几个模板不是“最优解”但它们是我在不同项目中沉淀下来的可用方案。直接抄去改数值就能跑遇到显示细节问题再微调即可。结尾一点个人经验ECharts 这个库学起来真的不难难的是在真实场景里把它用好。我个人的体会是与其去背各种配置项不如多做几个“组合式”的案例——比如把地图、散点图、折线图放在同一个大屏里强制自己去查配置、改样式、调适配。踩坑踩得多了你对这个库的理解自然会深入。最后再分享一个小技巧如果你在一个项目里要频繁创建结构相似的图表不妨把 ECharts 的option封装成纯函数传入数据后返回配置对象。这样不仅方便复用在排查问题时也能更快定位到底是数据的问题还是配置的问题。毕竟图表归根结底只是数据的镜子——数据不对镜子再亮也没用。
阅读完成 · 觉得有帮助？
