echarts图表在微信小程序中的使用

首先，如果是未使用过 echarts 或对其不熟悉的开发者，建议先看看 echarts 的 官方文档，主要对 echarts 的配置项和 api 的作用有个基本了解。

其次，echarts 在网页中的使用和在小程序中的使用略有差别，此处有一个不错的 demo，可作为参考。不过这个 demo 的问题在于数据是初始化时直接写入的固定数据，而我们在实际开发中必须先请求接口、获取数据，再初始化图表；如果在这个页面中有相关操作会改变页面数据，必须重新初始化图表才会使其刷新。最后得到效果图如下：

在我的相关项目中，代码如下：

<view class='container'>
  <ec-canvas wx:if="{{visible}}" id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>

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

let colorData = [],
  legendData = [],
  seriesData = [];
let chart = null;//拿出来作为全局变量
// 此函数控制图表的属性、参数等，改变其中参数，会让图表刷新
function setOption(chart) {
  let option = {
    backgroundColor: "#ffffff",
    color: colorData,
    legend: {               // 标注
      left: 'left',
      bottom: 'bottom',
      data: legendData,
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: "{b} \n {c} : {d}%"
    },
    series: [{
      label: {
        normal: {
          fontSize: 13
        }
      },
      name: '利润比例',
      type: 'pie',
      center: ['50%', '50%'],
      radius: [0, '70%'],
      data: seriesData,
      itemStyle: {
        normal: {
          label: {
            show: false   //隐藏标示文字
          },
          labelLine: {
            show: false   //隐藏标示线
          }
        },
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 2, 2, 0.3)'
        }
      }
    }]
  };
  chart.setOption(option);
}

Page({
  data: {
    ec: {
      lazyLoad: true    // 延时加载
    },
    visible: true,
    ecComponent: ''
  },
  onLoad(options) {
    this.getDataByType()
  },
  onReady() {
    // 获取组件
    this.ecComponent = this.selectComponent('#mychart-dom-pie');
  },
  getDataByType() {
    let { Date1 = '', Date2 = '', DepartId = '', BuyerId = '', Ywy = '', OperatorId = '', ResoureTypeId = '' } = this.data;
    let param = {
        Date1,                                  //开始日期[必要]
        Date2,                                  //结束日期[必要]
        DepartId,                                 //部门Id[非必要]
        BuyerId,                                  //客户Id[非必要]
        Ywy,                                  //业务员Id[非必要]
        OperatorId,                                 //计调Id[非必要]
        ResoureTypeId                               //资源类型Id[必要]2:酒店,(3,4):导服,3:国内导服,4:国际导服,5:其它业务
      }
    util.TC._postAjaxPro('Stat/Profit.aspx', {
      UserId: wx.getStorageSync('LOGIN_DATA').UserId,
      ComId: wx.getStorageSync('LOGIN_DATA').ComId,
      Action: 'StatByOperator',
      Param: JSON.stringify(param)
    })
      .then((res) => {
        this.setData({
          detailData: res.Data
        }, () => {
          this.setPieChart()
        })
      })
      .catch((err) => {
        util.TC._toast(err.data.Msg, 'none')
      })
  },
  // 通过计算得到图表需要的数据，作为参数传入
  setPieChart() {
    let { detailData } = this.data
    for (let item of detailData) {
      let name = 'T_OperatorId'
      let value = 'Profit'
      legendData.push(item[name])
      seriesData.push({
        value: item[value],
        name: item[name]
      })
      colorData.push(this.setColor())
    }
    this.init()
  },
  // 初始化图表，第一次加载时必须有这一步，但后面如果数据发生改变，只改变 setOption() 函数就可刷新图表，因为图表的属性参数等都在其中控制
  init() {
    this.ecComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setOption(chart);
      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;
      this.setData({
        visible: true
      });
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  // 生成随机颜色
  setColor() {
    let colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
    let colorArray = colorValue.split(',')
    let color = "#";
    for (let i = 0; i < 6; i++) {
      color += colorArray[Math.floor(Math.random() * 16)];
    }
    return color;
  }
})

在以上 js 代码中，有很多的注释，思路也在其中。在此总结一下就是：初始时设置 lazyload 延时加载，在 onReady 中绑定到 ec-canvas 组件上，在 onLoad 中调用相关函数请求数据，请求到数据后调用处理数据函数得到图表 options 中需要的参数数据，调用 init() 初始化图表。如果还有改变数据的操作，改变数据后调用 setOptions() 函数或重新 init() 初始化都和刷新图表，over。