在正式开始之前我先说个事儿。我一直觉得前端圈有个误解总觉得“数据可视化”是大厂数分团队或者资深架构师才能碰的东西。真不是ECharts这个开源库把这行门槛压得非常低甚至低到——你只要会写一点JavaScript对象字面量就能在网页上画出能拿得出手的图表。而“超详细”这三个字恰恰是当年我入门时最渴望的因为官方文档很全但就是全到让新手不知道该从哪一页看起。这篇东西就是冲着“手把手带你把ECharts跑起来并且真正理解它”去写的。我会用一个从业者的视角带你从环境搭建、核心概念、三大高频图表折线、柱状、饼图一路走到数据接入、大屏适配、真实开发中那些文档不会告诉你的坑。读完这篇不管你是学校里的课程作业、公司的管理后台、还是自己的个人项目都能直接抄作业。1. 数据可视化与ECharts先搞清楚你在用什么1.1 数据可视化为什么是前端绕不开的技能数据可视化的本质是把“数字”翻译成“图形”。人的视觉通道处理信息的速度远超文字和表格一张折线图的趋势走向你用肉眼半秒钟就能捕捉到但换成一张几千行的CSV表格你得盯半天还不一定有结论。所以无论是老板要的经营看板、运营要的活动复盘、还是政府机构要做的大屏汇报本质上都需要这一层“翻译”。ECharts能火这么多年核心原因有两个。第一它是纯前端方案不需要任何后端渲染服务一个JS文件就搞定一切部署成本几乎为零第二它的配置式API很反直觉地做到了——语法看起来特别繁琐但正因为繁琐反而换来了极强的自定义能力。你几乎可以调整图表的每一个像素细节颜色、间距、字体、阴影、动画曲线全部暴露在配置项里。1.2 ECharts到底能做哪些图你听到的、能想到的常规图表它都覆盖折线图、柱状图、饼图、散点图、雷达图、热力图、地图包括中国地图和世界地图、仪表盘、漏斗图、桑基图、关系图、树图。另外通过扩展插件echarts-gl它还能做3D柱状图、3D地球、3D曲面等直接拉高了可视化大屏的“科技感”上限。我在实际项目里最常被问的一个问题就是“这图ECharts能不能画”说实话这几年我几乎还没遇到过它画不出来的常规图表。它真正的Bug不在于“画不出来”而在于“样式调不到你想要的细节”。但从入门角度讲它算是所有开源图表库里边界最宽、社区最活跃的一个遇到问题基本都能搜到答案。1.3 什么样的场景适合用ECharts综合下来适合用ECharts的场景有这几类后台管理系统的数据看板、统计报表运营活动页里的数据展示模块数据可视化大屏配合flexible适配方案非常成熟教学演示、实验报告、毕业设计中的图表呈现需要快速原型验证的数据分析项目反过来说如果你的项目要求极致的性能比如实时刷新每秒几十次的股票行情图或者千万级数据点的密集散点图那ECharts未必是最优解可能需要考虑Canvas底层更精简的方案或者WebGL渲染。但对绝大多数场景ECharts的性能和开发效率都是够用的。2. 环境准备与第一个Hello World图表2.1 引入ECharts的三种方式选哪种看环境引入ECharts的方式无非三种CDN、npm安装、直接下载JS文件到本地。CDN方式适合快速尝鲜或者写简单Demo直接在HTML里加一行script标签就行script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/scriptnpm方式适合正式的工程化项目不管是Vue、React还是原生Webpack项目都建议走这条路npm install echarts还有一种方式是直接去官网下载echarts.min.js放到自己的静态目录里。这种方式适合内网环境或对资源加载速度有要求的场景不依赖外网CDN的稳定性。我的建议是如果只是做课程作业或者临时Demo用CDN最快如果是正经项目直接npm装后面按需引入的时候也方便。另外提醒一个点ECharts 5以后的版本体积已经不大了mingzip约300多KB如果项目里只用到几个图表可以用按需引入的方式import * as echarts from echarts/core来减小打包体积不过这是后话入门阶段不需要纠结。2.2 第一个图表从零到一跑通不管用什么方式引入跑起第一个ECharts图表的步骤都只有三步准备一个带宽高的容器、初始化实例、塞配置项。先看一段最基础的代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleECharts 入门/title !-- CDN方式引入 -- script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style /* 容器必须有宽度和高度否则图表渲染不出来 */ #chart { width: 600px; height: 400px; } /style /head body div idchart/div script // 1. 基于准备好的dom初始化echarts实例 var chartDom document.getElementById(chart); var myChart echarts.init(chartDom); // 2. 指定图表的配置项和数据 var option { title: { text: 第一个ECharts图表 }, tooltip: {}, xAxis: { data: [周一, 周二, 周三, 周四, 周五, 周六, 周日] }, yAxis: {}, series: [ { name: 访问量, type: bar, data: [120, 200, 150, 80, 170, 210, 190] } ] }; // 3. 将配置项设置给图表实例 myChart.setOption(option); /script /body /html这段代码会在页面上渲染出一个带标题的柱状图横轴是周一到周日纵轴是数值柱子高度对应data数组里的数字。到这一步你已经跑通了ECharts的完整流程——没错就这么简单难的是后面的配置项细节。2.3 理解option配置项的核心结构ECharts的灵魂全在option这个对象里。它不是随随便便的一个配置对象而是一套完整的JSON式的图表描述语言。新手最容易懵的就是不知道option里面有哪些字段、字段之间是什么关系。我可以帮你把option拆解成几个记忆模块title图表的标题tooltip鼠标悬停时出现的提示框控件legend图例多系列时用来区分不同数据grid绘图网格控制图表上下左右留白xAxis/yAxis横轴和纵轴配置series数据系列核心中的核心配置数据本身和图表类型color全局颜色主题toolbox右上角的保存图片、数据视图等工具按钮animation动画开关及动画时长其中series是一整个数组因为一个图表里可以有多个系列比如一个图里既有柱状图又有折线图就是往series数组里塞两个对象。我见过很多初学者一上来就对着官方配置文档死磕结果每个字段都试了一遍然后头大。我的建议是千万不要试图背配置项用的时候查就好。你需要的唯一基本功是——拿到一个需求能把它拆解成“series里放什么数据、xAxis放什么类目、yAxis需不需要自定义刻度、tooltip要不要格式化”这四个问题。3. 三大高频图表实操柱状图、折线图、饼图3.1 柱状图从单系列到多系列的玩法柱状图是业务系统里出现频率最高的图表类型没有之一。它的配置逻辑很清晰x轴放类目比如月份、部门名称y轴放数值比如销售额、人数series里的type改成bar。单系列柱状图最基础但实际项目里很少只放一组数据更多是多系列的对比。比如你有一个需求对比上半年和下半年每个月的销售额。这个需求看起来复杂其实就是在series数组里加一个对象option { xAxis: { data: [1月, 2月, 3月, 4月, 5月, 6月] }, yAxis: {}, series: [ { name: 上半年, type: bar, data: [120, 200, 150, 80, 170, 210] }, { name: 下半年, type: bar, data: [180, 160, 190, 240, 220, 260] } ] }加了第二个系列之后柱状图默认会变成两个柱子并排显示同时图例legend也会自动出现方便用户点击图例来切换隐藏/显示某个系列。柱状图还有一个实战中很常用的配置是堆叠。比如你想看每个月总销售额的同时还想看不同产品线各自贡献了多少堆叠柱状图就非常直观series: [ { name: 产品A, type: bar, stack: total, data: [120, 200, 150] }, { name: 产品B, type: bar, stack: total, data: [80, 120, 90] } ]这里的核心是stack字段值设为相同的字符串比如total这两个系列就会堆叠成一根柱子分别显示不同色块的高度。实际开发中我经常用它来做“总览构成”的复合图表。最后补充一个进阶技巧柱状图柱子宽度控制。默认情况下ECharts会自动计算柱宽但有时候自动计算的结果并不好看可以用barWidth显式指定比如barWidth: 20表示柱子宽度20像素如果希望柱子自适应比例可以写barWidth: 20%这个比例是相对于绘图区域宽度的。3.2 折线图平滑曲线、面积图与x轴刻度问题折线图适合展示数据随时间或类别的变化趋势。核心配置就是type: line其余逻辑和柱状图几乎一样series数组里加数据就能出图。但折线图有几个很细节的坑尤其新手容易踩。第一个是平滑曲线。默认情况下折线图的线条是硬朗的折线每个转折点都是尖角。如果想让它变成圆滑的曲线只需要加一个字段series: [ { type: line, smooth: true, data: [120, 200, 150, 80, 170, 210, 190] } ]smooth: true之后连线就会变成平滑的贝塞尔曲线。视觉效果会柔和很多适合趋势类的数据展示。但注意如果数据要精确读出每个点的值那折线比平滑曲线更有“数值感”因为平滑曲线是拟合出来的视觉上的点位置并不严格对应数据。这个取舍看场景。第二个是面积图。想在折线下面填充渐变色或者半透明颜色只需要在areaStyle里配一下series: [ { type: line, data: [120, 200, 150], areaStyle: { color: rgba(84, 112, 198, 0.2) } } ]配合color渐变色写法面积图能做到非常漂亮的视觉效果。这一步在可视化大屏里特别常用。第三个是x轴刻度不连续的问题。很多用户会遇到这种情况折线图的x轴数据明明是等距的比如每月一个点但是第一个点和最后一个点不贴合坐标轴两端图表的刻度显得不完整。这通常是因为xAxis的type被设置成了category但边界gap没调对或者数据有缺失值。最直接的解决方式如下xAxis: { type: category, boundaryGap: false, data: [1月, 2月, 3月, 4月, 5月, 6月] }boundaryGap: false表示折线图起点和终点紧贴坐标轴边缘不会在左右两侧留下多余的空白。柱状图则相反通常希望boundaryGap保持默认的true柱子与y轴之间留有空隙这也是为什么ECharts默认值对柱状图友好、但对折线图不友好的原因。3.3 饼图环形图、标签与引导线微调饼图适合展示占比关系比如流量来源、用户年龄段分布、收入构成等。入门饼图非常简单option { series: [ { type: pie, data: [ { value: 320, name: 搜索引擎 }, { value: 240, name: 直接访问 }, { value: 180, name: 社交媒体 } ] } ] }但饼图有两个高频需求一个是环形图一个是标签和引导线的美化。环形图其实就是饼图加一个内半径series: [ { type: pie, radius: [40%, 70%], data: [...] } ]radius如果是数组形式第一个值是内半径第二个是外半径。内外半径之间就形成了“环形”视觉上比实心饼图更轻盈也方便在中间区域放一个总数值。想做这种中间显示总数的效果可以用title配合textAlign实现也可以用一个全透明series占位但最方便的是用graphic组件。标签和引导线是饼图最容易调出问题的部分。默认情况下饼图每个扇区外面会显示name和value的标签标签和扇区之间有一条细线这就是labelLine。但经常会有标签文字重叠、引导线末端的小圆点偏移、标签文字被截断等问题。一个比较常用的配置模版如下series: [ { type: pie, label: { show: true, formatter: {b}\n{d}%, fontSize: 12 }, labelLine: { show: true, length: 10, length2: 15, smooth: true }, emphasis: { label: { fontSize: 16, fontWeight: bold } } } ]formatter支持模板字符串{b}表示名称{c}表示数值{d}表示百分比。如果你是做外包项目被要求“每个扇区外面都显示名称和百分比”用这一行formatter: {b}: {d}%就够了。另外当你遇到“引导线末尾小圆点偏移”这种问题的时候大概率是你画了自定义的饼图itemStyle或者对labelLine有过分自定义导致的。ECharts本身对引导线的锚点计算是自动的手动改width或height反而会出问题最能解决问题的方式是把labelLine.length和length2用默认值或者把label.position设置为outside之外的其他值试试。4. 让图表“活”起来交互、动画与自适应4.1 图表与窗口联动resize的必修课绝大多数数据可视化页面都不是固定尺寸的浏览器窗口一变图表如果不变就会出现“图表宽度比容器大”或者“图表被拉伸变形”的问题。ECharts提供了一个resize方法专门应对这种情况。正确用法是在浏览器窗口尺寸变化时调用图表实例的resize方法window.addEventListener(resize, function () { myChart.resize(); });但在实际项目中这个写法有几个坑。第一个坑是性能问题resize事件触发频率非常高如果不做节流图表会频繁重绘页面会掉帧。第二个坑是当你用了flexible或者rem适配方案时resize方法不一定能自动感知字体变化可能需要手动传入新的宽度高度。我的个人建议是配合underscore/lodash的throttle或者手写一个简单的防抖函数let timeout null; window.addEventListener(resize, function () { if (timeout) { clearTimeout(timeout); } timeout setTimeout(function () { myChart.resize(); }, 300); });另外还有一个细节myChart.resize()默认会自适应到容器当前的实际尺寸但如果你在初始化之前容器是隐藏或零尺寸的那图表初始化后很可能是0宽0高。遇到这种“放进弹窗里图表不显示”的问题解决办法是等弹窗打开、容器显示之后再调用init或者初始化之后手动resize一下。4.2 tooltip格式化与自动换行技巧tooltip是鼠标悬停时出现的提示框是用户感知数据最直接的窗口。默认tooltip会展示系列名称和相关数据但要做出能交付的可视化项目tooltip几乎总是要“加工”一下的。最常见的需求有两类一是tooltip里要显示额外的计算值二要支持多行文本。Formatter支持两种写法字符串模板和回调函数。字符串模板适合简单场景比如tooltip: { trigger: axis, formatter: {b}br/{a0}: {c0} 元 }这里的{a0}代表第一个系列的名称{b}是类目名{c0}是对应数值。如果数据量多、格式复杂回调函数会更灵活tooltip: { trigger: axis, formatter: function (params) { let res params[0].name br/; params.forEach(function (item) { res item.marker item.seriesName : item.value 元br/; }); return res; } }item.marker是ECharts自动生成的小色块通常是圆点或者方块用来在图例、tooltip里区分系列颜色这个细节很多教程不会讲但实际效果非常好看。接下来是tooltip自动换行问题。新版ECharts5.x的tooltip默认不支持自动换行也就是说如果你的提示框里塞了很长的描述文字它不会自动折行。解决方式有两种一是在formatter里面手动插br/换行二是给tooltip的extraCssText加一个white-space: normal的样式tooltip: { trigger: axis, extraCssText: white-space:normal; word-break:break-all; max-width:300px; }设置max-width的目的是防止内容太长撑爆提示框。实测下来加了white-space: normal之后中文文本会按容器宽度自动换行体验提升明显。4.3 animation动画配置要不要关掉它ECharts给每次渲染都默认加了动画柱状图从底部升起、折线图从左到右画出来、饼图慢慢展开。这套动画对于初次加载来说确实加分但有两个场景建议关掉或调短时长第一个场景是数据频繁更新的实时图表。如果每5秒就刷新一次数据动画会让人觉得图表一直“闪个不停”反而影响阅读。第二个场景是初始化加载大数据量图表比如几千个点动画会让页面卡顿。处理方式option { animation: false // 直接关闭全部动画 };如果要保留动画但希望更快速可以设置动画时长option { animation: true, animationDuration: 300, animationEasing: cubicOut };我在做大屏可视化项目时通常会保留首次加载的动画但把时长控制在500毫秒以内既保留了“炫酷效果”又不至于拖沓。4.4 dataZoom与图例交互数据量大的时候用户需要在图表上缩放、拖动查看局部数据。ECharts的dataZoom组件就是干这个的。它支持两种形态内置在坐标轴内部的inside鼠标滚轮缩放和独立的slider可拖动的滑块条。配置方式非常简单dataZoom: [ { type: slider, start: 0, end: 100 }, { type: inside, start: 0, end: 100 } ]这里start和end是百分比数值表示默认显示数据的起止位置。如果只想显示最近一个月的数据可以把start设为80。dataZoom对于“时间跨度大用户需要聚焦某一段”的折线图特别有用是图表交互性的一个重要加分配置。5. 数据接入从静态数据到真实业务数据5.1 原生JS jQuery Ajax 请求后端数据很多课程作业和外包项目都需要把ECharts和Ajax结合起来前端通过Ajax请求后端接口获取JSON数据然后动态地塞进ECharts的option里。这也是“将原生js、jquery、ajax、echarts结合制作网页”这种常见需求的核心逻辑。基本套路是这样的$.ajax({ url: /api/sales, method: GET, dataType: json, success: function (res) { if (res.code 0) { // 拿到数据后动态更新option myChart.setOption({ xAxis: { data: res.data.map(function (item) { return item.month; }) }, series: [ { data: res.data.map(function (item) { return item.value; }) } ] }); } }, error: function () { console.error(数据请求失败); } });这里有一个值得强调的细节setOption是合并式更新不是覆盖式更新。也就是说你调用setOption({ series: [...] })的时候图表会保留原有的title、legend等配置只更新series部分。这个特性用好了可以无缝更新数据但也带来一个容易踩的坑——如果新旧series数组长度不一致或者series里的name变了ECharts的合并逻辑可能会保留一些旧数据导致图表显示不符合预期。解决方式是在更新数据的关键场景显式调用myChart.clear()清空实例然后重新setOption或者用notMerge参数myChart.setOption(option, true); // 第二个参数为true表示完全覆盖不合并实际项目里我一般是默认不合并保持setOption简单的覆盖行为避免“旧数据残留”的问题。5.2 Vue3项目中的ECharts封装思路Vue项目引入ECharts的方式比原生JS要讲究一点。如果只是简单地在mounted里init、在destroyed里dispose确实能跑通但很容易遇到内存泄漏和重复渲染问题。更好的做法是封装一个通用的图表组件。以Vue3的Composition API为例核心思路是用ref绑定DOM容器在onMounted里初始化实例在watch里监听option变化并调用setOption在onUnmounted里销毁实例template div refchartRef stylewidth: 100%; height: 400px;/div /template script setup import { ref, onMounted, onUnmounted, watch } from vue; import * as echarts from echarts; const props defineProps({ option: { type: Object, required: true } }); const chartRef ref(null); let chartInstance null; onMounted(() { chartInstance echarts.init(chartRef.value); chartInstance.setOption(props.option); }); watch(() props.option, (newOption) { chartInstance.setOption(newOption); }, { deep: true }); onUnmounted(() { chartInstance chartInstance.dispose(); chartInstance null; }); /script这个封装虽然简单但已经解决了我上面说的三个痛点DOM生命周期对应、数据响应式更新、组件卸载时清理实例。如果你的项目里图表很多甚至可以在这个基础上再抽象一层把resize监听、主题切换、按需引入都封装进去。但要注意一个很常见的问题在Vue3中如果父组件的容器宽度变化比如侧边栏折叠ECharts并不会自动感知。合理做法是在组件内监听容器尺寸变化或者外抛一个resize方法供父组件调用。如果项目里用了ResizeObserver可以做更精细的适配。5.3 rem适配与pxtorem对ECharts的影响热搜词里有一条“pxtorem 对echarts没起到效果 vue3”这确实是个很实际的问题。很多人在做数据可视化大屏的时候喜欢用postcss-pxtorem或者lib-flexible方案做rem适配。这些方案的原理是把页面根字体大小html的font-size动态设置为视口宽度的一个比例然后通过PostCSS插件在编译时把CSS里的px自动转成rem。问题在于ECharts的配置项里写的字号、宽度、高度都是JavaScript对象里的数值不是CSS样式所以PostCSS根本不会去处理它们。这就导致图表的px数值不会随屏幕变化。比如你在1920宽的设计稿上写死了fontSize: 12在1366的屏幕上它仍然是12像素不会被rem缩放。解决方案有三种不用pxtorem处理图表相关内容图表容器用百分比宽度配置项里的字体、柱子宽度等也就不用特意做rem适配——大屏一般只适配特定分辨率区间这个方案最实用。在init之前根据屏幕宽度动态计算一个缩放系数把option里的px数值都乘以这个系数。比如基准宽度是1920当前宽度是1366系数就是1366/1920≈0.711。然后把整个option做一次深度遍历对数字类型的值乘以系数。这种方案能保证图表整体按比例缩放但对配置项的处理逻辑比较复杂。如果用echarts.init初始化后动态调用myChart.resize()浏览器窗口变化时图表会按容器尺寸变化但内部字体、柱子宽度等仍然是写死的px数值。我的建议是如果是正式的政务大屏或企业大屏项目走方案二最稳妥如果是普通管理系统里的报表直接用方案一就够了不需要折腾rem。5.4 数据可视化大屏的工程化套路数据可视化大屏这几年简直是前端项目里的“流量密码”很多公司都愿意花钱做。它的核心难点不在于ECharts本身而在于“多分辨率适配”和“视觉设计美观”。经验之谈大屏项目的标配套路是用rem方案做整体适配图表容器用百分比图表内部的字体和间距用动态计算的缩放系数。布局上多用flex和grid避免用死板的固定像素值。配色上ECharts默认的配色其实偏淡大屏通常需要更亮眼、更有对比度的配色可以用color数组全局覆盖option { color: [#00c8ff, #f7b500, #ff5757, #00e396, #3ad9e1, #c56bfb] }另外大屏还有一个性能细节如果页面里同时有十几个图表实例每个实例都监听window resize事件那浏览器窗口变化时会一次性触发十几次resize回调页面会明显卡顿。解决方式是做一个统一的resize管理器只监听一次window resize然后遍历注册的所有图表实例统一调用resize方法。这个细节对用户体验影响很大。6. 常见问题排查与进阶玩法实录6.1 折线图x轴刻度不对齐怎么办“echarts折线图x轴刻度”是很多人在搜索的问题具体症状通常有两类第一类是x轴类目只有7个但y轴刻度线有10条网格线对不上第二类是折线图的数据点没有显示在x轴刻度的正上方。第一类问题的根源是xAxis的type设置问题。如果你设置type: valueECharts会把它当作连续型数值轴刻度由数值范围自动计算于是刻度线数量和你的类目数量完全没关系。当你想显示类目刻度时xAxis应该用type: category或者干脆不设置typeECharts会自动推断。第二类问题通常是boundaryGap导致的。柱状图默认boundaryGap: true所以柱子会均匀分布在两个刻度之间而折线图通常希望点正好在刻度上所以要设为false。如果你只是复制了柱状图的option改类型为line就很容易出现错位。排查建议先检查xAxis.type再检查boundaryGap两个都对了刻度基本就能对齐。6.2 饼图labelLine末尾的小圆点偏移这个问题的完整描述通常是“饼图引导线末端的小圆点不在一条直线上有高有低”或者“小圆点偏移到了标签文字的外面”。出现这个问题的根本原因是饼图label的align和labelLine的定位是基于不同算法计算的当你手动调整了label的margin、align、position等配置时ECharts的引导线锚点不一定能跟着调整。实操中的解决方式有这么几条路给label设置alignTo: edge让文字统一靠边对齐引导线会根据文字位置重新计算锚点偏移问题一般会消失。把edgeDistance设置为一个固定数值定义一个文字距离容器边缘的距离保证左右两侧标签位置对称。如果还不满意就只能用formatter在标签文字后面拼接自定义符号或者干脆关闭labelLine自己手动标注。要注意的是新版ECharts5.2中饼图的引导线和标签算法已经做了很多优化如果项目中可以升级版本很多老版本文档里描述的奇葩偏移问题会自动消失。6.3 柱状图能用自定义图片当柱子吗答案是能。ECharts本身不限制柱子的呈现形式你完全可以在series的data里给每一项设置icon相关的配置也可以用itemStyle里的color配一个图片地址作为纹理填充。最常见的方式是用image作为柱子的填充纹理series: [ { type: bar, data: [120, 200, 150], itemStyle: { color: { image: /images/bar.png, repeat: repeat } } } ]这里color不是一个普通颜色字符串而是一个对象。ECharts会读取image指向的图片并用它作为柱子的纹理。repeat的值可以是repeat、repeat-x、no-repeat等。如果你用的是图片路径注意浏览器跨域问题必要时给图片设置crossOrigin属性。如果要实现更复杂的“图片柱子”比如柱形是渐变色的同时顶部有一个小图标那通常是需要在label里配置formatter返回一个图片标签或者在图形的上层再叠加一个图形。这个就属于前端视觉进阶的范畴了入门阶段掌握纹理填充已经足够应付大多数场景。6.4 中国地图为什么总是一片空白“echarts中国地图”是个高频热词。很多人在ECharts里画地图时发现地图区域一片空白没有任何省份轮廓。根本原因不是配置写错了而是ECharts从5.0开始不再默认内置地图GeoJSON数据。你需要手动引入中国地图的GeoJSON然后注册到ECharts实例中。常见做法是import chinaMap from /map/china.json; echarts.registerMap(china, chinaMap);注册完成之后再把series的type设为mapoption { series: [ { type: map, map: china, data: [ { name: 北京, value: 100 }, { name: 上海, value: 200 } ] } ] };这里有一个非常关键的坑数据里的name必须和GeoJSON里的省份名称完全一致。比如GeoJSON里写的是“北京市”你的数据里写“北京”就匹配不上地图上就不会显示颜色。解决方式是写一个名称映射函数或者干脆直接用GeoJSON里现成的名称。6.5 echarts-gl3D柱状图怎么入门很多人搜索“柱状图 3d echarts”其实默认的ECharts是不支持3D柱状图的。如果你想做类似3D地图、3D柱状图、3D散点图这类效果需要扩展库echarts-gl。安装方式npm install echarts-gl或者CDN方式引入echarts-gl.min.js之后你就可以用type: bar3D来绘制3D柱状图了。但3D柱状图的配置和2D完全不是一套逻辑它依赖xAxis3D、yAxis3D、zAxis3D三个轴组每个柱子有个三维坐标。初见会觉得很陌生不过好在官方示例里有很多可以直接copy改数据的Demo。我的建议是除非项目确实需要“科技感”很强的演示效果否则别轻易上3D。因为3D图表的可读性往往不如2D而且对硬件、浏览器性能的要求也更高。如果是课程设计或者毕业设计用2D图表把内容讲清楚反而更容易得高分。6.6 ECharts社区去哪里找现成方案最后给大家留几个我私藏的找例子的渠道。ECharts官方示例库https://echarts.apache.org/examples是最全面的资源库每个例子都带完整代码而且支持在线编辑。其次是ECharts的GitHub仓库里的issue区很多需求其实早有其他人提过搜一搜有奇效。还有一个是“Make A Pie”这个小工具可以直接在线配置饼图样式然后导出配置适合快速验证样式效果。社区方面掘金、思否上搜“ECharts 大屏”能找到很多实战分享但是要注意发布时间太老的文章里配置方式可能和5.x版本有出入。最后分享一个我个人的习惯每次接到ECharts的需求我不会立刻写代码而是先拿纸笔画出“图表草图”标清楚有几个系列、每个系列的数据从哪来、tooltip要显示哪些、图例要不要可交互、容器在什么尺寸下展示。把这些想清楚ECharts的option不过是翻译问题。反过来如果你一上来就堆配置大概率会在样式调整上耗掉好几倍的时间。可视化这件事永远是想清楚再画比急着画更重要。