微信小程序绘制echart饼图

问题背景

小程序开发过程经常会使用到画图表的场景，本文将介绍微信小程序开发过程如何使用Echarts组件绘制饼图。

问题分析

GitHub地址： https://github.com/ecomfe/echarts-for-weixin 该项目是 Apache ECharts (incubating) 的微信小程序版本，开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。

问题解决

（1）下载GitHub仓项目，拷贝 ec-canvas 目录到我们自己项目中。 image.png （2）需要引入的页面json文件引入该组件。

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

（3）需要使用的页面wxml文件中，使用该组件

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

（4）页面对应js文件中，import ec-canvas组件并进行初始化和数据赋值。

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;
  },
})

运行结果如下所示： image.png

问题总结

本文初步介绍了微信小程序开发过程如何使用Echarts组件绘制饼图，有兴趣的同学可以进一步深入研究。