简介本资源面向前端开发者、数据可视化初学者及大屏项目实践者提供一套开箱即用的ECharts图表学习与实战方案解决图表选型难、配置复杂、大屏搭建无从下手等常见痛点。压缩包共49个文件2.91MB含21个可直接运行的HTML示例页、17个结构清晰的JS配置脚本含详细注释、6张配套PNG图表素材以及CSS样式、字体ttf和动态GIF等辅助资源覆盖网页嵌入、响应式适配与主题定制需求。已有48510人学习下载热度持续走高。资源包含18种高频可视化图表案例如旭日图、桑基图、K线图、中国/世界地图、动态仪表盘等全部代码逐行注释另附3套完整大屏模板含新冠疫情数据大屏等支持快速替换数据源与调整CSS样式兼顾教学理解与工程复用。1. 开篇为什么Echarts成了可视化大屏的默认选择做数据可视化的朋友应该都有体会每次接到大屏需求脑子里第一个蹦出来的基本都是Echarts。这玩意儿在业内确实普及到了近乎默认选项的程度GitHub上几十万的star文档齐全社区活跃遇到问题搜一下基本都有答案。我最早接触Echarts还是2.x时代那时候还要用flash渲染后来3.0全面转向canvas再到现在的5.x版本功能越来越完善性能也一直在提升。很多人问我市面上可视化库那么多D3、Highcharts、AntV G2为什么偏偏选Echarts我的回答很简单性价比。D3灵活但上手成本极高一个简单的柱状图能写半天Highcharts功能强但商用要授权费AntV的G2语法更函数式思维转换有门槛。Echarts走的是配置项路线一个option对象搞定一切既有开箱即用的便利又有足够的自定义空间。加上百度团队持续维护中文文档质量高生态也完整——地图数据、词云、关系图这些都内置支持做数据可视化大屏模板的时候Echarts确实是最省心的选择。这篇文章不是什么入门教程而是基于我这些年用Echarts做数据可视化图表案例和大屏项目的经验沉淀。我会从核心图表、大屏模板布局思路、高频功能实战、常见问题排查几个维度展开把那些文档里写得不清楚、但实际开发中一定会遇到的细节一次性讲透。如果你正准备用Echarts做可视化项目或者已经在做但经常被各种配置项和细节卡住这篇文章应该能帮你少走不少弯路。我不会按官方API的顺序平铺直叙而是按实际项目推进的路径来写——从最常用的图表类型说起再讲大屏模板怎么搭最后是那些高频但容易踩坑的功能点。每个部分都会配上实际案例和关键代码方便你直接参考甚至抄作业。2. 核心图表案例拆解饼图、折线图、柱状图、地图2.1 饼图别把数据堆成彩虹Echarts饼图看起来简单但真正做得好看的并不多。我见过太多大屏上的饼图五六个扇区挤在一起颜色五颜六色标签互相遮挡根本看不清每块占比是多少。饼图的本质是展示部分与整体的关系所以设计的第一原则是克制——扇区不要过多超过5个建议合并其他颜色不要过花用同一色系的深浅渐变最舒服。实际项目中我最常用的饼图配置有几个关键点option { tooltip: { trigger: item, formatter: {b}: {c} ({d}%) }, series: [{ type: pie, radius: [40%, 70%], avoidLabelOverlap: true, itemStyle: { borderRadius: 6, borderColor: #fff, borderWidth: 2 }, label: { show: true, formatter: {b}\n{d}%, fontSize: 12 }, emphasis: { scaleSize: 8 }, data: [ { value: 1048, name: 搜索引擎 }, { value: 735, name: 直接访问 }, { value: 580, name: 邮件营销 } ] }] };这里有几个细节值得单独说环形饼图比实心饼图更耐看。radius设置成[40%, 70%]就是内半径40%、外半径70%的环形中间空出来的区域可以放总计数值或者核心指标卡片。这个方法在数据可视化大屏模板里尤其常用因为环形中间那个数字往往就是领导最关注的KPI。标签引导线要克制。avoidLabelOverlap: true是防止标签重叠的关键配置尤其在扇区比较小的时候。我建议标签统一放在外部直接把名称和百分比拼在一起格式化输出省得再开一个legend视觉上更干净。别忘了emphasis配置。它是鼠标悬停时的高亮效果scaleSize控制扇区外扩的幅度。这个细节很多人忽略但正是这种交互反馈让大屏显得活。踩过的一个坑是当某个数据为0时饼图会渲染出一个非常细的扇区视觉上像是渲染异常。排查半天发现是后端数据源里混入了0值。解决办法很简单在前端过滤掉value 0的数据或者让后端处理。2.2 折线图平滑、面积、双Y轴的细节处理折线图在数据可视化大屏模板里通常是趋势展示的核心比如实时监控曲线、销售走势、流量变化等。Echarts折线图的基础用法很简单但要做得好有几个配置值得深入研究。最常用的增强方案是面积图 平滑曲线option { tooltip: { trigger: axis }, grid: { left: 3%, right: 4%, bottom: 12%, containLabel: true }, xAxis: { type: category, boundaryGap: false, data: [周一, 周二, 周三, 周四, 周五, 周六, 周日] }, yAxis: { type: value, splitLine: { lineStyle: { type: dashed } } }, series: [{ name: 访问量, type: line, smooth: true, symbol: circle, symbolSize: 6, areaStyle: { opacity: 0.3 }, lineStyle: { width: 3 }, data: [820, 932, 901, 934, 1290, 1330, 1320] }] };这里boundaryGap: false是关键配置它让折线的起点和终点对齐到坐标轴的两个边界上视觉上折线会从最左延伸到最右而不是缩在中间这在展示连续时间序列时更自然。双Y轴场景是大屏项目里非常高频率的需求。比如同时展示销售额和订单量两个指标量级差异很大共用一个Y轴会导致小数值的曲线被压成一条直线。解决方式是设置两个yAxis然后让第二个系列用yAxisIndex: 1指向右侧Y轴yAxis: [ { type: value, name: 销售额(万) }, { type: value, name: 订单量, splitLine: { show: false } } ], series: [ { name: 销售额, type: line, yAxisIndex: 0, data: [...] }, { name: 订单量, type: line, yAxisIndex: 1, data: [...] } ]右侧的Y轴记得把splitLine关掉否则图里会出现两套网格线密集且干扰读数。2.3 柱状图修改锥形图实现柱状图是数据可视化里最基础的图表类型但Echarts的柱状图并非只有普通的矩形柱子。通过series.type: pictorialBar象形柱图可以实现各种形状变化锥形图就是其中一种很常见的变体。锥形图的实现方式有两种方式一直接修改原生柱状图的borderRadiusseries: [{ type: bar, data: [120, 200, 150, 80, 70], itemStyle: { borderRadius: [10, 10, 0, 0] }, barWidth: 30 }]这只能做出顶部圆角的柱子离真正的锥形还有距离。要让柱子变成上尖下宽的形状还得靠象形柱图。方式二pictorialBar实现真正的锥形图option { xAxis: { type: category, data: [A, B, C, D, E] }, yAxis: { type: value }, series: [{ type: pictorialBar, symbol: path://M0,10 L10,0 L20,10 Z, symbolSize: [100%, 100%], symbolRepeat: true, symbolPosition: start, data: [120, 200, 150, 80, 70], itemStyle: { color: #3f95ea } }] };symbol里用的是SVG path路径M0,10 L10,0 L20,10 Z这个路径画出来的就是一个三角形。通过symbolRepeat: true配合symbolSize控制三角锥的排列方式就能形成柱状效果。这个思路可以扩展到各种自定义图形——漏斗、圆柱、箭头柱等用不同的path路径就能实现。我个人做数据可视化大屏模板时还是更推荐第一种方式因为象形柱图在大量数据下渲染性能稍差而且对坐标轴的联动不如原生柱状图好。但如果你需要那种视觉冲击力强的锥形能量柱pictorialBar确实是值得学的一个武器。2.4 地图图表从全国到城市Echarts地图功能强大但也是新手最容易卡住的环节。做数据可视化大屏模板地图几乎是必选项——无论是全国营销分布、区域销售热力还是某个城市的客流分析都离不开地图。Echarts 5.x版本之后取消了内置地图数据需要通过js文件或GeoJSON引入。这意味着新手直接registerMap会报错BMap is not defined或者地图数据不存在这是最常见的第一坑。我常用的做法是到Echarts官方地图下载器或者DataV的GeoAtlas下载对应的GeoJSON数据然后通过echarts.registerMap注册// 引入重庆地图GeoJSON数据 import chongqingJson from /assets/map/chongqing.json; echarts.registerMap(chongqing, chongqingJson); option { series: [{ type: map, map: chongqing, roam: true, label: { show: true, fontSize: 10 }, data: [ { name: 渝中区, value: 200 }, { name: 江北区, value: 350 } ] }] };这里有几个细节重庆地图和全国地图的数据层级不一样。全国地图注册的是省份级别的GeoJSON如果要下钻到市级需要单独加载对应省份的子级数据。我见过不少项目只注册了全国数据就直接想展示市级地图结果渲染出来是空白的。正确做法是先注册全国地图显示省份点击省份后再动态加载该省份的市级地图并重新注册。中国地图3D底图是很多大屏项目想要的效果。这个Echarts核心库本身做不了真3D地图需要配合echarts-gl插件import echarts-gl; option { series: [{ type: map3D, map: china, shading: lambert, itemStyle: { color: #1a5c9e }, emphasis: { label: { show: true } }, regionHeight: 2 }] };regionHeight: 2控制地图的厚度/凸起高度数值越大越立体。3D地图的灯光、视角都很讲究刚上手时建议先用默认配置等熟悉了viewControl里的alpha、beta、distance三个参数再来调视角。我踩过的坑是3D地图对低性能机器的渲染压力很大在大屏项目里如果硬件不够给力建议还是用2D地图加阴影来实现立体感体验差距不会太大但性能差别明显。3. 数据可视化大屏模板的设计思路3.1 栅格化布局与大屏适配做数据可视化大屏模板最核心的问题不是图表怎么画而是布局怎么搭。大屏通常的尺寸是1920x1080但实际投屏设备五花八门——有4K的、有竖屏的、有超宽屏的。如果只是固定写死尺寸换一个屏幕就全乱了。我的做法是设计稿按1920x1080来画开发时采用等比缩放方案。CSS里用transform来统一缩放核心逻辑用一个函数计算function scaleScreen() { const designWidth 1920; const designHeight 1080; const scaleX window.innerWidth / designWidth; const scaleY window.innerHeight / designHeight; const scale Math.min(scaleX, scaleY); document.getElementById(screen).style.transform scale(${scale}); } window.addEventListener(resize, scaleScreen);这样整个大屏容器保持1920x1080的设计尺寸无论实际屏幕多大都会等比缩放到居中适配。缺点是两侧会有留白但大屏项目一般都接受留白因为投屏设备和显示器往往不会正好是16:9。布局层面我习惯把大屏分成三个纵向区块左侧放指标数据卡和条状图中间放核心地图或主图表右侧放趋势图和排行榜。这样符合人的视觉习惯核心信息在中间最显眼的位置。每个区块之间留出至少20px的间距用统一的深色背景和细边框包裹形成模块感。3.2 大屏配色与风格大屏的高级感很大程度上取决于配色。Echarts默认的主题色偏亮、偏花直接用在大屏上会显得不搭。我总结了几套常用的深色大屏配色方案风格主色辅助色适合场景科技蓝#0e2a47#1e90ff、#00d8ff政务、智慧城市、IoT监控炫酷紫#1a0a2e#8a2be2、#da70d6数据大屏、营销活动商务金#1a1a1a#d4af37、#ffd700金融、企业驾驶舱生态绿#0a2e1a#32cd32、#7fff00环保、农业主题色建议通过Echarts的color配置直接设置option { color: [#1e90ff, #00d8ff, #ffd700, #ff6347, #7fff00] };想让背景半透明网格线更低调就设置splitLine.lineStyle.color为低透明度的白色而不是纯黑或纯白。3.3 数据接入与刷新策略大屏项目几乎都是实时或准实时数据。Echarts本身不关心数据从哪来它只负责渲染option。实际项目中我一般用WebSocket接收实时数据用setInterval做轮询兜底。每次数据更新不需要整个setOption重新渲染只需更新对应系列的data// 只更新series中第一个图表的data myChart.setOption({ series: [{ data: newData }] });注意不传notMerge参数时Echarts默认是merge模式相同配置项会保留不同项更新。但如果你改了数据结构强烈建议用myChart.setOption(option, true)强制全量替换避免旧配置残留导致渲染异常。还有一个细节图表销毁与重建。大屏页面往往是单页多个图表Tab切换时如果直接隐藏而不是销毁Echarts在隐藏容器内会停止动画重新显示时动画卡顿。我一般会做手动管理// Tab切换时 oldChart.dispose(); // 销毁 newChart echarts.init(container); // 重建4. 高频功能实战DataZoom、MarkLine、Emphasis、滚动条4.1 DataZoom隐藏还原按钮与滚动条DataZoom是Echarts里非常有用的组件用来控制图表的可视区间尤其适合大数据量的时间序列展示。默认的DataZoom配置会在图表下方出现一个滚动条并带一个还原按钮。问题是很多大屏场景下这个还原按钮又小又不美观还容易误触。隐藏还原按钮的做法非常隐蔽官网文档没有明确给出配置名我当年也是查了半天才找到dataZoom: [{ type: inside, start: 0, end: 100 }, { type: slider, height: 16, bottom: 10, borderColor: transparent, backgroundColor: #1a2a4a, fillerColor: rgba(30, 144, 255, 0.3), handleStyle: { color: #1e90ff }, moveHandleSize: 0, showDetail: false }]关键配置其实是moveHandleSize: 0加上showDetail: false这时候滑块中间的移动手柄会消失数据详情浮层也不显示视觉上就是一个干净的滚动条。但我发现很多版本的Echarts还原按钮其实是因为没有设置brushSelect或者zoomLock相关属性才显示出来的。最保险的做法是在option里显式设置dataZoom: [{ type: slider, zoomLock: true }]zoomLock: true固定缩放的起始位置禁止用户拖拽改变区间宽度只能平移滑动这样还原按钮就不会出现交互也更符合大屏被动的展示需求。不过要说明DataZoom的滚动条在展示数据时是很好的补充但大屏场景下我更推荐把type: inside放在第一位鼠标滚轮直接缩放滚动条滑块作为视觉提示放第二层这样既保持了交互性又不会让界面显得杂乱。4.2 MarkLine辅助线关键阈值标记MarkLine辅助线在数据可视化里的作用是帮你快速在图表中标出关键阈值或目标值。做电商大屏时最常用的就是目标销售额线和平均线。series: [{ type: line, data: [120, 200, 150, 80, 70], markLine: { symbol: none, label: { formatter: 目标值: {c}, position: end }, lineStyle: { type: dashed, color: #ff6347, width: 2 }, data: [ { yAxis: 150, name: 目标线 } ] } }]这里yAxis: 150表示在Y轴数值150的位置画一条水平线symbol: none去掉线段两端的箭头标记让辅助线更简洁。markLine还可以用type: average直接画平均值线data: [ { type: average, name: 平均值 } ]还有一个很实用但是用的人不多的配置markLine的坐标轴值动态计算。很多业务场景的目标值不是写死的而是后台接口返回的。这时候直接在setOption之前把yAxis: targetValue算好再传进去就行不用硬编码。我曾经踩过的一个坑是markLine在数据量很大的情况下线条会叠在数据点上面看不清。解决办法是给series系列设置一个z层级把markLine的z值调低series: [{ z: 2, markLine: { z: 1, ... } }]这样markLine会被数据点遮盖在下面视觉上更干净。4.3 Emphasis高亮配置让交互更有反馈Echarts里的emphasis配置是很多开发者容易忽略的功能。它的作用是在鼠标悬停或者选中的时候高亮当前图表元素。默认的emphasis效果够用但大屏项目中为了追求互动反馈的专业感我一般会自定义series: [{ type: pie, emphasis: { scale: true, scaleSize: 10, itemStyle: { shadowBlur: 20, shadowColor: rgba(0, 0, 0, 0.5) }, label: { show: true, fontSize: 14, fontWeight: bold } } }]折线图的emphasis则更多配合focus使用series: [{ type: line, emphasis: { focus: series } }]focus: series的效果是当鼠标悬停在某条折线上时其他系列会自动变淡突出当前系列。这个交互反馈在展示多组对比数据时非常有用能很快让观众聚焦到正在关注的曲线上。还有一个细节我们做大屏模板时通常希望某些元素默认就处于高亮状态。但Echarts的emphasis只是交互触发不能直接控制默认高亮。我一般通过itemStyle设置默认颜色来模拟常亮效果再用emphasis做更亮或者更大尺寸的状态。4.4 同花顺风格股票行情图的实现思路用Echarts实现同花顺风格的股票行情图是我在搜索热词里看到的也是很多金融类数据可视化项目的需求。说实话Echarts本身就有k线图candlestick类型做基础K线没问题但要做到同花顺级别的交互体验和视觉效果还是有不少功夫要下。基础K线图配置option { tooltip: { trigger: axis, axisPointer: { type: cross } }, grid: { left: 10%, right: 10%, bottom: 15% }, xAxis: { type: category, data: dateList, boundaryGap: false }, yAxis: { type: value, scale: true }, dataZoom: [ { type: inside, start: 50, end: 100 }, { type: slider, showDetail: false } ], series: [{ type: candlestick, data: stockData, // [open, close, lowest, highest] 或 [open, close, lowest, highest] 顺序 itemStyle: { color: #ef232a, // 阳线颜色 color0: #14b143, // 阴线颜色 borderColor: #ef232a, borderColor0: #14b143 } }] };注意Echarts的candlestick数据顺序是[open, close, lowest, highest]而不是国内常见的[open, close, low, high]一样的顺序只是当天的开、收、最低、最高。这一点如果不注意K线就会画反或者画错。同花顺风格的核心不是K线本身而是多指标联动——K线图下方通常还有成交量图、MACD或者分时图并且鼠标移动时所有图同步显示十字光标。实现方式是用多个grid布局放在同一个图表实例里然后用axisPointer的link关联多个坐标轴axisPointer: { link: [{ xAxisIndex: all }] }这样鼠标在K线区域移动时下方的成交量图也会同步显示对应的十字线。分时图的实现则更简单用折线图加areaStyle就能画出同花顺风格的平滑分时曲线。如果要做盘口五档、买卖队列这种复杂交互建议还是用专业的前端金融图表库Echarts做基础行情可视化足够但深度交互还是稍显吃力。5. 常见问题与排查技巧实录5.1 地图数据加载失败与坐标偏移做Echarts地图遇到的最多问题就是地图数据加载。Echarts 5.x不再内置地图数据后很多项目都卡在这一步。常见的错误是Map china not exists——因为忘了注册地域数据。我建议的排查顺序是确认echarts.registerMap(china, json)是否在setOption之前执行确认GeoJSON数据的坐标系和名称层级是否对得上比如北京地图里包含的是区级行政区数据里的name一定要和GeoJSON里properties.name完全一致差一个空格都会匹配不上确认引用的GeoJSON文件本身没有因打包路径问题加载到404建议在Network面板里看一眼请求状态。还有一个大陆用户很容易遇到的问题Echarts地图默认显示的是包含南海诸岛的中国地图如果你的项目对地图边界有特定要求比如只需要展示某个省份一定要用GeoAtlas或者官方渠道提供的标准GeoJSON不要用第三方来源可能有边界争议或轻微偏移的数据。这一点在政企项目中尤其敏感。5.2 require引入方式与模块化打包的坑搜索热词里有echarts require说的是在旧项目里用require.js的方式引入Echarts。Echarts官方文档至今提供了三种引入方式script标签全量引入、ESModule按需引入、CommonJS/AMD require引入。在老项目中最常见的是require.config({ paths: { echarts: https://cdn.example.com/echarts.min } }); require([echarts], function(echarts) { var chart echarts.init(document.getElementById(main)); chart.setOption({...}); });但这里有个坑Echarts从5.x开始不再支持通过script标签加载单文件后还使用require([echarts/chart/bar])这种方式按需加载那是3.x时代的写法。如果你在5.x版本里看到require(echarts/lib/chart/bar)的写法那是团队内部包结构不是官方公开API不建议直接用。更推荐的做法是用ESModule按需引入import * as echarts from echarts/core; import { BarChart, LineChart } from echarts/charts; import { GridComponent, TooltipComponent } from echarts/components; import { CanvasRenderer } from echarts/renderers; echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);这样做的好处是打包体积大幅缩小。我在一个项目中只用了折线图、柱状图、饼图和地图全量引入包体积大概900KB按需引入降到了不到400KB。对首屏加载速度敏感的大屏项目来说这个优化值得做。5.3 性能问题大数据量渲染卡顿大屏项目遇到的时间最长的问题不是功能写不出来而是数据量大了以后渲染卡顿。我曾经在一个智慧交通大屏里需要同时渲染5000多个坐标点的轨迹图用默认的散点图直接卡到掉帧。解决办法有三个方向第一开启canvas的硬件加速。Echarts默认用canvas渲染可以设置devicePixelRatio来控制渲染精度对清晰度要求不高的话设置成1var chart echarts.init(dom, null, { renderer: canvas, devicePixelRatio: 1 });第二用large: true开启大数据量优化模式。散点图和线图都有这个配置项开启后Echarts会用特殊的渲染方式减少绘制次数。第三做数据采样降级。对大屏来说5000个点其实人眼根本分不清完全可以在前端做一次抽样保留趋势特征。我常用的方法是时间降采样——比如一分钟的数据只需要保留最大最小和均值三个点显示出来效果几乎一样但渲染量下降了一个数量级。遇到实在无法优化的场景比如地图区域边界非常多也可以考虑用SVG渲染器renderer: svg代替canvas对少量复杂图形的渲染反而更高效。5.4 LangGraph节点可视化别想的太复杂关于echarts与langgraph能否实现节点可视化这个问题我看到的时候也愣了一下。LangGraph是最近两年比较热的一个图状态编排框架核心是处理复杂的Agent流程和状态转移。技术上完全可以用Echarts的graph关系图类型或者tree树图类型来可视化LangGraph的节点和边。我自己试过用Echarts的graph类型展示LangGraph的流程图原理很简单构建一个nodes数组表示每一步操作构建一个links数组表示状态流转然后交给Echarts渲染。option { series: [{ type: graph, layout: force, data: [ { name: Start, symbolSize: 50 }, { name: LLM Call, symbolSize: 50 }, { name: Tool Exec, symbolSize: 50 }, { name: End, symbolSize: 50 } ], links: [ { source: Start, target: LLM Call }, { source: LLM Call, target: Tool Exec }, { source: Tool Exec, target: End } ] }] };不过说实话如果只是展示LangGraph的结构我更推荐用Mermaid或者D3专门做流程图。Echarts的关系图强在数据量大的节点网络展示比如知识图谱、社交网络而不是精简的Agent流程图。术业有专攻别勉强万能工具做所有事。6. 一些实操中的个人体会6.1 大屏模板的模板化思维做数据可视化大屏模板不要从零开始每一张图都手写配置。我在实际项目中维护了一套自己的基础配置库——深色主题、坐标轴样式、tooltip样式、图表间距这些公共配置全部抽出来用代码合并的方式组合。比如我可以把一套颜色主题定义成变量再通过工具函数合并到每个图表的option里。一开始写好一个通用的baseOptionMixin后面开发新大屏的时候能节省大量时间。我经常跟团队同事说大屏项目80%的代码是重复的真正需要你花精力设计的是那20%——业务数据怎么组织、图表怎么交互、大屏怎么叙事。6.2 Echarts实例网站与学习路径建议热词里提到的echarts实例网站我理解的是大家在找学习参考资源。除了官网Gallery虽然现在已经废弃了我常去的是Echarts官方示例https://echarts.apache.org/examples/ 里面的示例都是可运行、可编辑的非常适合直接拿来做二次开发。Make A Pie一个第三方Echarts作品集站点能看到很多高水平的可视化作品找灵感很有用。DataV数据可视化模板阿里出品虽然不是Echarts专用但配色和布局思路很值得借鉴。我的学习建议是不要死记API先做一个完整的小项目比如一个销售数据大屏遇到什么问题查什么问题这样的学习效率远高于从头到尾过一遍文档。6.3 最后再分享一个小技巧每次开发大屏我都习惯在页面加一个全局错误捕获专门用来监听Echarts的报错window.addEventListener(unhandledrejection, function(e) { if (e.reason e.reason.message e.reason.message.includes(echarts)) { console.error(Echarts Error:, e.reason); // 上报监控系统 } });大屏是放在展示场景里连续跑好几天的不像后台系统有人盯着控制台。加了错误上报之后一旦某个图表凌晨三点崩了你第二天还能在监控里看到原因而不至于到了现场才发现满屏白板。这个习惯救了我很多次。Echarts本身一直在更新功能也越来越完善。但工具始终是工具核心还是你对业务数据的理解和对用户视角的关注。把数据故事讲清楚配上合适的可视化形式才是数据可视化的本质。希望这篇经验分享能帮你在做数据可视化大屏模板的时候少踩几个坑多省一些时间。本文还有配套的精品资源点击获取
