1. 为什么要在微信小程序里用 echarts做微信小程序开发的朋友早晚都会遇到一个需求把数据画成图表。不管是后台管理的销售趋势、食堂订单的菜品排行还是社区团购的销量对比一张清晰直观的统计图比一堆数字表格好懂得多。而一提到前端图表库echarts 几乎是绕不开的名字。在 Web 页面里用 echarts 很简单npm install echarts或者直接用 CDN 引入然后一个init就能画图。但微信小程序不是普通网页它没有 DOM 节点也没有window对象很多 Web 端的方案直接搬过来是跑不起来的。于是就有了专门适配小程序的 echarts 版本核心思路是用小程序的 canvas 组件来承载图表的绘制。这个内容适合两类人看一类是从没在微信小程序里画过图表的新手想知道 echarts 到底能不能用、怎么引入最省事另一类是已经踩过坑、想搞清楚为什么图表不显示、tooltip 没反应、canvas 层级被遮住这类问题的开发者。我自己的项目里做过食堂订餐系统、社区团购后台的数据面板全都用 echarts 来完成统计图中间折腾了不少时间这里把能直接用的经验整理出来。微信小程序里使用 echarts 的方案本质上不是“引用一个库就完事”而是理解小程序画布的限制、组件的生命周期、数据的传递方式。搞明白这些底层逻辑后面画任何图都顺手。2. 三种主流的引入方式怎么选2.1 方式一使用官方 ec-canvas 组件echarts 官方针对微信小程序提供了一个组件叫ec-canvas。这是目前用得最多的方案也是我推荐大多数人优先尝试的方案。它本质上把 echarts 的核心库和 canvas 封装成了一个自定义组件你只需要在页面的 json 配置里声明组件然后在 wxml 中放置ec-canvas标签再通过ec属性传入初始化方法图表就能渲染出来。官方组件的文件一般包括ec-canvas.js、ec-canvas.json、ec-canvas.wxml、ec-canvas.wxss以及echarts.js这个完全体积很大的库文件。使用时把整个ec-canvas文件夹拷贝到项目的components目录下然后在页面的 json 里写{ usingComponents: { ec-canvas: /components/ec-canvas/ec-canvas } }页面 wxml 中这样写ec-canvas idmychart canvas-idmychart ec{{ ec }}/ec-canvas对应页面 js 中import * as echarts from ../../components/ec-canvas/echarts; Page({ data: { ec: { onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); chart.setOption({ // 你的 option 配置 }); return chart; } } } });注意这里的onInit不是随便写的方法名它是被 ec-canvas 组件内部调用的生命周期函数。它接收四个参数canvas是 canvas 实例width和height是计算后的宽高dpr是设备的像素比。echarts.init之后setOption最后一定要把chart实例返回出去后续要更新数据才能拿到这个实例。2.2 方式二直接下载 echarts 源码放进工具目录如果你不喜欢官方组件的封装层级也可以直接下载 echarts 的小程序源码文件自己管理初始化逻辑。官方 GitHub 仓库里有个extension或者dist相关目录你可以找到完整的echarts.js文件这个文件已经做了小程序的适配内部封装了canvas相关处理。这种方式的好处是灵活你可以自己写一个简单的 canvas 封装函数想怎么初始化就怎么初始化。坏处是你要自己处理 canvas 的尺寸、触摸事件、chart.dispose等细节工作量会大一些。适合本身已经有一套图表封装逻辑、想要深度定制的团队。2.3 方式三使用第三方封装库如 ec-canvas 的变体或 uni-app 方案如果项目用的是 uni-app 这类跨端框架开发微信小程序时通常使用qiun-data-charts或者 uCharts 这类第三方图表库。uCharts 本身就兼容小程序、H5、AppAPI 风格和 echarts 不完全一样但如果是新项目且不只做微信端用 uCharts 会更省心。但是注意如果你已经在别的地方写过 echarts 的 option又想在微信小程序里复用同一套配置那还是用 echarts 小程序版最顺手。毕竟 option 的语法在 Web 端和数据可视化大屏上都通用一套配置到处跑省去二次学习的成本。2.4 引入方式的选型建议我自己在多个项目里的选择经验是这样场景推荐方案只做微信小程序且需要快速出图官方 ec-canvas跨端项目小程序AppH5uCharts 或 uni-app 生态图表插件已有老项目用 echarts需要复用 option官方 ec-canvas保持 option 一致需要非常复杂的图表交互官方 ec-canvas 自定义事件处理大多数人的场景落在第一行。直接上官方 ec-canvas稳定且踩坑资料最多。后面所有实操内容我都以 ec-canvas 为例。3. 核心细节让图表真正跑起来的几个关键点3.1 canvas 的宽高不能直接用百分比这是新手最容易踩的第一个坑。在 Web 端你给 echarts 容器一个div设置宽高通常是100%或50%没问题。但在小程序里ec-canvas组件的 wxml 内部是一个canvas标签canvas 的宽高由组件的样式控制。如果你在页面 css 里只写width: 100%而没有给高度图表就会变成一坨挤在一起的错误渲染甚至什么都不显示。正确做法是给ec-canvas外层容器设置明确的宽高或者从后端动态计算。最简单的写法.chart-box { width: 100%; height: 400rpx; /* 明确高度 */ }在 wxml 中view classchart-box ec-canvas idmychart canvas-idmychart ec{{ ec }}/ec-canvas /view注意ec-canvas是不会主动撑开父容器的它内部 canvas 的宽高在初始化时是通过参数传入的父容器如果不定高会导致 canvas 高度变成 0。如果你想让图表高度自适应内容或根据不同机型动态调整可以在onReady里通过wx.createSelectorQuery()获取容器节点的实际宽高再动态初始化。但这样写起来麻烦大多数场景直接给一个预估的固定高度就够了比如柱状图 500rpx、折线图 400rpx、饼图 600rpx按比例调好视觉效果即可。3.2 生命周期为什么有时候图表没渲染ec对象里的onInit是延迟执行的它在 canvas 节点挂载到页面之后才会被回调。但如果你把setOption的数据放在了onLoad阶段而 onInit 还没执行数据自然就丢了。我遇到过一种情况请求后端接口获取统计数据得到数据后立刻赋值给data里的option而ec.onInit里还没来得及读这个数据图表初始化时就用了undefined导致白屏。后来我改成在接口回调里先判断chart实例是否存在如果存在直接chart.setOption如果不存在就暂存数据等 onInit 时再取。具体代码如下Page({ data: { ec: { onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.chart chart; if (this.pendingOption) { chart.setOption(this.pendingOption); } return chart; } }, chartDataLoaded: false }, onLoad() { this.pendingOption null; this.loadData(); }, loadData() { wx.request({ url: https://api.example.com/stat, success: (res) { const option this.buildOption(res.data); if (this.chart) { this.chart.setOption(option); } else { this.pendingOption option; } } }); }, buildOption(data) { return { tooltip: {}, xAxis: { data: data.labels }, yAxis: {}, series: [{ type: bar, data: data.values }] }; } });这里的思路就是“谁先到谁等待”。onInit 先执行但数据还没回来那就把 chart 存到 this等数据回来再 setOption如果接口先返回了而 onInit 还没执行就先存在 pendingOption 里onInit 里再读。这个模式我一直用到现在稳。3.3 setOption 和 option 的响应式更新echarts 实例创建之后想要更新统计图不能直接给data里的ec对象重新赋值那样会让组件重新初始化反而造成闪烁和性能浪费。正确做法是通过this.chart.setOption(newOption)更新。而且 setOption 默认是 merge 模式意味着新 option 里的数据会和旧 option 合并而不是整体替换。如果你从一套图表切换成另一套图表比如从柱状图切成饼图要注意清空不用的配置。可以给 setOption 加第二个参数truethis.chart.setOption(newOption, true);第二个参数传true表示 notMerge忽略之前的 option 直接替换。否则你可能会看到柱状图的柱子还残留在界面上或者 tooltip 的配置莫名被保留下来。关于小程序里的响应式还有一个常见问题页面用setData更新了data.ec对象中的某些字段会不会触发图表变化答案是不会而且你可能把图表初始化搞炸。所以记住一个原则图表实例和页面数据解耦图表的更新一律通过实例方法操作。3.4 canvas 层级遮挡问题这个是微信小程序 canvas 的老大难问题。canvas 组件是原生组件早期版本的微信小程序里原生组件的层级总是高于普通 view。如果你的图表上方悬浮了一个下拉菜单、一个自定义弹窗或者一个需要覆盖图表的头部栏你可能会发现这些 view 被 canvas 压住了根本点不到。如果你还在用比较老的微信基础库大概 2.9 之前解决办法有几种使用cover-view和cover-image来覆盖 canvas。把 canvas 的显示区域缩小给需要浮在上面的元素让出位置。但基础库更新之后小程序支持了同层渲染canvas 可以和普通组件一样参与层级管理。如果你的项目基础库没问题这个坑基本不存在了。但保险起见在做带悬浮效果的弹窗时建议用一个临时的wx:if把 canvas 销毁再渲染弹窗关闭后再恢复这样既保证交互也避免某些 Android 机型的渲染兼容问题。4. 实操过程从零做一个销售数据统计图4.1 准备基础页面结构假设我们要做一个家政服务的接单统计页面展示最近 7 天的订单数和营收。页面顶部有一个时间段筛选下面一张柱状图展示单量一张折线图展示营收额。这里我们只演示核心的图表逻辑。第一步创建页面目录pages/statistics然后在项目根目录的app.json中注册这个页面。如果项目里还没有components目录就新建一个。把从官方示例拷贝来的ec-canvas文件夹放进 components 目录。第二步在pages/statistics/index.json里声明组件{ usingComponents: { ec-canvas: /components/ec-canvas/ec-canvas }, navigationBarTitleText: 统计面板 }4.2 编写页面样式一般统计图的容器要留出边距图表本体不要贴边。微信小程序中有默认的page背景色我习惯设为#f5f6fa。图表卡片用一个白色圆角容器包裹方便视觉区分。/* index.wxss */ .page { padding: 24rpx; } .card { background: #ffffff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); } .card-title { font-size: 32rpx; font-weight: 600; color: #1a1a1a; margin-bottom: 16rpx; } .chart-box { width: 100%; height: 500rpx; }4.3 获取数据并构造 option在页面 js 中我们定义两个图表实例订单柱状图、营收折线图。由于一个页面可能有多个图表ec对象的onInit需要在函数内部区分当前是哪个 canvas 触发。这里有个技巧不在 data 里写死多个ec而是通过>import * as echarts from ../../components/ec-canvas/echarts; Page({ data: { ecOrder: { onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.orderChart chart; return chart; } }, ecRevenue: { onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.revenueChart chart; return chart; } } }, onLoad() { this.fetchStatistics(); }, fetchStatistics() { wx.request({ url: https://api.example.com/statistics?days7, method: GET, success: (res) { const { dates, orders, revenues } res.data; this.renderOrderChart(dates, orders); this.renderRevenueChart(dates, revenues); }, fail: (err) { wx.showToast({ title: 数据加载失败, icon: none }); } }); }, renderOrderChart(dates, data) { const option { tooltip: { trigger: axis }, grid: { left: 8%, right: 5%, top: 12%, bottom: 12%, containLabel: true }, xAxis: { type: category, data: dates, axisLabel: { fontSize: 12, color: #666666 } }, yAxis: { type: value, name: 订单量, axisLabel: { fontSize: 12, color: #666666 }, splitLine: { lineStyle: { type: dashed, color: #e8e8e8 } } }, series: [ { name: 订单数, type: bar, barWidth: 40%, data: data, itemStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: #5b8ff9 }, { offset: 1, color: #3a5fbf } ] }, borderRadius: [6, 6, 0, 0] } } ] }; if (this.orderChart) { this.orderChart.setOption(option, true); } else { this.pendingOrderOption option; } }, renderRevenueChart(dates, data) { const option { tooltip: { trigger: axis }, grid: { left: 8%, right: 5%, top: 12%, bottom: 12%, containLabel: true }, xAxis: { type: category, data: dates, axisLabel: { fontSize: 12, color: #666666 } }, yAxis: { type: value, name: 营收(元), axisLabel: { fontSize: 12, color: #666666 } }, series: [ { name: 营收, type: line, smooth: true, data: data, lineStyle: { width: 3, color: #36b37e }, itemStyle: { color: #36b37e }, areaStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: rgba(54, 179, 126, 0.3) }, { offset: 1, color: rgba(54, 179, 126, 0.02) } ] } } } ] }; if (this.revenueChart) { this.revenueChart.setOption(option, true); } else { this.pendingRevenueOption option; } }, onReady() { // 这里处理 onInit 中 pending option 的问题其实更早 } });要注意的是onInit中返回 chart 之前如果this.pendingOrderOption存在就在onInit里setOption。上面代码为了简洁没有写实际你在 onInit 里加上这段即可onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.orderChart chart; if (this.pendingOrderOption) { chart.setOption(this.pendingOrderOption); this.pendingOrderOption null; } return chart; }4.4 时间筛选和图表联动我们还需要支持切换“最近 7 天”“最近 30 天”等时间范围。方法很简单页面顶部放一个picker组件通过bindchange事件重新请求接口picker modeselector range{{ rangeList }} value{{ rangeIndex }} bindchangeonRangeChange view classpicker{{ rangeList[rangeIndex] }}/view /picker在onRangeChange里onRangeChange(e) { const index Number(e.detail.value); const days index 0 ? 7 : 30; this.setData({ rangeIndex: index }); this.fetchStatistics(days); }此时页面图表会重新调用renderOrderChart和renderRevenueChart因为this.orderChart已经存在所以直接setOption更新数据。整个流程是picker 变更 - 请求新数据 - 更新图表。4.5 尺寸适配和真机预览在小程序开发工具里默认模拟器的宽高和真机可能存在差异。特别是部分安卓机型dpr不同会导致 canvas 内部实际渲染分辨率不一致。echarts 官方初始化时要求传入devicePixelRatio但我们一般直接使用dpr参数也就是canvas.getBoundingClientRect().width和height对应的比例这样基本没有问题。如果你发现真机上图表字体模糊或者线条发虚检查一下dpr是否正确传递。有些使用场景下直接传wx.getWindowInfo().pixelRatio也行const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: wx.getWindowInfo().pixelRatio });不过官方示例给的dpr就是初始化的第四个参数直接用它最省事。ec-canvas内部其实已经考虑到这个问题你不需要过度纠结除非你自定义过 canvas 的样式比如缩小了 canvas 的 css 大小但内部 buffer 没有放大那样就会出现模糊。4.6 性能优化懒加载和离屏渲染统计页通常不是首页但如果你在一个页面里同时放了太多图表比如 4、5 个折线图初始化全部 echarts 实例会消耗不少内存。小程序的运行环境比浏览器更苛刻尤其在低端安卓机上可能会出现页面加载卡顿、掉帧的情况。我常用的优化手段只有滚动到图表区域时才触发创建 echarts 实例。利用小程序的intersectionObserver或者简单的onPageScroll判断位置。对于不是默认展示的图表先用一个占位图等用户点击切换后再初始化。页面onHide时调用chart.clear()释放当前配置如果不小心在页面卸载后还在 setOption会报错。实际做法示例onPageScroll(e) { // 假设第二个卡片 id 是 revenueCard判断 scrollTop viewport 是否接近 if (!this.revenueChart this.revenueLoaded isInViewport) { this.initRevenueChart(); } }也可以直接用wx.createIntersectionObserverthis.observer wx.createIntersectionObserver(this); this.observer.relativeToViewport().observe(#revenueCard, (res) { if (res.intersectionRatio 0 !this.revenueChart) { this.initRevenueChart(); } });这种方式不仅优化性能还能避免页面一加载就同时渲染一堆图表导致的白屏感。5. 常见问题和排查技巧实录5.1 图表空白但代码逻辑没有问题一种非常常见的现象是setOption之后页面空白调试工具控制台也没有报错。这时首先要检查 canvas 是否被撑开宽度和高度我通常会临时在 ec-canvas 外层加一个边框测试.chart-box { border: 1px solid red; width: 100%; height: 500rpx; }如果红色边框正常显示说明容器没问题。接着看ec对象是否写对确认onInit有没有被调用。你可以在onInit里打console.log(onInit)如果没打印说明 ec-canvas 组件的初始化条件没满足大概率是ec-canvas的路径引错了或者组件目录没对上。还有一种是 canvas-id 重复。如果你有两个图表都用了同一个canvas-id第二个会覆盖第一个的绘制或者直接抛出错误。务必给每个ec-canvas设置不同的canvas-id虽然现在新版 ec-canvas 可能不强制要求唯一但规范起见还是别偷懒。5.2 真机上图表能显示但 tooltip 点了没反应这个和原生组件的触摸事件有关。旧版基础库里 canvas 的触摸事件可能不会正常冒泡到组件导致 tooltip 不跟随手指。解决办法是把 ec-canvas 组件样式里的disable-scroll设为true其实官方组件默认就有这个配置你看看自己有没有无意中覆盖。另外echarts 的tooltip.trigger设为 axis 还是 item 会影响触发区域。柱状图用 axis 时触摸柱子附近整个坐标区域都能触发提示体验更好。如果设置成 item只在柱子中心才有反应在小屏幕上很难精准点中。如果你确实遇到 tooltip 不灵敏还有一个备选方案不在统计图内做 tooltip而是监听click事件把数据展示在图表下方的自定义消息框里。这种方式虽然少了一些交互感但兼容性最好也容易控制样式。chart.on(click, (params) { this.setData({ tipText: 日期 ${params.name}订单量 ${params.value} }); });5.3 数据请求返回了但图表数据没更新排查思路分三步确认this.chart存在因为 onInit 和接口回调的时序不定。确认setOption的 option 结构是否正确尤其是 series 的数据是否为数组。确认你使用的新 option 和旧 option 的类型一致如果你从bar更新成line必须setOption(newOption, true)。我遇到过一种情况请求成功了数据也打印出来是数组但图表还是旧数据最后发现是this.setData把 chart 实例赋值给了 data 里的某个字段导致 data 被序列化时把 echarts 实例搞坏了。正确的存储方式是把 chart 实例绑定在this上而不是this.data上。因为setData是同步地把数据发送到逻辑层和视图层echarts 实例里包含大量的函数和循环引用不能也不应该被 setData。5.4 小程序包体积超过 2MBecharts 太大了echarts 的完整版echarts.js有将近 1MB再加上项目的其他代码很容易触达小程序 2MB 的主包限制。这里有一些实用的降体方案使用 echarts 的按需引入模块只打包你需要的图表类型。在小程序版 echarts 中你可以从echarts/core引入import * as echarts from ../../components/ec-canvas/echarts;如果你想自己精简 echarts需要到 echarts 官网在线定制选择 bar、line、pie 这些常用图表和必要的组件tooltip、grid、legend下载定制后的文件替换掉 ec-canvas 目录下的 echarts.js。这样可以把体积从 1MB 压到 400KB 左右。把统计页面放到分包里。小程序分包加载是一个很好的策略主包只放 tabBar 和公共内容统计页这种不常用但功能重的页面放到subpackage中用户在进入时才加载。分包方式不会减少 echarts 文件本身大小但能减少主包占用的空间。如果图表不多也可以考虑放弃 echarts使用更轻量的 uCharts它压缩之后小很多对简单图表完全够用。5.5 多个图表切换时闪烁用setOption(option, true)之后虽然是整体替换但 canvas 重新绘制时肉眼可见几毫秒的空白。这在单个图表上体验不明显但切换图表类型时就很明显。比较平滑的做法是给图表容器做一个简单的过渡动画或者先设置一个遮罩在 setOption 之后通过nextTick再移除。由于 canvas 绘制是异步的你没法精确知道绘制完成的时刻只能通过 setTimeout 或者 requestAnimationFrame 近似处理。实测下来用 wx 的wx.nextTick加上 50ms 的延时效果还可以不会很出戏。如果你不想处理这种细节还有一个简单粗暴的办法不同图表类型使用不同的 canvas 实例每次切换时只是控制它们的显示隐藏。这个办法消耗的内存多一些但稳定性最高适合图表数量少2-3 个的场景。5.6 上下滑动时图表区域卡顿页面中有长列表和图表时canvas 的重新绘制会在事件循环里占用很多资源。如果统计页是滚动页面而不是单独的全屏图表页建议把图表的animation选项设为false关闭 echarts 自带的动画。option.animation false;这样图表在 setOption 更新时不做过渡动画绘制速度更快。大多数统计场景下用户看的是数据本身动画只是个锦上添花的装饰关掉之后对体验影响不大。另外可以用chart.resize()配合页面的onResize事件来适应横竖屏切换。不过微信小程序改变窗口大小的场景很少除非你在 PC 端微信打开小程序这种需求如果有记得在 resize 里调用chart.resize()。6. 进阶技巧让统计图更贴近业务6.1 柱状图设置渐变色的正确姿势热词里多次提到“echarts柱状图设置渐变色”这个需求很常见。echarts 的itemStyle.color支持传入渐变对象但小程序里要注意写法和小程序 CSS 渐变的区别。传统 CSS 渐变是 linear-gradient(角度, 颜色1, 颜色2)而 echarts 里是对象形式itemStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: #5b8ff9 }, { offset: 1, color: #3a5fbf } ] } }其中 x、y、x2、y2 是一个相对坐标系取值范围 0 到 1。(0,0) 是左下角(1,1) 是右上角。想垂直渐变就让 x2 保持 0y2 变为 1想水平渐变就让 y2 为 0x2 为 1。我自己的习惯是柱状图垂直渐变上浅下深这样柱子显得有体积感。折线图的面积填充则反过来顶部颜色透明底部颜色深营造一种“海拔从低到高”的视觉错觉类似仪表盘的层次感。6.2 饼图中间的说明文字热词里出现的“echarts pie 中间的字”通常指的是饼图中央显示的汇总信息比如总金额、总订单数。echarts 原生并没有一个专门的“中心文字”配置需要靠title组件来模拟。一种方案是给饼图设置title.text和title.subtext并让它居中title: { text: 总营收, subtext: ¥ 23,456, left: center, top: center }, series: [ { type: pie, radius: [45%, 70%], center: [50%, 50%], data: [...] } ]这样 title 就是绝对居中显示的正好覆盖在环形饼图的中心空白区域。如果想更精确控制还可以用graphic元素或者aria组件但 title 是最省事的做法。有一个细节title 的层级默认会覆盖在 canvas 内部绘制的最上层所以看起来就是绘制在饼图中心的。但如果你在系列里设置了 label 的位置也在中心会和 title 重叠需要手动调 label 的 offset 或者不显示。6.3 横向进度条和排行榜样式业务里经常要用横向柱状图来做排行榜比如家政服务最受欢迎的服务项目排名。echarts 实现横向柱状图很简单只需把 xAxis 和 yAxis 交换。因为 category 类型的轴放在 y 轴value 类型的轴放在 x 轴xAxis: { type: value }, yAxis: { type: category, data: [保洁, 月嫂, 家电清洗, 管道疏通, 开荒保洁] }, series: [ { type: bar, data: [120, 95, 80, 60, 40], label: { show: true, position: right } } ]如果想要每个柱子的值直接显示在柱子上面或旁边echarts 的label.position设置为top只适用于纵向柱状图横向柱状图里应该用right。上面代码中已经展示。为了更像“进度条”可以给柱子设置更小的barWidth比如 10 到 16再配合渐变和圆角观感就不一样了。6.4 折线图 x 轴刻度太密怎么办当日期连续 30 天x 轴 30 个标签挤在一起会非常难看。echarts 的默认机制是自动调整间隔但有时自动算法不够聪明。你可以手动控制xAxis: { type: category, data: dates, axisLabel: { interval: 4 // 每隔 4 个刻度显示一个标签从 0 开始 } }还可以用axisLabel.interval: function(index, value) { return index % 3 0; }这种函数形式更灵活。但要注意在小程序里如果传函数函数会被序列化吗实际上官方 ec-canvas 里setOption的对象是直接传给内部的 echarts 库没有经过 setData所以可以正常使用函数。只不过如果你将 option 存到了this.data里函数无法被序列化会导致报错。所以别把包含函数的 option 放进 data。6.5 统计图周边的视觉细节真正让统计图看起来专业的地方往往不是图本身而是周边的视觉。比如图表容器和卡片背景颜色不要过度鲜艳白色或浅灰底最适合数据展示。图表的 x 轴标签和 y 轴标签字体大小建议不小于 10rpx在真机上小于 10rpx 会很难辨认。网格线用虚线透明度降低一点避免抢了数据的视觉重点。如果图表有多种系列色彩饱和度不要太高用同一色系不同深浅来区分。这些细节不需要花很多代码但体验提升非常明显。7. 我对这种方案的一点体会做了几个微信小程序的数据统计项目之后我的总体感觉是echarts 在小程序里完全够用只是接入方式比 Web 端多了一层思考。最重要的一点是理解 canvas 组件的运行机制它本质上是一个独立的原生组件没有 DOM 的概念echarts 的初始化方式也不同于 Web 端的getElementById。当你接受这个设定之后剩下的一切都是从 Web 端平移到小程序的过程并没有想象中那么难。我踩过的所有坑里最浪费时间的其实是“不知道在哪里看日志”。小程序开发工具里 canvas 类的报错有时不会明确指行号只是说某个对象找不到。后来我习惯在onInit里把参数都打印出来确认 canvas 实例和宽高是否正常再去查是否setOption调用时机不对。这种排查思路比到处搜代码更有效。最后分享一个小技巧如果你在别的项目里已经写过 echarts 图表记得把 option 的公共部分抽成一个独立的函数比如一个生成渐变色的工具函数、一个格式化 tooltip 的 helper。小程序项目和 Web 项目可以共用同一套 option 构建逻辑只是初始化部分不同。这样不管平台怎么变图表的配置和风格都能保持统一以后维护成本会低很多。
微信小程序中ECharts集成实践：从入门到性能优化
1. 为什么要在微信小程序里用 echarts做微信小程序开发的朋友早晚都会遇到一个需求把数据画成图表。不管是后台管理的销售趋势、食堂订单的菜品排行还是社区团购的销量对比一张清晰直观的统计图比一堆数字表格好懂得多。而一提到前端图表库echarts 几乎是绕不开的名字。在 Web 页面里用 echarts 很简单npm install echarts或者直接用 CDN 引入然后一个init就能画图。但微信小程序不是普通网页它没有 DOM 节点也没有window对象很多 Web 端的方案直接搬过来是跑不起来的。于是就有了专门适配小程序的 echarts 版本核心思路是用小程序的 canvas 组件来承载图表的绘制。这个内容适合两类人看一类是从没在微信小程序里画过图表的新手想知道 echarts 到底能不能用、怎么引入最省事另一类是已经踩过坑、想搞清楚为什么图表不显示、tooltip 没反应、canvas 层级被遮住这类问题的开发者。我自己的项目里做过食堂订餐系统、社区团购后台的数据面板全都用 echarts 来完成统计图中间折腾了不少时间这里把能直接用的经验整理出来。微信小程序里使用 echarts 的方案本质上不是“引用一个库就完事”而是理解小程序画布的限制、组件的生命周期、数据的传递方式。搞明白这些底层逻辑后面画任何图都顺手。2. 三种主流的引入方式怎么选2.1 方式一使用官方 ec-canvas 组件echarts 官方针对微信小程序提供了一个组件叫ec-canvas。这是目前用得最多的方案也是我推荐大多数人优先尝试的方案。它本质上把 echarts 的核心库和 canvas 封装成了一个自定义组件你只需要在页面的 json 配置里声明组件然后在 wxml 中放置ec-canvas标签再通过ec属性传入初始化方法图表就能渲染出来。官方组件的文件一般包括ec-canvas.js、ec-canvas.json、ec-canvas.wxml、ec-canvas.wxss以及echarts.js这个完全体积很大的库文件。使用时把整个ec-canvas文件夹拷贝到项目的components目录下然后在页面的 json 里写{ usingComponents: { ec-canvas: /components/ec-canvas/ec-canvas } }页面 wxml 中这样写ec-canvas idmychart canvas-idmychart ec{{ ec }}/ec-canvas对应页面 js 中import * as echarts from ../../components/ec-canvas/echarts; Page({ data: { ec: { onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); chart.setOption({ // 你的 option 配置 }); return chart; } } } });注意这里的onInit不是随便写的方法名它是被 ec-canvas 组件内部调用的生命周期函数。它接收四个参数canvas是 canvas 实例width和height是计算后的宽高dpr是设备的像素比。echarts.init之后setOption最后一定要把chart实例返回出去后续要更新数据才能拿到这个实例。2.2 方式二直接下载 echarts 源码放进工具目录如果你不喜欢官方组件的封装层级也可以直接下载 echarts 的小程序源码文件自己管理初始化逻辑。官方 GitHub 仓库里有个extension或者dist相关目录你可以找到完整的echarts.js文件这个文件已经做了小程序的适配内部封装了canvas相关处理。这种方式的好处是灵活你可以自己写一个简单的 canvas 封装函数想怎么初始化就怎么初始化。坏处是你要自己处理 canvas 的尺寸、触摸事件、chart.dispose等细节工作量会大一些。适合本身已经有一套图表封装逻辑、想要深度定制的团队。2.3 方式三使用第三方封装库如 ec-canvas 的变体或 uni-app 方案如果项目用的是 uni-app 这类跨端框架开发微信小程序时通常使用qiun-data-charts或者 uCharts 这类第三方图表库。uCharts 本身就兼容小程序、H5、AppAPI 风格和 echarts 不完全一样但如果是新项目且不只做微信端用 uCharts 会更省心。但是注意如果你已经在别的地方写过 echarts 的 option又想在微信小程序里复用同一套配置那还是用 echarts 小程序版最顺手。毕竟 option 的语法在 Web 端和数据可视化大屏上都通用一套配置到处跑省去二次学习的成本。2.4 引入方式的选型建议我自己在多个项目里的选择经验是这样场景推荐方案只做微信小程序且需要快速出图官方 ec-canvas跨端项目小程序AppH5uCharts 或 uni-app 生态图表插件已有老项目用 echarts需要复用 option官方 ec-canvas保持 option 一致需要非常复杂的图表交互官方 ec-canvas 自定义事件处理大多数人的场景落在第一行。直接上官方 ec-canvas稳定且踩坑资料最多。后面所有实操内容我都以 ec-canvas 为例。3. 核心细节让图表真正跑起来的几个关键点3.1 canvas 的宽高不能直接用百分比这是新手最容易踩的第一个坑。在 Web 端你给 echarts 容器一个div设置宽高通常是100%或50%没问题。但在小程序里ec-canvas组件的 wxml 内部是一个canvas标签canvas 的宽高由组件的样式控制。如果你在页面 css 里只写width: 100%而没有给高度图表就会变成一坨挤在一起的错误渲染甚至什么都不显示。正确做法是给ec-canvas外层容器设置明确的宽高或者从后端动态计算。最简单的写法.chart-box { width: 100%; height: 400rpx; /* 明确高度 */ }在 wxml 中view classchart-box ec-canvas idmychart canvas-idmychart ec{{ ec }}/ec-canvas /view注意ec-canvas是不会主动撑开父容器的它内部 canvas 的宽高在初始化时是通过参数传入的父容器如果不定高会导致 canvas 高度变成 0。如果你想让图表高度自适应内容或根据不同机型动态调整可以在onReady里通过wx.createSelectorQuery()获取容器节点的实际宽高再动态初始化。但这样写起来麻烦大多数场景直接给一个预估的固定高度就够了比如柱状图 500rpx、折线图 400rpx、饼图 600rpx按比例调好视觉效果即可。3.2 生命周期为什么有时候图表没渲染ec对象里的onInit是延迟执行的它在 canvas 节点挂载到页面之后才会被回调。但如果你把setOption的数据放在了onLoad阶段而 onInit 还没执行数据自然就丢了。我遇到过一种情况请求后端接口获取统计数据得到数据后立刻赋值给data里的option而ec.onInit里还没来得及读这个数据图表初始化时就用了undefined导致白屏。后来我改成在接口回调里先判断chart实例是否存在如果存在直接chart.setOption如果不存在就暂存数据等 onInit 时再取。具体代码如下Page({ data: { ec: { onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.chart chart; if (this.pendingOption) { chart.setOption(this.pendingOption); } return chart; } }, chartDataLoaded: false }, onLoad() { this.pendingOption null; this.loadData(); }, loadData() { wx.request({ url: https://api.example.com/stat, success: (res) { const option this.buildOption(res.data); if (this.chart) { this.chart.setOption(option); } else { this.pendingOption option; } } }); }, buildOption(data) { return { tooltip: {}, xAxis: { data: data.labels }, yAxis: {}, series: [{ type: bar, data: data.values }] }; } });这里的思路就是“谁先到谁等待”。onInit 先执行但数据还没回来那就把 chart 存到 this等数据回来再 setOption如果接口先返回了而 onInit 还没执行就先存在 pendingOption 里onInit 里再读。这个模式我一直用到现在稳。3.3 setOption 和 option 的响应式更新echarts 实例创建之后想要更新统计图不能直接给data里的ec对象重新赋值那样会让组件重新初始化反而造成闪烁和性能浪费。正确做法是通过this.chart.setOption(newOption)更新。而且 setOption 默认是 merge 模式意味着新 option 里的数据会和旧 option 合并而不是整体替换。如果你从一套图表切换成另一套图表比如从柱状图切成饼图要注意清空不用的配置。可以给 setOption 加第二个参数truethis.chart.setOption(newOption, true);第二个参数传true表示 notMerge忽略之前的 option 直接替换。否则你可能会看到柱状图的柱子还残留在界面上或者 tooltip 的配置莫名被保留下来。关于小程序里的响应式还有一个常见问题页面用setData更新了data.ec对象中的某些字段会不会触发图表变化答案是不会而且你可能把图表初始化搞炸。所以记住一个原则图表实例和页面数据解耦图表的更新一律通过实例方法操作。3.4 canvas 层级遮挡问题这个是微信小程序 canvas 的老大难问题。canvas 组件是原生组件早期版本的微信小程序里原生组件的层级总是高于普通 view。如果你的图表上方悬浮了一个下拉菜单、一个自定义弹窗或者一个需要覆盖图表的头部栏你可能会发现这些 view 被 canvas 压住了根本点不到。如果你还在用比较老的微信基础库大概 2.9 之前解决办法有几种使用cover-view和cover-image来覆盖 canvas。把 canvas 的显示区域缩小给需要浮在上面的元素让出位置。但基础库更新之后小程序支持了同层渲染canvas 可以和普通组件一样参与层级管理。如果你的项目基础库没问题这个坑基本不存在了。但保险起见在做带悬浮效果的弹窗时建议用一个临时的wx:if把 canvas 销毁再渲染弹窗关闭后再恢复这样既保证交互也避免某些 Android 机型的渲染兼容问题。4. 实操过程从零做一个销售数据统计图4.1 准备基础页面结构假设我们要做一个家政服务的接单统计页面展示最近 7 天的订单数和营收。页面顶部有一个时间段筛选下面一张柱状图展示单量一张折线图展示营收额。这里我们只演示核心的图表逻辑。第一步创建页面目录pages/statistics然后在项目根目录的app.json中注册这个页面。如果项目里还没有components目录就新建一个。把从官方示例拷贝来的ec-canvas文件夹放进 components 目录。第二步在pages/statistics/index.json里声明组件{ usingComponents: { ec-canvas: /components/ec-canvas/ec-canvas }, navigationBarTitleText: 统计面板 }4.2 编写页面样式一般统计图的容器要留出边距图表本体不要贴边。微信小程序中有默认的page背景色我习惯设为#f5f6fa。图表卡片用一个白色圆角容器包裹方便视觉区分。/* index.wxss */ .page { padding: 24rpx; } .card { background: #ffffff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); } .card-title { font-size: 32rpx; font-weight: 600; color: #1a1a1a; margin-bottom: 16rpx; } .chart-box { width: 100%; height: 500rpx; }4.3 获取数据并构造 option在页面 js 中我们定义两个图表实例订单柱状图、营收折线图。由于一个页面可能有多个图表ec对象的onInit需要在函数内部区分当前是哪个 canvas 触发。这里有个技巧不在 data 里写死多个ec而是通过>import * as echarts from ../../components/ec-canvas/echarts; Page({ data: { ecOrder: { onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.orderChart chart; return chart; } }, ecRevenue: { onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.revenueChart chart; return chart; } } }, onLoad() { this.fetchStatistics(); }, fetchStatistics() { wx.request({ url: https://api.example.com/statistics?days7, method: GET, success: (res) { const { dates, orders, revenues } res.data; this.renderOrderChart(dates, orders); this.renderRevenueChart(dates, revenues); }, fail: (err) { wx.showToast({ title: 数据加载失败, icon: none }); } }); }, renderOrderChart(dates, data) { const option { tooltip: { trigger: axis }, grid: { left: 8%, right: 5%, top: 12%, bottom: 12%, containLabel: true }, xAxis: { type: category, data: dates, axisLabel: { fontSize: 12, color: #666666 } }, yAxis: { type: value, name: 订单量, axisLabel: { fontSize: 12, color: #666666 }, splitLine: { lineStyle: { type: dashed, color: #e8e8e8 } } }, series: [ { name: 订单数, type: bar, barWidth: 40%, data: data, itemStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: #5b8ff9 }, { offset: 1, color: #3a5fbf } ] }, borderRadius: [6, 6, 0, 0] } } ] }; if (this.orderChart) { this.orderChart.setOption(option, true); } else { this.pendingOrderOption option; } }, renderRevenueChart(dates, data) { const option { tooltip: { trigger: axis }, grid: { left: 8%, right: 5%, top: 12%, bottom: 12%, containLabel: true }, xAxis: { type: category, data: dates, axisLabel: { fontSize: 12, color: #666666 } }, yAxis: { type: value, name: 营收(元), axisLabel: { fontSize: 12, color: #666666 } }, series: [ { name: 营收, type: line, smooth: true, data: data, lineStyle: { width: 3, color: #36b37e }, itemStyle: { color: #36b37e }, areaStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: rgba(54, 179, 126, 0.3) }, { offset: 1, color: rgba(54, 179, 126, 0.02) } ] } } } ] }; if (this.revenueChart) { this.revenueChart.setOption(option, true); } else { this.pendingRevenueOption option; } }, onReady() { // 这里处理 onInit 中 pending option 的问题其实更早 } });要注意的是onInit中返回 chart 之前如果this.pendingOrderOption存在就在onInit里setOption。上面代码为了简洁没有写实际你在 onInit 里加上这段即可onInit: function(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); this.orderChart chart; if (this.pendingOrderOption) { chart.setOption(this.pendingOrderOption); this.pendingOrderOption null; } return chart; }4.4 时间筛选和图表联动我们还需要支持切换“最近 7 天”“最近 30 天”等时间范围。方法很简单页面顶部放一个picker组件通过bindchange事件重新请求接口picker modeselector range{{ rangeList }} value{{ rangeIndex }} bindchangeonRangeChange view classpicker{{ rangeList[rangeIndex] }}/view /picker在onRangeChange里onRangeChange(e) { const index Number(e.detail.value); const days index 0 ? 7 : 30; this.setData({ rangeIndex: index }); this.fetchStatistics(days); }此时页面图表会重新调用renderOrderChart和renderRevenueChart因为this.orderChart已经存在所以直接setOption更新数据。整个流程是picker 变更 - 请求新数据 - 更新图表。4.5 尺寸适配和真机预览在小程序开发工具里默认模拟器的宽高和真机可能存在差异。特别是部分安卓机型dpr不同会导致 canvas 内部实际渲染分辨率不一致。echarts 官方初始化时要求传入devicePixelRatio但我们一般直接使用dpr参数也就是canvas.getBoundingClientRect().width和height对应的比例这样基本没有问题。如果你发现真机上图表字体模糊或者线条发虚检查一下dpr是否正确传递。有些使用场景下直接传wx.getWindowInfo().pixelRatio也行const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: wx.getWindowInfo().pixelRatio });不过官方示例给的dpr就是初始化的第四个参数直接用它最省事。ec-canvas内部其实已经考虑到这个问题你不需要过度纠结除非你自定义过 canvas 的样式比如缩小了 canvas 的 css 大小但内部 buffer 没有放大那样就会出现模糊。4.6 性能优化懒加载和离屏渲染统计页通常不是首页但如果你在一个页面里同时放了太多图表比如 4、5 个折线图初始化全部 echarts 实例会消耗不少内存。小程序的运行环境比浏览器更苛刻尤其在低端安卓机上可能会出现页面加载卡顿、掉帧的情况。我常用的优化手段只有滚动到图表区域时才触发创建 echarts 实例。利用小程序的intersectionObserver或者简单的onPageScroll判断位置。对于不是默认展示的图表先用一个占位图等用户点击切换后再初始化。页面onHide时调用chart.clear()释放当前配置如果不小心在页面卸载后还在 setOption会报错。实际做法示例onPageScroll(e) { // 假设第二个卡片 id 是 revenueCard判断 scrollTop viewport 是否接近 if (!this.revenueChart this.revenueLoaded isInViewport) { this.initRevenueChart(); } }也可以直接用wx.createIntersectionObserverthis.observer wx.createIntersectionObserver(this); this.observer.relativeToViewport().observe(#revenueCard, (res) { if (res.intersectionRatio 0 !this.revenueChart) { this.initRevenueChart(); } });这种方式不仅优化性能还能避免页面一加载就同时渲染一堆图表导致的白屏感。5. 常见问题和排查技巧实录5.1 图表空白但代码逻辑没有问题一种非常常见的现象是setOption之后页面空白调试工具控制台也没有报错。这时首先要检查 canvas 是否被撑开宽度和高度我通常会临时在 ec-canvas 外层加一个边框测试.chart-box { border: 1px solid red; width: 100%; height: 500rpx; }如果红色边框正常显示说明容器没问题。接着看ec对象是否写对确认onInit有没有被调用。你可以在onInit里打console.log(onInit)如果没打印说明 ec-canvas 组件的初始化条件没满足大概率是ec-canvas的路径引错了或者组件目录没对上。还有一种是 canvas-id 重复。如果你有两个图表都用了同一个canvas-id第二个会覆盖第一个的绘制或者直接抛出错误。务必给每个ec-canvas设置不同的canvas-id虽然现在新版 ec-canvas 可能不强制要求唯一但规范起见还是别偷懒。5.2 真机上图表能显示但 tooltip 点了没反应这个和原生组件的触摸事件有关。旧版基础库里 canvas 的触摸事件可能不会正常冒泡到组件导致 tooltip 不跟随手指。解决办法是把 ec-canvas 组件样式里的disable-scroll设为true其实官方组件默认就有这个配置你看看自己有没有无意中覆盖。另外echarts 的tooltip.trigger设为 axis 还是 item 会影响触发区域。柱状图用 axis 时触摸柱子附近整个坐标区域都能触发提示体验更好。如果设置成 item只在柱子中心才有反应在小屏幕上很难精准点中。如果你确实遇到 tooltip 不灵敏还有一个备选方案不在统计图内做 tooltip而是监听click事件把数据展示在图表下方的自定义消息框里。这种方式虽然少了一些交互感但兼容性最好也容易控制样式。chart.on(click, (params) { this.setData({ tipText: 日期 ${params.name}订单量 ${params.value} }); });5.3 数据请求返回了但图表数据没更新排查思路分三步确认this.chart存在因为 onInit 和接口回调的时序不定。确认setOption的 option 结构是否正确尤其是 series 的数据是否为数组。确认你使用的新 option 和旧 option 的类型一致如果你从bar更新成line必须setOption(newOption, true)。我遇到过一种情况请求成功了数据也打印出来是数组但图表还是旧数据最后发现是this.setData把 chart 实例赋值给了 data 里的某个字段导致 data 被序列化时把 echarts 实例搞坏了。正确的存储方式是把 chart 实例绑定在this上而不是this.data上。因为setData是同步地把数据发送到逻辑层和视图层echarts 实例里包含大量的函数和循环引用不能也不应该被 setData。5.4 小程序包体积超过 2MBecharts 太大了echarts 的完整版echarts.js有将近 1MB再加上项目的其他代码很容易触达小程序 2MB 的主包限制。这里有一些实用的降体方案使用 echarts 的按需引入模块只打包你需要的图表类型。在小程序版 echarts 中你可以从echarts/core引入import * as echarts from ../../components/ec-canvas/echarts;如果你想自己精简 echarts需要到 echarts 官网在线定制选择 bar、line、pie 这些常用图表和必要的组件tooltip、grid、legend下载定制后的文件替换掉 ec-canvas 目录下的 echarts.js。这样可以把体积从 1MB 压到 400KB 左右。把统计页面放到分包里。小程序分包加载是一个很好的策略主包只放 tabBar 和公共内容统计页这种不常用但功能重的页面放到subpackage中用户在进入时才加载。分包方式不会减少 echarts 文件本身大小但能减少主包占用的空间。如果图表不多也可以考虑放弃 echarts使用更轻量的 uCharts它压缩之后小很多对简单图表完全够用。5.5 多个图表切换时闪烁用setOption(option, true)之后虽然是整体替换但 canvas 重新绘制时肉眼可见几毫秒的空白。这在单个图表上体验不明显但切换图表类型时就很明显。比较平滑的做法是给图表容器做一个简单的过渡动画或者先设置一个遮罩在 setOption 之后通过nextTick再移除。由于 canvas 绘制是异步的你没法精确知道绘制完成的时刻只能通过 setTimeout 或者 requestAnimationFrame 近似处理。实测下来用 wx 的wx.nextTick加上 50ms 的延时效果还可以不会很出戏。如果你不想处理这种细节还有一个简单粗暴的办法不同图表类型使用不同的 canvas 实例每次切换时只是控制它们的显示隐藏。这个办法消耗的内存多一些但稳定性最高适合图表数量少2-3 个的场景。5.6 上下滑动时图表区域卡顿页面中有长列表和图表时canvas 的重新绘制会在事件循环里占用很多资源。如果统计页是滚动页面而不是单独的全屏图表页建议把图表的animation选项设为false关闭 echarts 自带的动画。option.animation false;这样图表在 setOption 更新时不做过渡动画绘制速度更快。大多数统计场景下用户看的是数据本身动画只是个锦上添花的装饰关掉之后对体验影响不大。另外可以用chart.resize()配合页面的onResize事件来适应横竖屏切换。不过微信小程序改变窗口大小的场景很少除非你在 PC 端微信打开小程序这种需求如果有记得在 resize 里调用chart.resize()。6. 进阶技巧让统计图更贴近业务6.1 柱状图设置渐变色的正确姿势热词里多次提到“echarts柱状图设置渐变色”这个需求很常见。echarts 的itemStyle.color支持传入渐变对象但小程序里要注意写法和小程序 CSS 渐变的区别。传统 CSS 渐变是 linear-gradient(角度, 颜色1, 颜色2)而 echarts 里是对象形式itemStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: #5b8ff9 }, { offset: 1, color: #3a5fbf } ] } }其中 x、y、x2、y2 是一个相对坐标系取值范围 0 到 1。(0,0) 是左下角(1,1) 是右上角。想垂直渐变就让 x2 保持 0y2 变为 1想水平渐变就让 y2 为 0x2 为 1。我自己的习惯是柱状图垂直渐变上浅下深这样柱子显得有体积感。折线图的面积填充则反过来顶部颜色透明底部颜色深营造一种“海拔从低到高”的视觉错觉类似仪表盘的层次感。6.2 饼图中间的说明文字热词里出现的“echarts pie 中间的字”通常指的是饼图中央显示的汇总信息比如总金额、总订单数。echarts 原生并没有一个专门的“中心文字”配置需要靠title组件来模拟。一种方案是给饼图设置title.text和title.subtext并让它居中title: { text: 总营收, subtext: ¥ 23,456, left: center, top: center }, series: [ { type: pie, radius: [45%, 70%], center: [50%, 50%], data: [...] } ]这样 title 就是绝对居中显示的正好覆盖在环形饼图的中心空白区域。如果想更精确控制还可以用graphic元素或者aria组件但 title 是最省事的做法。有一个细节title 的层级默认会覆盖在 canvas 内部绘制的最上层所以看起来就是绘制在饼图中心的。但如果你在系列里设置了 label 的位置也在中心会和 title 重叠需要手动调 label 的 offset 或者不显示。6.3 横向进度条和排行榜样式业务里经常要用横向柱状图来做排行榜比如家政服务最受欢迎的服务项目排名。echarts 实现横向柱状图很简单只需把 xAxis 和 yAxis 交换。因为 category 类型的轴放在 y 轴value 类型的轴放在 x 轴xAxis: { type: value }, yAxis: { type: category, data: [保洁, 月嫂, 家电清洗, 管道疏通, 开荒保洁] }, series: [ { type: bar, data: [120, 95, 80, 60, 40], label: { show: true, position: right } } ]如果想要每个柱子的值直接显示在柱子上面或旁边echarts 的label.position设置为top只适用于纵向柱状图横向柱状图里应该用right。上面代码中已经展示。为了更像“进度条”可以给柱子设置更小的barWidth比如 10 到 16再配合渐变和圆角观感就不一样了。6.4 折线图 x 轴刻度太密怎么办当日期连续 30 天x 轴 30 个标签挤在一起会非常难看。echarts 的默认机制是自动调整间隔但有时自动算法不够聪明。你可以手动控制xAxis: { type: category, data: dates, axisLabel: { interval: 4 // 每隔 4 个刻度显示一个标签从 0 开始 } }还可以用axisLabel.interval: function(index, value) { return index % 3 0; }这种函数形式更灵活。但要注意在小程序里如果传函数函数会被序列化吗实际上官方 ec-canvas 里setOption的对象是直接传给内部的 echarts 库没有经过 setData所以可以正常使用函数。只不过如果你将 option 存到了this.data里函数无法被序列化会导致报错。所以别把包含函数的 option 放进 data。6.5 统计图周边的视觉细节真正让统计图看起来专业的地方往往不是图本身而是周边的视觉。比如图表容器和卡片背景颜色不要过度鲜艳白色或浅灰底最适合数据展示。图表的 x 轴标签和 y 轴标签字体大小建议不小于 10rpx在真机上小于 10rpx 会很难辨认。网格线用虚线透明度降低一点避免抢了数据的视觉重点。如果图表有多种系列色彩饱和度不要太高用同一色系不同深浅来区分。这些细节不需要花很多代码但体验提升非常明显。7. 我对这种方案的一点体会做了几个微信小程序的数据统计项目之后我的总体感觉是echarts 在小程序里完全够用只是接入方式比 Web 端多了一层思考。最重要的一点是理解 canvas 组件的运行机制它本质上是一个独立的原生组件没有 DOM 的概念echarts 的初始化方式也不同于 Web 端的getElementById。当你接受这个设定之后剩下的一切都是从 Web 端平移到小程序的过程并没有想象中那么难。我踩过的所有坑里最浪费时间的其实是“不知道在哪里看日志”。小程序开发工具里 canvas 类的报错有时不会明确指行号只是说某个对象找不到。后来我习惯在onInit里把参数都打印出来确认 canvas 实例和宽高是否正常再去查是否setOption调用时机不对。这种排查思路比到处搜代码更有效。最后分享一个小技巧如果你在别的项目里已经写过 echarts 图表记得把 option 的公共部分抽成一个独立的函数比如一个生成渐变色的工具函数、一个格式化 tooltip 的 helper。小程序项目和 Web 项目可以共用同一套 option 构建逻辑只是初始化部分不同。这样不管平台怎么变图表的配置和风格都能保持统一以后维护成本会低很多。