做数据可视化几年我越来越觉得ECharts这类开源库最大的价值不是“能画图”而是把“业务问题”高效地翻译成“图形语言”。很多人一上来就翻文档、抄option结果图表是出来了可放在大屏上、汇报里总觉得差点意思——不是丑是信息传达得不对。这篇东西不聊API罗列我按实际项目里最常用的几种图表类型把选型思路、关键配置、定制技巧和踩坑记录一次讲透。内容主要面向正在做数据可视化项目、数据大屏或者刚接触ECharts想系统梳理常用图表的朋友。1. 图表选型先用业务场景倒推图形而不是先选图形再造场景很多新手找我调图表配置第一句话就是“我想画个饼图”。但饼图不是设计稿它是结论。拿到一张数据表先想“我要让看的人得出什么判断”再回头选图形顺序不能反。1.1 数据关系决定了图表的大类说白了图表服务于数据关系。常见关系就六种对比、趋势、构成、分布、关联、地理。对比关系用柱状图、条形图趋势关系用折线图、面积图构成关系用饼图、环形图、堆叠柱状图分布关系用散点图、箱线图ECharts里可以用自定义系列做关联关系用散点图加趋势线地理关系用地图。记住这个底层对应关系多数选型都不会跑偏。举个例子某个月的销售数据想突出“哪些品类贡献了主要收入”你画折线图就不对折线图是看时间变化的它表达不了构成。应该画环形图或者堆叠柱状图。反过来想表达“近12个月业绩是涨是跌”用柱状图虽然也能看但折线图对连续趋势的表达更直觉因为你眼睛追踪的是“连线方向”而不是“柱子的高度差”。1.2 分清“分析型图表”和“汇报型图表”企业内部数据分析平台和对外汇报大屏选型逻辑完全不一样。分析型图表信息密度要高允许用户仔细读、来回对比比如投资看板里的K线图、散点图x轴刻度密集也没关系。汇报型图表要一眼出结论信息做减法最好一个图只讲一个结论所以大屏上常见的是大数字卡片加简化过的环形图、柱状图。我还发现一个细节分析型场景的图例尽量放底部或顶部汇报型场景图例直接隐藏因为核心信息在图形本身。大屏上没人会有耐心去对照图例和颜色你要么用直接标注label要么把类别数量控制在5个以内。1.3 数据维度决定了细节层级同一类图表因为数据维度不同配置复杂度也不同。举个例子折线图单条线只需要测点、线条、网格很干净三条线就要考虑颜色是否色盲友好、是否需要symbol区分、图例放到哪七条线以上的折线图基本不适合人类阅读这时候方案应该改成“小多图”——每个品类一张小折线图排列成网格或者用热力图替代。饼图也有同样的问题。2到5个分项用饼图很清晰8个以上分项就会变成灾难因为小角度的扇区label根本放不下。这时候要么把“其他”归并要么改用横向条形图排序展示阅读效率反而高得多。我做过一个客户项目对方死活要饼图展示24个品类的占比我最后做了个“排名前十其他”的漏斗式处理视觉清爽结论也明确。2. 核心图表类型实操拆解从option到效果的完整思路选完图表类型接下来就是真正动手的阶段。这里我按开发中最常写的几种series类型把每个图表的配置要点和易错点逐一拆开讲。2.1 折线图平滑、渐变、x轴时间刻度的三件套折线图是高频中的高频尤其是时间趋势类数据。ECharts里用type: line实现最基本的逼近是x轴放时间维度通常是category类型y轴放数值。但这里有个坑如果你直接用时间字符串作为categoryECharts不会自动帮你按时间排序。别人的接口返回的数据是乱序的你必须自己做一次排序否则折线会乱七八糟地来回跳。后端返回数据时如果给的是ISO时间字符串数组我一般会在前端先把时间转成时间戳然后按时间戳排序再把原始category对应回去const rawData [ { date: 2025-03-05, value: 120 }, { date: 2025-03-01, value: 80 }, { date: 2025-03-03, value: 150 } ]; rawData.sort((a, b) new Date(a.date) - new Date(b.date)); const xData rawData.map(item item.date); const yData rawData.map(item item.value);折线图还有一个笔试题级别的需求x轴刻度太多时怎么处理。比如后台返回了365天的数据直接全画上去label会挤成一团。ECharts并不支持在category轴上直接设置“每隔n天显示一个label”因为label和数据点是一一绑定的。实践中好用的做法有两种。第一种是把x轴类型改成time用时间轴的时间间隔属性来控制刻度密度xAxis: { type: time, axisLabel: { formatter: {MM}-{dd} } }time轴会自动根据数据范围和坐标轴宽度计算合适的刻度密度省去手动抽稀。第二种做法是保留category轴但通过axisLabel.interval来控制xAxis: { type: category, data: xData, axisLabel: { interval: 6 // 每隔6个刻度显示一个 } }interval设置为函数也可以比如只显示月份的第一天。这里有个经验当数据点超过30个我的默认选择是先考虑time轴因为ECharts内部对时间轴的刻度计算更聪明也不会出现“某个月份没有数据导致label缺失”的怪象。折线图的美观度也值得花时间。默认的折线就是一个纯色细线加小圆点放在大屏上不够有层次感。项目里我常用两步增强第一步把线条改成平滑曲线smooth: true但注意数据本身噪声大时不要开平滑会掩盖真实波动。第二步面积图效果把areaStyle的opacity调低做成渐变这种样式在驾驶舱、监控大屏上用得非常多areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: rgba(64, 158, 255, 0.3) }, { offset: 1, color: rgba(64, 158, 255, 0) } ]) }2.2 柱状图缩放、圆角与自定义图形的扩展柱状图是“对比关系”的默认答案。最基础的配置是type: barx轴放分类y轴放数值。但实际项目里很少只用基础柱状图最少会遇到三类进阶需求。第一类是数据差距太大小柱子看不见。比如一组数据里最大值10000最小值只有3那3的柱子就是一条几乎看不见的线。常规方案是把y轴改为对数轴type: log但非专业用户很难读懂对数刻度。我在多个项目里用的办法是开启数据缩放dataZoom。把dataZoom的type分别设为inside鼠标滚轮缩放和slider底部滑块这样用户能主动放大局部看小值柱子的差异。如果是大屏展示建议把slider隐藏只保留inside缩放dataZoom: [ { type: inside, start: 0, end: 100 }, { type: slider, show: false, start: 0, end: 100 } ]第二类是圆角和渐变这两个属性是“柱状图不土”的关键。用itemStyle.borderRadius可以给柱子顶部加圆角视觉上柔和很多。渐变则跟折线图一样用LinearGradientitemStyle: { borderRadius: [6, 6, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #409EFF }, { offset: 1, color: #a0cfff } ]) }第三类比较进阶柱状图的柱子能不能用自定义图片答案可以。ECharts里内置了pictorialBar象形柱图专门用来做这种效果。典型场景是地图类看板里用“小人图标”表示人口、用“水滴图标”表示降雨量。配置方式是通过symbol指定图片URLseries: [{ type: pictorialBar, data: [120, 200, 150], symbol: image://data:image/png;base64,..., // 或者直接 https 图片地址 symbolSize: [40, 120], // 宽度40高度按数值映射 barWidth: 40 }]使用pictorialBar有三个注意点。第一symbolSize的第二个参数如果不设置图片高度不会随数值变化柱子就变成了等高的图标丧失了长度对比的意义。第二模拟柱子高度时要注意图片默认的锚点位置必要时调整symbolPosition: start让图片从底部开始生长。第三用在线图片地址时记得让后端配好跨域和缓存否则大屏偶尔会出现图标加载不出来只留下空柱子的情况。2.3 饼图label排版是最大的分水岭饼图是一种被滥用但很难画好看的图表。简单数据用饼图没问题但一旦分项超过6个label和引线的处理就成了分水岭。最基本的饼图配置用type: pie半径用radius控制。要做环形图就设置radius: [40%, 65%]内径外径的百分比是相对整个绘图区的不是相对画布。做仪表盘风格时也可以把startAngle和endAngle改一下比如270度半环形这种样式在进度类展示中特别好用。饼图最麻烦的是label。默认的label模式会把名称和数值直接放在扇区旁边分项一多就叠字。项目里常用两种处理方案。方案一所有的label都放外面用labelLine拉引线并且开启label.layout的隐藏重叠策略label: { show: true, position: outside, formatter: {b}\n{d}% }, labelLine: { length: 16, length2: 8, smooth: true }方案二小扇区不显示label只在大扇区上标注。可以通过label.show配合数据项级别的配置实现data: [ { value: 335, name: 直接访问, label: { show: true } }, { value: 310, name: 邮件营销, label: { show: true } }, { value: 44, name: 联盟广告, label: { show: false } } ]还有一个很高频的细节问题labelLine末尾小圆点偏移。很多设计稿里要求引线末端带一个小圆点然后圆点旁边再放文字。ECharts的labelLine目前没有直接暴露“小圆点偏移量”的配置项处理的办法是用自定义富文本或者干脆不用内置labelLine改用markLine自定义图形。我在实际项目里图省事的做法是折中让label的formatter返回带圆点的字符串比如用marker类型formatter: (params) { return ● ${params.name} ${params.percent}%; }这样小圆点和文字是连在一起的视觉上很接近设计稿要求还不用额外处理引线。注意这种写法要小心字符编码和字体大小保证●在目标浏览器和字体下正常渲染。饼图的tooltip也值得单独提。默认的tooltip触发方式是跟随鼠标的悬浮层但如果扇区太小鼠标很难精确悬浮到目标上。我通常会设置trigger: item并把formatter做成更丰富的对比信息tooltip: { trigger: item, formatter: {b}br/数量{c}br/占比{d}% }2.4 散点图分布与关联的利器注意性能和视觉密度散点图在数据分析平台里常用来表达两个变量的相关性或样本的分布形态。ECharts里是type: scatter基础配置很简单但实际项目里很容易遇到两个问题。第一个是“标签重叠”。当散点数量多且你想给其中一部分点加上文本标注时标注文字必然叠加。ECharts虽然从5.0开始引入了labelLayout可以设置hideOverlap: true来自动隐藏重叠标签但这个策略会随机隐藏可能把你想强调的点藏了。更好的做法是在数据层面做筛选只对topN的数据显示labeldata: rawData.map((item, index) ({ value: [item.x, item.y, item.size], label: { show: index 10 } }))第二是性能。当散点数据量超过上万条直接把数据丢进去会造成卡顿。应对方案一是使用large: true开启大数据量优化模式二是canvas画布渲染默认是canvas不要改成SVGSVG在几万点下性能很差三是在数据进图前先做抽稀。比如原始数据10万条在x轴和y轴上分别做等距离抽样到2000条以内对人眼来说分布形态几乎无差别function downsample(data, keep 2000) { if (data.length keep) return data; const step Math.floor(data.length / keep); return data.filter((_, i) i % step 0); }散点图还有一种变体叫“气泡图”用散点的第三个维度映射到symbolSize表达一个额外的数值。视觉冲击力很强但解读门槛也高汇报时一定在图上给尺寸图例否则观众不理解大泡泡代表什么。2.5 地图中国地图的注册与数据映射避开“空白图”的坑地图在很多后台系统里属于“看起来很难其实只要绕过一个坑就很顺”的图表。ECharts官方从5.0开始不再内置地图GeoJSON需要自己注册。网上随便下载的china.json虽然能用但版本和质量参差不齐有的缺少南海诸岛有的区域名跟你数据里的名称对不上。我建议直接从几个可信渠道拿GeoJSON然后通过registerMap注册import chinaMap from ./china.json; echarts.registerMap(china, chinaMap); const chart echarts.init(document.getElementById(map)); chart.setOption({ series: [{ type: map, map: china, roam: true, data: [ { name: 北京, value: 123 }, { name: 上海, value: 456 } ] }] });地图最容易出问题的点有两个。第一数据里的省份名称必须跟GeoJSON里的name字段完全一致。很多后端返回的是“北京市”“新疆维吾尔自治区”而GeoJSON里可能写的是“北京”“新疆”匹配不上地图就不会高亮。解决办法是做一个名称映射表const nameMapping { 北京市: 北京, 新疆维吾尔自治区: 新疆 };第二个点是地图的视觉映射。地图上的数值一般用visualMap组件控制颜色深浅。连续型数据用type: continuous离散分级用type: piecewise。我推荐大屏场景用piecewise让数值分为几个等级视觉更明确也更方便跟图例呼应visualMap: { type: piecewise, pieces: [ { min: 1000, label: 1000以上 }, { min: 500, max: 999, label: 500-999 }, { min: 100, max: 499, label: 100-499 }, { min: 0, max: 99, label: 0-99 } ], left: 20, bottom: 20 }地图上做散点叠加也是常见需求比如用effectScatter做城市亮点带波纹扩散效果。这种组合在“全国业务分布”的页面里几乎是标配。2.6 雷达图多指标综合评估的展示逻辑雷达图适合展示多维度综合能力评估比如人员能力模型、产品多属性对比。ECharts的type: radar配置不算复杂但有两个容易忽略的地方。第一是indicator里的max值。如果不设置所有指标的最大值都默认是100但实际数据的度量单位不一致时比如最高分是78最低才20雷达图会变得全部挤在一起。所以每个指标单独设置max是必需的否则图形无法反映真实的维度差异。第二是雷达图线条的观感。多个系列同时显示时必须用areaStyle区分开否则纯线条很容易交叉在一起难以分辨。我一般给每个系列都加上半透明区域颜色顺序靠后的系列透明度调低一点视觉上能看清叠加关系。radar: { indicator: [ { name: 覆盖率, max: 100 }, { name: 准确率, max: 100 }, { name: 效率, max: 10 }, { name: 成本, max: 500 } ] }雷达图还有一个进阶玩法用radar.axisName的formatter做换行和富文本样式。项目里出现过指标名很长、被截断显示成省略号的问题我当时直接用axisName: { formatter: (name) name.slice(0, 4) \n name.slice(4) }强制换行效果干净利落。2.7 K线图金融场景的专属实现ECharts里K线图是type: candlestick它在金融数据平台里出场率很高。K线数据格式比较特殊每个数据点是[open, close, lowest, highest]。很多人第一次写会跟接口返回字段顺序搞混。K线图在项目中通常还有一个隐藏需求成交量的柱状图要和K线共享x轴。这时需要在同一个option里定义两个xAxis和两个yAxis让它们通过grid来共享或者分栏。ECharts支持一个chart实例里放多个grid配置时把K线图和量图分别指定到不同的gridIndex就能实现上方K线、下方成交量的经典组合。grid: [ { left: 60, right: 20, top: 40, height: 55% }, { left: 60, right: 20, top: 72%, height: 18% } ], xAxis: [ { type: category, data: dates, gridIndex: 0 }, { type: category, data: dates, gridIndex: 1, axisLabel: { show: false } } ], yAxis: [ { gridIndex: 0, scale: true }, { gridIndex: 1, scale: true } ]K线图还有均线叠加的需求。很多人想在K线上叠加MA5/MA10正确的做法是再加两个line类型的series同时把xAxisIndex指到grid 0用smooth开启平滑。这样均线作为独立系列可以在图例里控制显示和隐藏。3. 高频定制需求实战把默认图表改成“有产品感”的图表默认的ECharts图表说实话很朴素直接放到实际项目里会显得比较简陋。这一章我挑几个高频出现的定制需求讲实际操作方案覆盖tooltip、自适应、富文本和动效。3.1 tooltip自动换行与自定义内容排版tooltip是鼠标悬浮时展示的提示框。默认的tooltip样式就是一行名称加一个数值对于字段多的情况非常不好看。ECharts支持formatter返回HTML字符串可以自定义很多排版。先讲一个高频痛点tooltip内容太多时如何自动换行。formatter里直接用br/就能换行。但如果你拿到的是一个很长的字符串想在固定宽度内自动换行ECharts本身不帮你断行你需要自己在formatter里写逻辑比如按字符数手动插入换行或者用CSS的word-break属性配合extraCssTexttooltip: { trigger: axis, extraCssText: max-width: 240px; white-space: normal; word-break: break-all; }extraCssText是ECharts保留给tooltip DOM追加样式的最方便途径。不会自动换行的问题就用这个解决。但是有个前提只有当你的formatter返回的是HTML字符串时CSS才会生效如果你用textStyle.rich的方式去拼富文本extraCssText对富文本内部布局的作用有限因为富文本是canvas绘制的不是DOM。所以做tooltip时我建议需要复杂布局用HTML字符串需要跟主题风格统一的canvas绘制用富文本。从性能上tooltip的HTML DOM在反复hover时会频繁创建销毁如果图表本身数据量很大可能出现轻微卡顿这时用富文本反而更流畅。3.2 x轴刻度标签太多时的“防重叠”组合拳这个主题词我搜到有专门的“echarts折线图x轴刻度”热搜估计大家踩的坑都差不多。category轴label重叠是ECharts最常被吐槽的问题之一。处理手段通常有以下几个层次。第一层隐藏一部分用axisLabel.interval。第二层旋转角度axisLabel.rotate: 30或45度。第三层换行显示通过formatter给文字手动加\n。比如日期2025-03-05可以格式化成03-05减少宽度或者显示成两行“03/05”。第四层用axisLabel.hideOverlap这个是ECharts内置的防止label重叠的开关设置为true后会自动隐藏放不下的标签。但注意hideOverlap只是隐藏不保证你希望显示的标签最终留下来所以如果你有“必须显示的起点终点”最好手动指定interval。如果数据量实在太大——比如每分钟一个点展示24小时共1440个点——那任何interval策略都只是权宜之计。更本质的方案是聚合。把1440个点聚合成60个点每5分钟一个平均值或最大值再展示用户看图时既能看到整体趋势又不会因为点太多而显得杂乱。ECharts社区里还有基于dataZoom的“缩放到一定级别显示密集刻度”的进阶做法用axisLabel.formatter依据当前dataZoom范围动态返回不同精度的文本这个适合有专门交互需求的项目。3.3 柱状图柱子用自定义图片的实现方案前面讲pictorialBar时说到可以用图片当柱子。这里的实现细节可以再展开一下。第一图片资源建议转成base64内嵌。原因是部署后如果CDN域名变更或资源跨域柱子图片很容易挂掉而base64内嵌在JS文件里只要JS能加载柱子就一定能显示。缺点是文件体积会变大一个装饰性图片base64化后可能多几十KB做一个图表还好如果项目里有几十个pictorialBar务必评估包体积。第二柱子的对齐方式。pictorialBar的symbolPosition有三个值start、end和center。柱状图默认从坐标轴原点开始向上生长所以symbolPosition设为start是正确的。如果图片本身有大量留白比如一个图的PNG透明区域很多那么视觉上柱子会比实际短这时需要在设计资源阶段就裁掉多余留白或者用symbolOffset做微调。第三柱子上能否加渐变和阴影可以。通过itemStyle.opacity、shadowBlur、shadowColor给图片增加阴影效果。以下是一个带阴影的象形柱配置series: [{ type: pictorialBar, symbol: image://data:image/png;base64,..., symbolSize: [50, 80], symbolPosition: start, itemStyle: { shadowBlur: 10, shadowColor: rgba(0, 0, 0, 0.3) } }]3.4 大屏适配和pxtorem对ECharts没效果的问题热词里有一句特别真实“pxtorem 对echarts没起到效果 vue3”。这几乎是每个写大屏的人都会撞上的坑。简单说pxtorem是PostCSS插件它只处理CSS文件里的px单位而ECharts图形是在canvas上绘制的所有尺寸都是JavaScript运行时计算的跟CSS单位一点关系都没有。所以用pxtorem的方案去缩放ECharts画布的大小当然是无效的。大屏适配的正解是让容器尺寸跟随视口等比缩放然后让ECharts调用resize。业界最常用的方案是设计稿1920x1080按比例scale页面根容器.screen-container { width: 1920px; height: 1080px; transform-origin: left top; transform: scale(calc(100vw / 1920), calc(100vh / 1080)); }同时监听resize事件动态调整transform的scale值。ECharts图表本身在容器内部它的尺寸单位是逻辑像素所以不会被CSS缩放影响。只要容器比例保持一致所有图表都能正常适配。这个方案比用rem、vw更稳。因为ECharts内部大量使用了百分比和像素计算混用rem容易在边界情况下出现间距错位和字体大小不一的问题。如果你确实想用rem方案那ECharts里的字体大小、symbolSize、间距这些都不能用写死的px值而要通过一个公共方法把设计稿像素转换为rem然后在option里调用。这是一项体力活远不如scale方案省心。我在大屏项目里几乎只用scale方案。3.5 用富文本实现高级标签样式ECharts的textStyle.rich是一个非常强大的能力但很多人不太会用。它允许标签在同一个文本里使用不同的颜色、字体、边框、背景、图标。典型场景是柱状图柱顶显示数值数值旁边再带一个上升或下降的小标识或者是折线图在关键点上显示带背景色的说明文字。以下是一个通过rich让饼图label“左侧色块名称右侧百分比”的配置label: { formatter: {name|{b}}\n{percent|{d}%}, rich: { name: { color: #333, fontSize: 14, lineHeight: 22 }, percent: { color: #909399, fontSize: 12, lineHeight: 22, backgroundColor: #f0f2f5, borderRadius: 4, padding: [2, 6] } } }富文本最难维护的地方在于饼图label的换行结构完全靠formatter里的\n控制当分项名长或短各不相同很容易出现参差不齐。我一般会配合label.width和label.overflow: truncate来限制最大宽度再加ellipsis。在细节控的项目里也可以让formatter根据文本长度动态决定是否换行formatter: (params) { const name params.name.length 4 ? params.name.slice(0, 4) \n params.name.slice(4) : params.name; return ${name}\n${params.percent}%; }3.6 动效和交互细节提升整体质感大屏项目里适当的动画能提升专业感但过度动画会显得浮夸。ECharts里每个series都有animationDuration和animationEasing配置。我常用的动效组合是折线图用animationDuration: 800柱状图用animationDuration: 600地图的effectScatter用默认的涟漪效果即可。仪表盘指示器也值得加一点“缓动”通过animationDurationUpdate控制数值变化时的动画时长。比如一个数字卡片指标从10000滚动到13000的过程如果时长设为1000ms观感会平滑很多。还有个隐藏细节tooltip的enterable参数。默认tooltip在鼠标移入时会消失因为移入tooltip本体相当于mouseout了。如果tooltip里放了可点击的链接或选择按钮必须设置enterable: true否则你根本点不到tooltip里的内容。这个坑在做带跳转的自定义tooltip时非常常见。4. 常见问题与排查技巧实录直接把答案摆在这里下面整理一些我实际开发中遇到并排查过的问题辑成一个速查表可以当手册用。现象常见原因处理建议柱状图/折线图x轴label挤成一团label过多且未做抽稀或旋转使用interval、rotate或hideOverlap饼图小扇区label重叠分项过多、label位置冲突增加最小显示比例阈值、隐藏小扇区label地图省份不显示高亮数据name与GeoJSON name不一致建立name映射表注册地图时先检查name字段图例点击后图表消失数据为空或图例icon与series未匹配检查series的name是否与legend.data完全一致tooltip不定位置换行formatter返回内容里缺少换行符使用br/配置extraCssTextECharts图表不随容器大小变化未调用resize监听容器或window resize调用chart.resize()setOption二次渲染后图形残留未使用notMerge或数据不完整使用chart.setOption(option, true)整体替换地图覆盖区不显示波纹effectScatter的geoIndex或coordinateSystem未设置确认series的coordinateSystem: geo或map映射正确4.1 容器隐藏后图表宽度变成100px的问题最常见的“ECharts初始化后图表宽度不对”的场景是在tab切换、折叠面板或弹窗里初始化图表。容器那时是display:none状态获取到的宽度为0ECharts就渲染成了一个极窄的画布。后面即使把容器显示出来图表也不会自动重新计算尺寸于是各种错乱。解决方案有两种。一是不要提前初始化等容器真正显示后再init。二是初始化后调用chart.resize()。在Vue里可以用nextTick加Tab切换回调this.$nextTick(() { if (this.chart) { this.chart.resize(); } });React里我习惯用一个ResizeObserver来监听容器变化只要尺寸发生变化就触发resize。这个比监听window.resize更准确因为只有容器尺寸变了才需要resize避免频繁计算const resizeObserver new ResizeObserver(() { chart chart.resize(); }); resizeObserver.observe(container);4.2 动态刷新数据时动画堆积导致卡顿一些监控大屏每5秒或10秒刷新一次数据如果直接setOption塞入新数据ECharts默认会做新旧数据之间的过渡动画。短时间频繁刷新时动画队列会堆积出现卡顿甚至闪白。解决办法是刷新时关闭动画chart.setOption( { series: [{ data: newData }] }, false, // notMerge true // lazyUpdate );lazyUpdate为true时ECharts会把多次setOption合并成一次渲染对高频数据非常友好。再把动画关闭图表的CPU占用会明显下降。4.3 数据接口返回null或0时如何处理断点这是折线图特有的一种情况某些时间段没有数据接口返回null某些时间段值是0接口返回0。null和0在ECharts里的表现完全不同。null代表无数据折线图默认会断开connectNulls: false时断开0代表数值为0会画在坐标轴上的一个真实位置。业务上要判断缺失数据应该断开还是连线如果数据是每日业绩周六日没数据通常希望周六日不断线那就设connectNulls: true。如果是系统监控某段时间采集器故障导致数据缺失那最好是断开否则会误导操作者以为一直正常运行。设置方法series: [{ type: line, connectNulls: false }]还有个更隐蔽的现象接口后端返回null时有的后端会直接删除该字段导致数组长度变短了。比如365天的数据返回了350个点x轴还是365天此时折线图会数据错位。遇到这种情况后端必须保证数组长度与日期完整对齐缺失的用null补齐而不是跳过。4.4 企业级项目中ECharts按需引入与打包体积优化ECharts全量引入的打包体积大约在1MB左右压缩前在后台管理系统里还能接受但在移动端或对首屏性能敏感的项目里就不能接受了。ECharts官方从5.0开始支持按需引入思路是只引入需要的模块import * as echarts from echarts/core; import { LineChart, BarChart, PieChart } from echarts/charts; import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent } from echarts/components; import { CanvasRenderer } from echarts/renderers; echarts.use([ LineChart, BarChart, PieChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, CanvasRenderer ]);按需引入后初始包体就能从近1MB降到300KB左右未gzip。如果你还要用到地图、雷达图、K线图记得按需注册对应的Chart和组件。这里有个经验凡是报错“Component series.line not exists”或者“Component title not exists”基本就是按需引入时漏了对应模块。遇到报错不要慌去查echarts官网“按需引入”菜单对照补上即可。map类型在使用按需引入时还有一个专门的坑地图的GeoJSON数据和Geo组件是分开的必须同时引入GeoComponent或MapChart并且通过echarts.registerMap注册地图数据。漏了registerMap或者忘引入对应Chart都会导致地图空白或直接报错。4.5 图表“数据更新了但视图不更新”的隐藏原因有时你发现数据变了console打印option也是新的但页面上图表纹丝不动。排查思路按以下顺序走setOption有没有被调用。有的人在Vue里改变了data数组却忘了调用setOption。series数组的index是否稳定。setOption时如果只传新dataECharts会按index匹配旧的series。如果旧的series顺序变了数据就对不上了。是否开启了animationDurationUpdate: 0如果设为0新数据会瞬间切换视觉上像是没更新其实是更新了。有没有在同一个DOM节点上init了多个chart实例。如果有后一个实例覆盖了前一个的引用你调的chart是旧的实例页面显示的是新的实例数据当然不会刷到界面上。最后一条最容易遇到。尤其在tab切换、弹窗复用同一个DOM的组件里每次打开都重新init一次设备上就累积了无数个chart实例。正确做法是初始化前先销毁之前的实例if (chartInstance) { chartInstance.dispose(); } chartInstance echarts.init(dom);4.6 大屏项目中字体的“蚂蚁腿”问题大屏分辨率往往是1920x1080甚至更高但视觉设计稿里的字体如果直接按12px渲染在投影或大屏上看会非常细、非常小。ECharts里的字体大小默认继承外部的textStyle。我的经验是大屏图表基础字号至少14px起标题16-18px指标数字可以用24-32px。另外尽量使用笔画较粗的字体比如fontWeight: 500或600避免细体。大屏色值也讲究深色背景上用强对比色系白、亮青、亮黄、亮蓝比浅色背景更醒目。ECharts的textStyle.rich支持富样式你可以给不同的数值类型分别配置颜色和字体。5. 尾声我这些年踩过的ECharts坑写到这里主体内容基本收尾了。最后按惯例分享几条个人感悟不是空话都是我实际项目里交过学费换来的。第一ECharts的官方示例是最好的教程但它不会教你怎么做信息减法。很多时候你看到一个复杂图表觉得炫酷复制过来后发现业务方根本看不懂。我的原则是如果一个图需要用超过10秒去解释那这个图就应该被简化。图表是结论的载体不是炫技的道具。第二维护图表代码时把option拆成可配置的数据结构而非一坨写死的大对象。我做过一个几十个图表的大屏每个图表都是独立的componentoption里的颜色、字体、间距全部抽成公共主题配置。后期想调整视觉风格只改一个theme文件全屏联动。如果当初每个图表都各自把颜色写死改起来就是地狱。第三不要把ECharts当所有可视化问题的解药。雷达图、地图、K线图它都能画但遇到关系网络graph、桑基图这类复杂关系型数据时ECharts虽然也有对应系列调试成本和渲染性能未必比得上专业的图分析库。选型时不要只看图表类型有没有还要评估你的数据量级和交互复杂度。最后再分享一个小技巧也是我最近在用的写ECharts配置时先用官方示例页快速调效果确认视觉后再把option搬到项目代码比直接在项目里盲改要高效得多。先把option贴到官方实例的编辑区调整到满意再复制回项目能省很多来回运行重启的时间。这是一个极其便宜但有用的工作流强烈推荐给所有跟ECharts打交道的同学。