微信小程序使用echarts

这周做的项目需要在小程序上画一个折线图和一个柱状图，之前用的插件有些旧了，尺寸只能使用px，在小程序上可以说是非常致命了，找了一下发现echarts居然有小程序版本，当场决定换个轮子
github地址：ecomfe/echarts-for-weixin
这是一个小程序的组件，帮我们兼容了小程序的canvas，使得我们可以方便的在小程序上使用echarts，
echarts自然不用多说，涵盖了各种类型的图表，高度的可自定化，可以说是数据可视化的标配解决方案了

下载

首先下载该项目，文件路径如下

其中ec-canvas是这个组件，其他的代码是一个完整的实例小程序，可以直接跑，也可以参考一下实例代码，安装的话，把ec-canvas文件夹拷贝到自己的项目内，然后当做一个自定义组件使用就可以了
要注意ec-canvas目录下有一个echarts.js文件，这个是echarts的代码，这里推荐去echarts官网自己整理一个项目中要用的来替换调，以减少代码体积
echarts的定制网址
将自己要用的东西打包成一个js文件来替换掉原本的echarts.js

使用

首先在json中像使用其他组件一样将它引入

{
  "usingComponents": {
    "ec-canvas": "/components/ec-canvas/ec-canvas"
  }
}

然后在页面中使用该组件
这里要注意一定要用一个有宽高的盒子将它包起来，确保它在初始化时候可以获取到宽高

<view class="{{showChart?'bt_2p-chart':'bt_2p-chart hidden'}}">
	<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

组件的ec是一个在js中定义的对象，它是图表可以在加载时被设置

import * as echarts from '../../components/ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

将option信息完整的填写后，就可以在页面上画出一个图表了
option的设置完全遵从echarts的设置，我们可以和配置echarts一样配置它
当然现在的图表还不能使用，数据是写死在option中的，实际项目中肯定需要从接口获取，需要图表在数据返回后再生成，这里可以参考实例代码里的pages/lazyLoad，展示了如何获取数据后再初始化图表

具体步骤如下
首先要在ec中增加lazyload字段，将 lazyLoad 设为 true 后，就需要手动初始化图表了

  data: {
  	...
    ec: {
      // 手动初始化图表
      lazyLoad: true
    }

然后获取页面上图表的dom节点

  onReady: function () {
    // 获取组件
    this.ecComponent = this.selectComponent('#mychart-dom-bar');
  },

在数据返回后，再初始化图表即可

(){
// callback
    this.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      const option = {
		...
      }
	  chart.setOption(option)
      // 将图表实例绑定到 this 上，可以在其他成员函数中访问
      this.chart = chart;

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
}

这样就可以达到获取数据后再初始化图表的效果了
下面贴上完整代码
要注意如果图表的dom节点可能会被wx:if隐藏的话，一定要确保在selectComponent的时候是展示的，否则会获取到null

  // 生成图表,如果是7天则传入最近7天的Categories,不是则不用传,固定使用24小时的Categories
  // 数据返回后调用该方法即可
  // DONE 更新为echarts for weixin  https://github.com/ecomfe/echarts-for-weixin
  createCharts(data, sevenDayCategories) {
    // 先隐藏图表缺省页,使图表的dom节点可以被获取
    this.setData({
      emptyCharts: false
    })
    // 再获取页面的图表dom节点
    const ecComponent = this.selectComponent('#mychart-dom-line');
    // 遍历数据,生成图表数据,顺便判断图表是否为空,为空则直接设置为缺省页
    let series = []
    let option = []
    if (JSON.stringify(data) == "{}") {
      chartsData.push({
        name: '首页',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        format: function (val) {
          return val
        }
      })
    } else {
      let emptyCharts = true
      for (let key in data) {
        option.push(key)
        let arr = []
        for (let hour in data[key]) {
          arr[hour] = data[key][hour]
          if (data[key][hour] != 0) emptyCharts = false
        }
        series.push({
          name: key,
          type: 'line',
          smooth: true,
          data: arr
        })
      }
      if (emptyCharts) {
        this.setData({
          emptyCharts: true
        })
        return
      }
    }
    ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      const option = {
        color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
        legend: {
          data: option,
          left: 'center',
          z: 100
        },
        minInterval: 1,
        grid: {
          containLabel: true,
          bottom: 0,
          top: '20%',
          left: "5%",
          right: "5%"
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          formatter: function (params) {
            let str = `${params[0].axisValue}\n`
            for (let i = 0; i < params.length; i++) {
              if (i == params.length - 1) {
                str += params[i].seriesName + ':' + params[i].value
              } else {
                str += params[i].seriesName + ':' + params[i].value + '\n'
              }
            }
            return str
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: sevenDayCategories ? sevenDayCategories : ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: series
      };
      chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    })


  },

完整的图表效果如下
x轴为小时的图表

x轴为天的图表

数据都为空的缺省