Wechat applet draws echart pie chart

problem background

The scene of drawing charts is often used in the development process of small programs. This article will introduce how to use the Echarts component to draw pie charts in the development process of WeChat small programs.

problem analysis

GitHub address: https://github.com/ecomfe/echarts-for-weixin
This project is the WeChat applet version of Apache ECharts (incubating). Developers can quickly develop charts through familiar ECharts configuration methods to meet various visualization requirements need.

problem solved

(1) Download the GitHub warehouse project and copy the ec-canvas directory to our own project.
insert image description here

(2) The page json file that needs to be imported imports this component.

  "usingComponents": {
    "custom-tab-bar": "/custom-tab-bar",
    "ec-canvas": "../../component/ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "分类列表",
  "navigationStyle": "custom",
  "enablePullDownRefresh": true
}

(3) In the page wxml file that needs to be used, use this component

    <ec-canvas force-use-old-canvas="true" type="2d" style="width: 300rpx; height: 300rpx;" id="mychart-pie" ec="{
   
   { ec }}">
    </ec-canvas>

(4) In the js file corresponding to the page, import the ec-canvas component and perform initialization and data assignment.

import * as echarts from '../../component/ec-canvas/echarts';
const util = require('../../utils/util')

const app = getApp();

// pages/healdata/healthydata.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    ...
    ec: {
      lazyLoad: true
    },
    tagList: [{
      value: 55,
    }, {
      value: 20,
    }, {
      value: 10,
    }, {
      value: 20,
    }, {
      value: 38,
    }]
    ,
    ...
  },

  onLoad: function () {
    ...
    this.echartsComponnet = this.selectComponent('#mychart-pie'); 
  },



   //初始化图表
   init_echarts() {
    if (this.echartsComponnet) {
      console.log('init_echarts this.echartsComponnet')
      this.echartsComponnet.init((canvas, width, height, dpr) => {
        // 初始化图表
        let chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        this.setOption(chart);
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    }
  },
  setOption: function (Chart) {
    Chart.clear(); // 清除
    Chart.setOption(this.getOption()); //获取新数据
  },
  getOption: function () {
    var that = this;
    var option = {
      // title: {
      //   text: '存量客户分布',
      //   x: 'center',
      //   textStyle: {
      //     fontSize: 14,
      //     fontWeight: 'normal',
      //   },
      // },
      tooltip: {
        show: true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      calculable: true,
      // legend: {
      //   bottom: 0,
      //   data: that.data.tagList,
      //   icon: 'circle',
      //   itemWidth: 10,
      //   itemHeight: 10
      // },
      color: ["#108ee9", "#ff9900", "#10cfc8"],
      series: [{
        type: 'pie',
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          formatter: "{c} ({d}%)"
        },
        center: ['50%', '45%'],
        radius: ['50%', '90%'],
        data: that.data.tagList,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inner',
              formatter: "{d}%"
            },
            labelLine: {
              show: false
            }
          },
        },
      }]
    };
    return option;
  },
})

The running results are as follows:
insert image description here

conclusion of issue

This article initially introduces how to use Echarts components to draw pie charts in the development process of WeChat applets. Interested students can further study in depth.