【微信小程序-原生开发】实用教程22 - 绘制图表（引入 echarts，含图表的懒加载-获取到数据后再渲染图表，多图表加载等技巧）

最终效果预览

实现流程

微信小程序中使用 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.data
    this.setData({
      hideInChart: !activeValues.includes(0),
      hideOutChart: !activeValues.includes(1)
    })
  },
  // 分类统计收入数据
  getInResult(dataList) {
    let {
      inTypeList
    } = this.data

    let 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.data

    let 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
      } = res
      that.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