最终效果预览

实现流程

微信小程序中使用 echarts 需使用官方提供的 ec-canvas 组件

1. 下载 ec-canvas 组件

点击下方链接，下载 ec-canvas 组件
https://gitcode.net/mirrors/ecomfe/echarts-for-weixin/-/tree/master

将其中的 ec-canvas 文件夹拷贝到微信小程序的分包中

（ 因 ec-canvas 组件较大，约 1M，若放在主包中很容易超出 2M 的大小限制，不了解分包的朋友，可以参考博文 https://blog.csdn.net/weixin_41192489/article/details/130249743）

2. 引入 ec-canvas 组件

package1\\pages\\account\\statistics\\index.json

{"navigationBarTitleText": "记账统计","usingComponents": {"t-collapse": "tdesign-miniprogram/collapse/collapse","t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel","ec-canvas": "/package1/ec-canvas/ec-canvas"}
}

其中的核心代码为

    "ec-canvas": "/package1/ec-canvas/ec-canvas"

3. 页面中使用 ec-canvas 组件

package1\\pages\\account\\statistics\\index.wxml

<view class="titleBox">{{year}} 年{{month}} 月
</view>
<t-collapse value="{{activeValues}}" bind:change="cardChange"><t-collapse-panel value="{{0}}" header="收入（ 合计 {{sumIn}} 元 ）" expandIcon><view hidden="{{hideInChart}}" class="container"><ec-canvas id="mychart1" canvas-id="mychart1" ec="{{ ec }}"></ec-canvas></view></t-collapse-panel><t-collapse-panel value="{{1}}" header="支出（ 合计 {{sumOut}} 元 ）" expandIcon><view hidden="{{hideOutChart}}" class="container"><ec-canvas id="mychart2" canvas-id="mychart2" ec="{{ ec }}"></ec-canvas></view></t-collapse-panel>
</t-collapse>

核心代码为

<ec-canvas id="mychart1" canvas-id="mychart1" ec="{{ ec }}"></ec-canvas>

此范例为一个页面渲染多个图表，需留意每个组件需有不同的 id

      <ec-canvas id="mychart2" canvas-id="mychart2" ec="{{ ec }}"></ec-canvas>

4. 添加必要的 css

ec-canvas 组件默认没有尺寸，需手动添加必要的 css，才能显示。

package1\\pages\\account\\statistics\\index.wxss

.container {position: relative;width: 98%;height: 500rpx;margin: 0rpx auto;
}ec-canvas {position: relative;width: 300rpx;height: 400rpx;
}.titleBox {font-weight: bold;padding-top: 30rpx;font-size: 40rpx;text-align: center;
}

5. 获取数据，渲染图表

package1\\pages\\account\\statistics\\index.js

import * as echarts from '../../../ec-canvas/echarts';Page({data: {// 数据列表dataList: [],// 是否隐藏收入图表hideInChart: false,// 是否隐藏支出图表hideOutChart: false,// 折叠卡片的值activeValues: [0, 1],// 图表配置ec: {// 图表懒加载的必要参数lazyLoad: true},// 收入类型inTypeList: ['工资', '兼职', '理财', '其他收入'],// 支出类型outTypeList: ['衣', '食', '住', '行', '娱', '医', '学', '其他支出']},// 折叠卡片切换cardChange(e) {this.setData({activeValues: e.detail.value,});this.updateData()},// 更新数据状态（控制图表的显隐）updateData() {let {activeValues} = this.datathis.setData({hideInChart: !activeValues.includes(0),hideOutChart: !activeValues.includes(1)})},// 分类统计收入数据getInResult(dataList) {let {inTypeList} = this.datalet inResultDic = {}dataList.forEach(item => {inTypeList.forEach(type => {if (!inResultDic[type]) {inResultDic[type] = 0}if (item.type === type) {inResultDic[type] += item.money}})})let yDataList = []inTypeList.forEach(type => {yDataList.push(inResultDic[type] || 0)})this.drawChart(this.ecComponent1, inTypeList, yDataList)},// 分类统计支出数据getOutResult(dataList) {let {outTypeList} = this.datalet outResultDic = {}dataList.forEach(item => {outTypeList.forEach(type => {if (!outResultDic[type]) {outResultDic[type] = 0}if (item.type === type) {outResultDic[type] += item.money}})})let yDataList = []outTypeList.forEach(type => {yDataList.push(outResultDic[type] || 0)})// 因页面宽度有限，删除支出二字outTypeList[7] = '其他'this.drawChart(this.ecComponent2, outTypeList, yDataList)},onLoad() {let that = this// 接收传入的复杂数据const eventChannel = this.getOpenerEventChannel()eventChannel.on('sendData', function (res) {let {sumIn,sumOut,sumResult,year,month,dataList} = resthat.setData({sumIn,sumOut,// 月结余balance: sumResult,year,month,dataList})that.ecComponent1 = that.selectComponent('#mychart1');that.ecComponent2 = that.selectComponent('#mychart2');that.getInResult(dataList)that.getOutResult(dataList)})},// 绘制图表drawChart(ecComponent, xDataList, yDataList) {ecComponent.init((canvas, width, height, dpr) => {// 获取组件的 canvas、width、height 后的回调函数// 在这里初始化图表const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr});this.setOption(chart, xDataList, yDataList);// 注意这里一定要返回 chart 实例，否则会影响事件处理等return chart;});},// 柱状图配置setOption(chart, xDataList, yDataList) {let option = {xAxis: {type: 'category',data: xDataList},yAxis: {type: 'value'},series: [{data: yDataList,type: 'bar',label: {show: true,position: "top"}}]}chart.setOption(option);}
})

核心代码解析

• 导入 echarts

import * as echarts from '../../../ec-canvas/echarts';

• 获取页面图表节点

that.ecComponent1 = that.selectComponent('#mychart1');

• 绘制图表

  // 绘制图表drawChart(ecComponent, xDataList, yDataList) {ecComponent.init((canvas, width, height, dpr) => {// 获取组件的 canvas、width、height 后的回调函数// 在这里初始化图表const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr});this.setOption(chart, xDataList, yDataList);// 注意这里一定要返回 chart 实例，否则会影响事件处理等return chart;});},

• 添加图表配置

  setOption(chart, xDataList, yDataList) {let option = {xAxis: {type: 'category',data: xDataList},yAxis: {type: 'value'},series: [{data: yDataList,type: 'bar',label: {show: true,position: "top"}}]}chart.setOption(option);}

想绘制其他类型的图表，参考 echarts 官网修改此配置即可
https://echarts.apache.org/examples/zh/index.html