尧图网站开发 
ECharts这个库说句实话是我目前用过的上手门槛最低、出效果最快的数据可视化方案没有之一。只要会写HTML哪怕JS只懂一点皮毛也能在五分钟内搞出一张能直接扔进汇报PPT里的图表。项目标题写得很实在——“复制即可使用”这正是ECharts最厚道的地方通过CDN引一个JS文件所有图表全靠配置项驱动不用自己画坐标轴不用算刻度间距更不用操心canvas底层那一堆东西。这篇文章我就从实际使用的角度把从零到一怎么搭出一个能用的ECharts页面、几个高频图表的完整代码、地图和大屏玩法以及我踩过的一些坑全部摊开来讲。适合谁来参考刚接触前端、想把数据画成图表的同学需要快速做可视化demo的开发者还有那些被业务方追着要“可视化大屏”但前端基础一般的朋友。文章里的代码都是完整可运行的复制到一个HTML文件里就能看效果。1. 先把最基础的HTMLECharts骨架搭起来1.1 为什么非要用HTML而不是直接写JS文件很多初学者会有个疑问ECharts不是个JS库吗那我直接建一个.js文件引入不就行了实际上ECharts的所有渲染工作都得依托于浏览器环境它要操作DOM节点、要用canvas或SVG去绘制图形这些能力只有浏览器内核才提供。HTML文件在这里的角色就是给ECharts提供一个“画板”和一个“运行环境”。所以最简单的形式就是一个.html文件里面写上基础的文档结构、引入ECharts的CDN链接、放一个指定了宽高的div容器然后写一小段初始化脚本。不需要安装Node.js不需要下载npm包不需要webpack打包——对大多数只想“快速出图”的场景来说这一套已经绰绰有余。就算以后要上Vue、ReactECharts的配置项体系也是完全通用的现在花时间学会的东西到那时候照样能用。1.2 一个完整到可以直接复制的HTML模板我这里直接给出一个最小可用的ECharts页面模板从字符编码到容器样式到图表初始化一次到位!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleECharts 复制即用模板/title !-- 引入 ECharts 5.x 的 CDN 文件 -- script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style /* 图表容器必须有明确的宽高否则图表显示不出来 */ #main { width: 800px; height: 500px; margin: 0 auto; border: 1px solid #eee; } /style /head body !-- 放图表的容器 div -- div idmain/div script // 基于准备好的dom初始化echarts实例 var myChart echarts.init(document.getElementById(main)); // 指定图表的配置项和数据 var option { title: { text: 一个最简单的柱状图 }, tooltip: {}, xAxis: { data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子] }, yAxis: {}, series: [{ name: 销量, type: bar, data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); /script /body /html这里有几个关键点必须强调一下第一meta charsetutf-8绝对不能省否则中文字符在部分浏览器下会乱码图表标题变成一堆问号是很尴尬的事。第二容器div必须有明确的宽高很多人复制完代码发现页面空白九成是忘了给容器设尺寸。第三初始化脚本要放在容器后面或者用window.onload包起来确保脚本执行时可以拿到DOM节点。文件建好后用浏览器直接打开就能看到效果。如果是用Visual Studio Code写代码可以装一个Live Server插件右键选择“Open with Live Server”好处是修改代码保存后浏览器自动刷新不用每次手动点刷新按钮实测在调图表配置时能节省大量时间。2. 三个高频图表折线、饼图、柱状复制就能跑2.1 折线图与x轴刻度的那些事折线图是数据趋势展示的万金油ECharts里配置折线图本质上就是在series数组里写type: line然后塞进去data数组就行。但实际做项目时x轴刻度的处理是最容易出细节问题的地方。直接看一个带x轴刻度优化的完整例子!doctype html html langzh-cn head meta charsetutf-8 titleECharts 折线图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #chart { width: 900px; height: 400px; } /style /head body div idchart/div script var chart echarts.init(document.getElementById(chart)); var dates [2025-01-01, 2025-01-02, 2025-01-03, 2025-01-04, 2025-01-05, 2025-01-06, 2025-01-07]; var values [120, 200, 150, 80, 70, 110, 130]; var option { tooltip: { trigger: axis }, xAxis: { type: category, data: dates, boundaryGap: false, axisLabel: { // x轴刻度标签旋转45度防止文字重叠 rotate: 30, // 如果数据太多可以设置显示间隔这里代表每隔2个刻度显示一个 interval: 0, formatter: function(value) { // 只显示月和日让刻度看起来更清爽 return value.slice(5); } }, axisLine: { lineStyle: { color: #333 } } }, yAxis: { type: value, splitLine: { lineStyle: { type: dashed } } }, series: [{ name: 访问量, type: line, data: values, smooth: true, symbolSize: 8, // 用面积图效果更直观去掉下面这行就是普通折线 areaStyle: { opacity: 0.15 } }] }; chart.setOption(option); /script /body /htmlx轴刻度这里有几个高频需求刻度太密导致文字挤在一起用rotate: 30旋转角度解决数据点太多显示不全用interval控制刻度显示间隔设成0表示全部显示设成2表示隔两个显示一个只想显示一部分日期信息用formatter回调函数处理刻度文本。boundaryGap: false这个属性值得单独说一下它控制的是折线起点是否从坐标系最左侧边缘开始默认是true即第一个点会往里缩进半个刻度宽度。画折线趋势图时习惯设成false让线条从边缘起笔视觉上更连贯但如果画的是柱状图反而要保留默认的true让柱子在刻度线中间这个细节很多人不注意结果图总差点意思。2.2 饼图、legend位置控制与3D效果饼图用来展示占比关系非常直观代码也不复杂。但饼图的legend图例如果你不管它默认会出现在顶部居中跟标题挨在一起经常被“挤”得很难看。实际项目里我一般会把图例放到右边用orient: vertical让它竖排。饼图示例!doctype html html langzh-cn head meta charsetutf-8 titleECharts 饼图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #pie { width: 700px; height: 450px; } /style /head body div idpie/div script var pieChart echarts.init(document.getElementById(pie)); var option { title: { text: 访问来源分布, left: center, textStyle: { fontSize: 16 } }, tooltip: { trigger: item, // 显示百分比名称 数值 占比 formatter: {b}: {c} ({d}%) }, legend: { orient: vertical, right: 10, top: middle, // 图例太多时可以用这个字段筛选但一般不用 selectedMode: true, textStyle: { fontSize: 13 } }, series: [{ name: 访问来源, type: pie, radius: [35%, 65%], // 环形饼图去掉这个字段就是实心饼图 center: [40%, 50%], itemStyle: { borderRadius: 6, borderColor: #fff, borderWidth: 2 }, label: { show: true, formatter: {b}\n{d}% }, data: [ { value: 1048, name: 搜索引擎 }, { value: 735, name: 直接访问 }, { value: 580, name: 邮件营销 }, { value: 484, name: 联盟广告 }, { value: 300, name: 视频广告 } ] }] }; pieChart.setOption(option); /script /body /html有人说ECharts原生不支持3D饼图这个说法对一半这几年双击一下文档就能发现ECharts 5.4以上的版本通过调整series里的extrude参数可以让饼图有立体挤压感但我个人实测下来兼容性还没那么稳定不建议在正式项目里依赖这个特性。更稳妥的方案是用官方的echarts-gl扩展插件把series的type写成pie3D。3D饼图的视觉效果确实炫酷但要注意加了3D之后图例的点击交互响应区域会变小用户点不准图例是常见问题。我的建议是静态展示、汇报大屏、比赛作品里可以上3D但如果是给用户做数据分析工具老老实实用2D环形图交互体验更可靠。2.3 柱状图的格式化与颜色定制柱状图是“看起来最简单、要调好也不难”的图表。最常见需求就是给不同柱子配不同颜色、在柱子顶部显示数值、以及把数值格式化成带单位的文本。直接看代码!doctype html html langzh-cn head meta charsetutf-8 titleECharts 柱状图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #bar { width: 900px; height: 450px; } /style /head body div idbar/div script var barChart echarts.init(document.getElementById(bar)); var option { tooltip: { trigger: axis, formatter: function(params) { return params[0].name br/ params[0].seriesName params[0].data 件; } }, xAxis: { type: category, data: [一月份, 二月份, 三月份, 四月份, 五月份, 六月份], axisLabel: { fontSize: 13 } }, yAxis: { type: value, name: 单位件, axisLabel: { formatter: function(value) { return value 件; } } }, series: [{ name: 月产量, type: bar, data: [1200, 1800, 1500, 2200, 1900, 2600], itemStyle: { // 用回调函数按数值大小返回不同颜色 color: function(params) { var colors [#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272]; return colors[params.dataIndex % colors.length]; }, borderRadius: [6, 6, 0, 0] }, label: { show: true, position: top, formatter: function(params) { return params.value 件; } }, // 给柱子加一点阴影 backgroundStyle: { color: rgba(220, 220, 220, 0.3), borderRadius: [6, 6, 0, 0] } }] }; barChart.setOption(option); /script /body /html这段代码里有一个非常实用的技巧itemStyle.color可以用函数来动态计算根据params.dataIndex返回不同的颜色。这样一来不需要给data数组里的每一项单独配颜色对象代码更简洁颜色循环分配也更灵活。柱状图的label.position: top让数值显示在柱顶注意如果柱子顶部数值太大或者柱子太窄标签会挤成一团这时候可以通过label.rotate让数字竖排或者直接隐藏一部分标签。backgroundStyle给柱子加一个浅色背景底座视觉上有点像竞赛排名图在数据看板里用得多。3. 进阶玩法中国地图、立体效果与大屏布局3.1 中国地图怎么做从注册GeoJSON到markPoint标记点ECharts做中国地图是很多人一上手就想搞的但也是相对容易卡住的地方。跟折线图、饼图不一样地图需要先有地理轮廓数据——也就是GeoJSON。ECharts自5.0之后不再内置中国地图数据所以一定要通过echarts.registerMap把地图数据注册进去才能正常渲染。另一个关键问题是地图数据从哪找。我实测比较省心的做法是用阿里DataV的地理数据服务直接请求GeoJSON文件请求成功后再注册。示例代码如下!doctype html html langzh-cn head meta charsetutf-8 titleECharts 中国地图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #mapChart { width: 900px; height: 600px; } /style /head body div idmapChart/div script // 通过 fetch 获取 GeoJSON 地图数据 fetch(https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json) .then(function(response) { return response.json(); }) .then(function(chinaJson) { // 注册地图取名为 china echarts.registerMap(china, chinaJson); var mapChart echarts.init(document.getElementById(mapChart)); var option { title: { text: 各省销售分布与重点城市标记, left: center }, tooltip: { trigger: item, formatter: function(params) { if (params.data) { return params.name br/销售额 (params.value || 0) 万元; } return params.name; } }, visualMap: { min: 0, max: 1000, left: 20, bottom: 20, text: [高, 低], inRange: { colors: [#e0f3f8, #abd9e9, #74add1, #4575b4] } }, series: [{ name: 销售额, type: map, map: china, roam: true, emphasis: { label: { show: true } }, data: [ { name: 广东省, value: 980 }, { name: 江苏省, value: 850 }, { name: 浙江省, value: 760 }, { name: 山东省, value: 640 }, { name: 四川省, value: 420 }, { name: 北京市, value: 880 }, { name: 上海市, value: 800 } ], // markPoint 用于在地图上打点标记 markPoint: { symbol: pin, symbolSize: 40, label: { show: true, formatter: {b} }, data: [ { name: 广州, coord: [113.26, 23.13], value: 980 }, { name: 南京, coord: [118.78, 32.04], value: 850 }, { name: 成都, coord: [104.06, 30.67], value: 420 } ] } }] }; mapChart.setOption(option); }); /script /body /html代码里的markPoint就是热搜词里说的“map里的markpoint”用于在地图上的具体经纬度坐标位置打点标记。coord数组里放的是经纬度这个顺序千万别搞反先经度后纬度。symbol: pin会画出一个图钉形状如果数据点很多建议把symbolSize调小一点否则点会叠成一团。roam: true允许用户通过鼠标滚轮缩放地图、拖拽移动在大屏展示的时候这个交互特性很加分。3.2 地图立体效果怎么做才不花冤枉力气网上搜“echarts地图立体效果”会出来很多教程教你怎么调visualMap、怎么叠加bar3D、怎么用geo3D。这里我把我的经验一次性说清楚如果是二维地图想要“立体感”用visualMap配合从浅到深的渐变色系就能在视觉上形成高低起伏的层次感这个方案零成本、兼容性最好绝大多数业务场景完全够用。如果你想要真正意义上的3D地图比如省份像积木一样立起来那种效果一般不是地图组件做的而是用echarts-gl的map3D组件原理是把地图的GeoJSON拉伸挤出高度配合光照和视角旋转做出真正的立体地形感。echarts-gl的引入方式和ECharts略有不同需要额外加载一个JS文件script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts-gl2/dist/echarts-gl.min.js/script用map3D做立体地图的配置思路跟普通地图差异比较大它走的是series: [{ type: map3D }]这条路通过regionHeight控制省份拔高的高度通过environment、light控制环境光照和阴影。据我实测map3D虽然演示效果惊艳但有几个短板地图数据量大时帧率不稳定低配电脑容易卡顿省份名称标签的位置在旋转视角时会出现偏移鼠标拖拽旋转操作在触屏设备上手感不好。所以做数据大屏时一般是大标题展示、指挥中心那种大屏幕用3D普通PC端网页还是用二维地图配上色阶更实在。3.3 数据可视化大屏从单图表到整页布局聊到“ECharts数据可视化大屏”这是近两年前端招聘JD和外包项目里出现频率极高的词。我在梳理热搜词的时候也看到echarts数据可视化大屏和echarts地图立体效果连续出现说明这是当前一个比较集中的需求点。大屏的本质其实就是在一个深色背景的页面上同时放多个图表中间一个主图通常是地图或大号的折线图四周环绕辅助图表。布局上用CSS的flex或者grid就可以实现关键是每个图表都要有独立的div容器和独立的echarts.init实例。大屏的配色非常关键深蓝、深灰、黑色系的背景配合霓虹色系的图表容易出高级感。实际操作中有一个统一主题色的技巧在setOption之前先用echarts.init的第二个参数传入主题名比如echarts.init(dom, dark)ECharts内置了dark主题背景、坐标轴、tooltip都会自动适配暗色风格。在此基础上再针对每个图表单独微调color数组就能快速做出风格统一的大屏页面。大屏的另一个关键技术点是自适应。项目方总是希望大屏在会议室的大电视上显示但开发的时候用的是笔记本分辨率差好几倍。我常用的方案有两个一是监听window.resize事件调用chart.resize()方法让图表跟随容器尺寸变化window.addEventListener(resize, function() { mapChart.resize(); pieChart.resize(); barChart.resize(); });二是在大屏最外层用transform: scale()做整体缩放根据当前浏览器窗口宽度计算缩放比例保证设计稿1600x900的分辨率在任何屏幕上都不变形。这个方法做活动页面和大屏特别实用不用每个图表单独适配。有做大屏需求的朋友这两个方案都值得收藏。4. 常见坑与排查基本都在这里了4.1 页面打开一片空白问题出在哪儿图表没渲染出来是初学者遇到最多的问题。根据我的经验按照优先级排查下面四个地方基本能解决九成问题。第一检查容器宽度和高度div的宽高没设、或者父级元素本身就是自适应高度塌陷图表渲染区域为0自然什么都看不到。可以用F12打开开发者工具看看那个div的实际尺寸。第二检查JS报错如果echarts对象找不到说明CDN链接加载失败或者网络被拦截换一个CDN源试试。第三检查初始化脚本的位置脚本写在div之前会导致getElementById拿不到元素把脚本放在body末尾最稳妥。第四检查setOption的语法常见的坑是选项对象里多写了逗号、或者data数组元素个数和xAxis.data不一致虽然ECharts大多数情况下不报错但是图表会渲染成意想不到的样子。4.2 x轴刻度重叠与legend消失都是配置项在捣乱x轴刻度重叠是频率最高的问题特别是一次性塞进去几十个分类数据的时候。解决方案有几种旋转标签axisLabel.rotate: 45、隐藏部分标签axisLabel.interval: 2、开启axisLabel.hideOverlap: true让ECharts自动隐藏重叠标签或者把xAxis的type改成time让ECharts自动计算合适的刻度密度。实际项目中我一般组合使用先设hideOverlap: true再视情况加rotate效果已经很理想。legend消失或者显示不全是另一个高频问题。常见的触发原因有三个series里没有设置name图例会找不到对应的系列名饼图的legend.data里写的名称和series.data里的name不匹配图例有筛选功能不匹配的项会被隐藏图例位置超出可视区域比如设置了right: -10这种负值图例被容器边缘裁掉了。排查思路很简单把legend相关的配置先全部注释掉用默认配置看是否能显示能显示就是配置项的问题逐个恢复配置项、刷新页面就能锁定问题所在。4.3 在Vue、C#、PyQt5里用ECharts本质都是同一套东西热搜词里能看到vue3 echarts、c# echarts、pyqt5显示html这也说明ECharts的应用范围早就超出了纯HTML页面。涉及不同技术栈的整合时我的核心建议是不管外层技术是什么ECharts永远是运行在浏览器渲染环境里的Vue和React里通过ref拿到DOM节点再echarts.initC#的WinForm或WPF里用WebView控件加载HTML页面PyQt5里用QWebEngineView加载本地HTML文件本质都是把HTML作为图表载体。最关键的一点是确保在合适的生命周期节点去初始化图表——比如Vue里要在onMounted钩子里初始化否则DOM还没渲染完成。组件或页面销毁时记得调用chart.dispose()释放实例避免内存泄漏。5. 从“复制即用”走向“完全掌控”5.1 数据动态更新别再用setOption覆盖一切很多人在学会setOption之后就习惯性地每次数据变化都用setOption重新赋一整个新对象。在数据量小的时候问题不大但一旦图表数据是后端接口定时推送的这种写法会带来性能浪费。ECharts的setOption本身是支持“增量更新”的你只需要把变化的这部分数据传进去ECharts会自动做合并其他配置保持不变。比如只更新series[0].data就这么写// 后端返回了新的数组 newData myChart.setOption({ series: [{ data: newData }] });关键还要搭配notMerge参数来理解setOption的第二个参数默认是false表示合并如果你希望完全替换成新配置就传true也就是setOption(option, true)。动态更新场景下不要动notMerge保持默认合并模式配合animation: false关闭过渡动画一秒更新十次数据都没压力。5.2 主题定制让图表不撞脸又省时间默认的ECharts图表风格其实已经很耐看了但如果你做的是品牌官网或者客户定制项目图表要和整体设计风格统一。ECharts的主题定制有两层玩法第一层是直接配置color数组按顺序给不同系列分配颜色、textStyle设置所有文字的字体和颜色、tooltip的backgroundColor、borderRadius等第二层是用官方提供的主题编辑器在线生成主题JSON文件生成后通过echarts.registerTheme(myTheme, themeObject)注册初始化时作为第二个参数传入。主题的好处是一次定制整个项目所有图表通用改起来也方便。个人经验主题一次性做深色和浅色两套应对大屏和普通页面两个场景基本就够用了。5.3 从复制到发布项目化之前先想清楚这几件事既然文章标题是“复制即可使用”这里也不回避一个现实问题复制能解决“快”但解决不了“长久”。如果图表只是临时用用、汇报展示一下直接复制本文中的代码完全够用。但如果你要做的是一个持续迭代的前端项目还有几件事值得提前规划数据请求要封装成统一的函数不要把接口地址硬编码在页面里多个图表实例要集中管理方便统一resize和dispose后端给的原始数据要先做清洗和格式化再传给setOption移动端要考虑触摸交互必要时给图表容器加横向滚动的能力。这几件小事在初期就打好基础后期能省下大量填坑时间。回到我自己的经验我做ECharts以来最深的一个体会是“配置项别背会用查就行”。ECharts的配置项有上千个没有人能全部记下来连官方文档自己都做了模糊搜索功能。真正重要的核心概念就那么几个series决定图表类型和数据、xAxis和yAxis决定坐标系、legend控制图例、tooltip控制提示框、visualMap控制视觉编码把这条主线和setOption的合并更新机制搞明白剩下的细节都可以随时查文档解决。有一次我为了给折线图的每个数据点单独设置不同的颜色查了一下午文档最后发现就是给data数组里每个元素写成{ value: xxx, itemStyle: { color: #ff0000 } }这么简单——这就是为什么我一直建议收藏官方示例而不是依赖搜索引擎官网的示例代码稍加修改就是一个能跑的真实项目原型。 
ECharts这个库说句实话是我目前用过的上手门槛最低、出效果最快的数据可视化方案没有之一。只要会写HTML哪怕JS只懂一点皮毛也能在五分钟内搞出一张能直接扔进汇报PPT里的图表。项目标题写得很实在——“复制即可使用”这正是ECharts最厚道的地方通过CDN引一个JS文件所有图表全靠配置项驱动不用自己画坐标轴不用算刻度间距更不用操心canvas底层那一堆东西。这篇文章我就从实际使用的角度把从零到一怎么搭出一个能用的ECharts页面、几个高频图表的完整代码、地图和大屏玩法以及我踩过的一些坑全部摊开来讲。适合谁来参考刚接触前端、想把数据画成图表的同学需要快速做可视化demo的开发者还有那些被业务方追着要“可视化大屏”但前端基础一般的朋友。文章里的代码都是完整可运行的复制到一个HTML文件里就能看效果。1. 先把最基础的HTMLECharts骨架搭起来1.1 为什么非要用HTML而不是直接写JS文件很多初学者会有个疑问ECharts不是个JS库吗那我直接建一个.js文件引入不就行了实际上ECharts的所有渲染工作都得依托于浏览器环境它要操作DOM节点、要用canvas或SVG去绘制图形这些能力只有浏览器内核才提供。HTML文件在这里的角色就是给ECharts提供一个“画板”和一个“运行环境”。所以最简单的形式就是一个.html文件里面写上基础的文档结构、引入ECharts的CDN链接、放一个指定了宽高的div容器然后写一小段初始化脚本。不需要安装Node.js不需要下载npm包不需要webpack打包——对大多数只想“快速出图”的场景来说这一套已经绰绰有余。就算以后要上Vue、ReactECharts的配置项体系也是完全通用的现在花时间学会的东西到那时候照样能用。1.2 一个完整到可以直接复制的HTML模板我这里直接给出一个最小可用的ECharts页面模板从字符编码到容器样式到图表初始化一次到位!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleECharts 复制即用模板/title !-- 引入 ECharts 5.x 的 CDN 文件 -- script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style /* 图表容器必须有明确的宽高否则图表显示不出来 */ #main { width: 800px; height: 500px; margin: 0 auto; border: 1px solid #eee; } /style /head body !-- 放图表的容器 div -- div idmain/div script // 基于准备好的dom初始化echarts实例 var myChart echarts.init(document.getElementById(main)); // 指定图表的配置项和数据 var option { title: { text: 一个最简单的柱状图 }, tooltip: {}, xAxis: { data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子] }, yAxis: {}, series: [{ name: 销量, type: bar, data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); /script /body /html这里有几个关键点必须强调一下第一meta charsetutf-8绝对不能省否则中文字符在部分浏览器下会乱码图表标题变成一堆问号是很尴尬的事。第二容器div必须有明确的宽高很多人复制完代码发现页面空白九成是忘了给容器设尺寸。第三初始化脚本要放在容器后面或者用window.onload包起来确保脚本执行时可以拿到DOM节点。文件建好后用浏览器直接打开就能看到效果。如果是用Visual Studio Code写代码可以装一个Live Server插件右键选择“Open with Live Server”好处是修改代码保存后浏览器自动刷新不用每次手动点刷新按钮实测在调图表配置时能节省大量时间。2. 三个高频图表折线、饼图、柱状复制就能跑2.1 折线图与x轴刻度的那些事折线图是数据趋势展示的万金油ECharts里配置折线图本质上就是在series数组里写type: line然后塞进去data数组就行。但实际做项目时x轴刻度的处理是最容易出细节问题的地方。直接看一个带x轴刻度优化的完整例子!doctype html html langzh-cn head meta charsetutf-8 titleECharts 折线图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #chart { width: 900px; height: 400px; } /style /head body div idchart/div script var chart echarts.init(document.getElementById(chart)); var dates [2025-01-01, 2025-01-02, 2025-01-03, 2025-01-04, 2025-01-05, 2025-01-06, 2025-01-07]; var values [120, 200, 150, 80, 70, 110, 130]; var option { tooltip: { trigger: axis }, xAxis: { type: category, data: dates, boundaryGap: false, axisLabel: { // x轴刻度标签旋转45度防止文字重叠 rotate: 30, // 如果数据太多可以设置显示间隔这里代表每隔2个刻度显示一个 interval: 0, formatter: function(value) { // 只显示月和日让刻度看起来更清爽 return value.slice(5); } }, axisLine: { lineStyle: { color: #333 } } }, yAxis: { type: value, splitLine: { lineStyle: { type: dashed } } }, series: [{ name: 访问量, type: line, data: values, smooth: true, symbolSize: 8, // 用面积图效果更直观去掉下面这行就是普通折线 areaStyle: { opacity: 0.15 } }] }; chart.setOption(option); /script /body /htmlx轴刻度这里有几个高频需求刻度太密导致文字挤在一起用rotate: 30旋转角度解决数据点太多显示不全用interval控制刻度显示间隔设成0表示全部显示设成2表示隔两个显示一个只想显示一部分日期信息用formatter回调函数处理刻度文本。boundaryGap: false这个属性值得单独说一下它控制的是折线起点是否从坐标系最左侧边缘开始默认是true即第一个点会往里缩进半个刻度宽度。画折线趋势图时习惯设成false让线条从边缘起笔视觉上更连贯但如果画的是柱状图反而要保留默认的true让柱子在刻度线中间这个细节很多人不注意结果图总差点意思。2.2 饼图、legend位置控制与3D效果饼图用来展示占比关系非常直观代码也不复杂。但饼图的legend图例如果你不管它默认会出现在顶部居中跟标题挨在一起经常被“挤”得很难看。实际项目里我一般会把图例放到右边用orient: vertical让它竖排。饼图示例!doctype html html langzh-cn head meta charsetutf-8 titleECharts 饼图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #pie { width: 700px; height: 450px; } /style /head body div idpie/div script var pieChart echarts.init(document.getElementById(pie)); var option { title: { text: 访问来源分布, left: center, textStyle: { fontSize: 16 } }, tooltip: { trigger: item, // 显示百分比名称 数值 占比 formatter: {b}: {c} ({d}%) }, legend: { orient: vertical, right: 10, top: middle, // 图例太多时可以用这个字段筛选但一般不用 selectedMode: true, textStyle: { fontSize: 13 } }, series: [{ name: 访问来源, type: pie, radius: [35%, 65%], // 环形饼图去掉这个字段就是实心饼图 center: [40%, 50%], itemStyle: { borderRadius: 6, borderColor: #fff, borderWidth: 2 }, label: { show: true, formatter: {b}\n{d}% }, data: [ { value: 1048, name: 搜索引擎 }, { value: 735, name: 直接访问 }, { value: 580, name: 邮件营销 }, { value: 484, name: 联盟广告 }, { value: 300, name: 视频广告 } ] }] }; pieChart.setOption(option); /script /body /html有人说ECharts原生不支持3D饼图这个说法对一半这几年双击一下文档就能发现ECharts 5.4以上的版本通过调整series里的extrude参数可以让饼图有立体挤压感但我个人实测下来兼容性还没那么稳定不建议在正式项目里依赖这个特性。更稳妥的方案是用官方的echarts-gl扩展插件把series的type写成pie3D。3D饼图的视觉效果确实炫酷但要注意加了3D之后图例的点击交互响应区域会变小用户点不准图例是常见问题。我的建议是静态展示、汇报大屏、比赛作品里可以上3D但如果是给用户做数据分析工具老老实实用2D环形图交互体验更可靠。2.3 柱状图的格式化与颜色定制柱状图是“看起来最简单、要调好也不难”的图表。最常见需求就是给不同柱子配不同颜色、在柱子顶部显示数值、以及把数值格式化成带单位的文本。直接看代码!doctype html html langzh-cn head meta charsetutf-8 titleECharts 柱状图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #bar { width: 900px; height: 450px; } /style /head body div idbar/div script var barChart echarts.init(document.getElementById(bar)); var option { tooltip: { trigger: axis, formatter: function(params) { return params[0].name br/ params[0].seriesName params[0].data 件; } }, xAxis: { type: category, data: [一月份, 二月份, 三月份, 四月份, 五月份, 六月份], axisLabel: { fontSize: 13 } }, yAxis: { type: value, name: 单位件, axisLabel: { formatter: function(value) { return value 件; } } }, series: [{ name: 月产量, type: bar, data: [1200, 1800, 1500, 2200, 1900, 2600], itemStyle: { // 用回调函数按数值大小返回不同颜色 color: function(params) { var colors [#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272]; return colors[params.dataIndex % colors.length]; }, borderRadius: [6, 6, 0, 0] }, label: { show: true, position: top, formatter: function(params) { return params.value 件; } }, // 给柱子加一点阴影 backgroundStyle: { color: rgba(220, 220, 220, 0.3), borderRadius: [6, 6, 0, 0] } }] }; barChart.setOption(option); /script /body /html这段代码里有一个非常实用的技巧itemStyle.color可以用函数来动态计算根据params.dataIndex返回不同的颜色。这样一来不需要给data数组里的每一项单独配颜色对象代码更简洁颜色循环分配也更灵活。柱状图的label.position: top让数值显示在柱顶注意如果柱子顶部数值太大或者柱子太窄标签会挤成一团这时候可以通过label.rotate让数字竖排或者直接隐藏一部分标签。backgroundStyle给柱子加一个浅色背景底座视觉上有点像竞赛排名图在数据看板里用得多。3. 进阶玩法中国地图、立体效果与大屏布局3.1 中国地图怎么做从注册GeoJSON到markPoint标记点ECharts做中国地图是很多人一上手就想搞的但也是相对容易卡住的地方。跟折线图、饼图不一样地图需要先有地理轮廓数据——也就是GeoJSON。ECharts自5.0之后不再内置中国地图数据所以一定要通过echarts.registerMap把地图数据注册进去才能正常渲染。另一个关键问题是地图数据从哪找。我实测比较省心的做法是用阿里DataV的地理数据服务直接请求GeoJSON文件请求成功后再注册。示例代码如下!doctype html html langzh-cn head meta charsetutf-8 titleECharts 中国地图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #mapChart { width: 900px; height: 600px; } /style /head body div idmapChart/div script // 通过 fetch 获取 GeoJSON 地图数据 fetch(https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json) .then(function(response) { return response.json(); }) .then(function(chinaJson) { // 注册地图取名为 china echarts.registerMap(china, chinaJson); var mapChart echarts.init(document.getElementById(mapChart)); var option { title: { text: 各省销售分布与重点城市标记, left: center }, tooltip: { trigger: item, formatter: function(params) { if (params.data) { return params.name br/销售额 (params.value || 0) 万元; } return params.name; } }, visualMap: { min: 0, max: 1000, left: 20, bottom: 20, text: [高, 低], inRange: { colors: [#e0f3f8, #abd9e9, #74add1, #4575b4] } }, series: [{ name: 销售额, type: map, map: china, roam: true, emphasis: { label: { show: true } }, data: [ { name: 广东省, value: 980 }, { name: 江苏省, value: 850 }, { name: 浙江省, value: 760 }, { name: 山东省, value: 640 }, { name: 四川省, value: 420 }, { name: 北京市, value: 880 }, { name: 上海市, value: 800 } ], // markPoint 用于在地图上打点标记 markPoint: { symbol: pin, symbolSize: 40, label: { show: true, formatter: {b} }, data: [ { name: 广州, coord: [113.26, 23.13], value: 980 }, { name: 南京, coord: [118.78, 32.04], value: 850 }, { name: 成都, coord: [104.06, 30.67], value: 420 } ] } }] }; mapChart.setOption(option); }); /script /body /html代码里的markPoint就是热搜词里说的“map里的markpoint”用于在地图上的具体经纬度坐标位置打点标记。coord数组里放的是经纬度这个顺序千万别搞反先经度后纬度。symbol: pin会画出一个图钉形状如果数据点很多建议把symbolSize调小一点否则点会叠成一团。roam: true允许用户通过鼠标滚轮缩放地图、拖拽移动在大屏展示的时候这个交互特性很加分。3.2 地图立体效果怎么做才不花冤枉力气网上搜“echarts地图立体效果”会出来很多教程教你怎么调visualMap、怎么叠加bar3D、怎么用geo3D。这里我把我的经验一次性说清楚如果是二维地图想要“立体感”用visualMap配合从浅到深的渐变色系就能在视觉上形成高低起伏的层次感这个方案零成本、兼容性最好绝大多数业务场景完全够用。如果你想要真正意义上的3D地图比如省份像积木一样立起来那种效果一般不是地图组件做的而是用echarts-gl的map3D组件原理是把地图的GeoJSON拉伸挤出高度配合光照和视角旋转做出真正的立体地形感。echarts-gl的引入方式和ECharts略有不同需要额外加载一个JS文件script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts-gl2/dist/echarts-gl.min.js/script用map3D做立体地图的配置思路跟普通地图差异比较大它走的是series: [{ type: map3D }]这条路通过regionHeight控制省份拔高的高度通过environment、light控制环境光照和阴影。据我实测map3D虽然演示效果惊艳但有几个短板地图数据量大时帧率不稳定低配电脑容易卡顿省份名称标签的位置在旋转视角时会出现偏移鼠标拖拽旋转操作在触屏设备上手感不好。所以做数据大屏时一般是大标题展示、指挥中心那种大屏幕用3D普通PC端网页还是用二维地图配上色阶更实在。3.3 数据可视化大屏从单图表到整页布局聊到“ECharts数据可视化大屏”这是近两年前端招聘JD和外包项目里出现频率极高的词。我在梳理热搜词的时候也看到echarts数据可视化大屏和echarts地图立体效果连续出现说明这是当前一个比较集中的需求点。大屏的本质其实就是在一个深色背景的页面上同时放多个图表中间一个主图通常是地图或大号的折线图四周环绕辅助图表。布局上用CSS的flex或者grid就可以实现关键是每个图表都要有独立的div容器和独立的echarts.init实例。大屏的配色非常关键深蓝、深灰、黑色系的背景配合霓虹色系的图表容易出高级感。实际操作中有一个统一主题色的技巧在setOption之前先用echarts.init的第二个参数传入主题名比如echarts.init(dom, dark)ECharts内置了dark主题背景、坐标轴、tooltip都会自动适配暗色风格。在此基础上再针对每个图表单独微调color数组就能快速做出风格统一的大屏页面。大屏的另一个关键技术点是自适应。项目方总是希望大屏在会议室的大电视上显示但开发的时候用的是笔记本分辨率差好几倍。我常用的方案有两个一是监听window.resize事件调用chart.resize()方法让图表跟随容器尺寸变化window.addEventListener(resize, function() { mapChart.resize(); pieChart.resize(); barChart.resize(); });二是在大屏最外层用transform: scale()做整体缩放根据当前浏览器窗口宽度计算缩放比例保证设计稿1600x900的分辨率在任何屏幕上都不变形。这个方法做活动页面和大屏特别实用不用每个图表单独适配。有做大屏需求的朋友这两个方案都值得收藏。4. 常见坑与排查基本都在这里了4.1 页面打开一片空白问题出在哪儿图表没渲染出来是初学者遇到最多的问题。根据我的经验按照优先级排查下面四个地方基本能解决九成问题。第一检查容器宽度和高度div的宽高没设、或者父级元素本身就是自适应高度塌陷图表渲染区域为0自然什么都看不到。可以用F12打开开发者工具看看那个div的实际尺寸。第二检查JS报错如果echarts对象找不到说明CDN链接加载失败或者网络被拦截换一个CDN源试试。第三检查初始化脚本的位置脚本写在div之前会导致getElementById拿不到元素把脚本放在body末尾最稳妥。第四检查setOption的语法常见的坑是选项对象里多写了逗号、或者data数组元素个数和xAxis.data不一致虽然ECharts大多数情况下不报错但是图表会渲染成意想不到的样子。4.2 x轴刻度重叠与legend消失都是配置项在捣乱x轴刻度重叠是频率最高的问题特别是一次性塞进去几十个分类数据的时候。解决方案有几种旋转标签axisLabel.rotate: 45、隐藏部分标签axisLabel.interval: 2、开启axisLabel.hideOverlap: true让ECharts自动隐藏重叠标签或者把xAxis的type改成time让ECharts自动计算合适的刻度密度。实际项目中我一般组合使用先设hideOverlap: true再视情况加rotate效果已经很理想。legend消失或者显示不全是另一个高频问题。常见的触发原因有三个series里没有设置name图例会找不到对应的系列名饼图的legend.data里写的名称和series.data里的name不匹配图例有筛选功能不匹配的项会被隐藏图例位置超出可视区域比如设置了right: -10这种负值图例被容器边缘裁掉了。排查思路很简单把legend相关的配置先全部注释掉用默认配置看是否能显示能显示就是配置项的问题逐个恢复配置项、刷新页面就能锁定问题所在。4.3 在Vue、C#、PyQt5里用ECharts本质都是同一套东西热搜词里能看到vue3 echarts、c# echarts、pyqt5显示html这也说明ECharts的应用范围早就超出了纯HTML页面。涉及不同技术栈的整合时我的核心建议是不管外层技术是什么ECharts永远是运行在浏览器渲染环境里的Vue和React里通过ref拿到DOM节点再echarts.initC#的WinForm或WPF里用WebView控件加载HTML页面PyQt5里用QWebEngineView加载本地HTML文件本质都是把HTML作为图表载体。最关键的一点是确保在合适的生命周期节点去初始化图表——比如Vue里要在onMounted钩子里初始化否则DOM还没渲染完成。组件或页面销毁时记得调用chart.dispose()释放实例避免内存泄漏。5. 从“复制即用”走向“完全掌控”5.1 数据动态更新别再用setOption覆盖一切很多人在学会setOption之后就习惯性地每次数据变化都用setOption重新赋一整个新对象。在数据量小的时候问题不大但一旦图表数据是后端接口定时推送的这种写法会带来性能浪费。ECharts的setOption本身是支持“增量更新”的你只需要把变化的这部分数据传进去ECharts会自动做合并其他配置保持不变。比如只更新series[0].data就这么写// 后端返回了新的数组 newData myChart.setOption({ series: [{ data: newData }] });关键还要搭配notMerge参数来理解setOption的第二个参数默认是false表示合并如果你希望完全替换成新配置就传true也就是setOption(option, true)。动态更新场景下不要动notMerge保持默认合并模式配合animation: false关闭过渡动画一秒更新十次数据都没压力。5.2 主题定制让图表不撞脸又省时间默认的ECharts图表风格其实已经很耐看了但如果你做的是品牌官网或者客户定制项目图表要和整体设计风格统一。ECharts的主题定制有两层玩法第一层是直接配置color数组按顺序给不同系列分配颜色、textStyle设置所有文字的字体和颜色、tooltip的backgroundColor、borderRadius等第二层是用官方提供的主题编辑器在线生成主题JSON文件生成后通过echarts.registerTheme(myTheme, themeObject)注册初始化时作为第二个参数传入。主题的好处是一次定制整个项目所有图表通用改起来也方便。个人经验主题一次性做深色和浅色两套应对大屏和普通页面两个场景基本就够用了。5.3 从复制到发布项目化之前先想清楚这几件事既然文章标题是“复制即可使用”这里也不回避一个现实问题复制能解决“快”但解决不了“长久”。如果图表只是临时用用、汇报展示一下直接复制本文中的代码完全够用。但如果你要做的是一个持续迭代的前端项目还有几件事值得提前规划数据请求要封装成统一的函数不要把接口地址硬编码在页面里多个图表实例要集中管理方便统一resize和dispose后端给的原始数据要先做清洗和格式化再传给setOption移动端要考虑触摸交互必要时给图表容器加横向滚动的能力。这几件小事在初期就打好基础后期能省下大量填坑时间。回到我自己的经验我做ECharts以来最深的一个体会是“配置项别背会用查就行”。ECharts的配置项有上千个没有人能全部记下来连官方文档自己都做了模糊搜索功能。真正重要的核心概念就那么几个series决定图表类型和数据、xAxis和yAxis决定坐标系、legend控制图例、tooltip控制提示框、visualMap控制视觉编码把这条主线和setOption的合并更新机制搞明白剩下的细节都可以随时查文档解决。有一次我为了给折线图的每个数据点单独设置不同的颜色查了一下午文档最后发现就是给data数组里每个元素写成{ value: xxx, itemStyle: { color: #ff0000 } }这么简单——这就是为什么我一直建议收藏官方示例而不是依赖搜索引擎官网的示例代码稍加修改就是一个能跑的真实项目原型。