echarts for wechat

最基本实现

目录结构，需要ec-canvas文件夹，然后在chart.js中引入

chart.js:

1. js中的Page data中的内容返回给wxml，让其显示
2. initChart中let option 以上是固定的内容
3. let option填的是具体的数据，x轴、y轴还有数值（可以option提取出来写一个方法）
4. chart.setOption，将数据融入到chart中最后再返回chart

import * as echarts from '../../ec-canvas/echarts';

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'bar'
    }]
  };

  chart.setOption(option);
  return chart;
}

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

<view class="container">
  <view class="my-chart">
    <ec-canvas id="mychart-dom-recite" canvas-id="mychart-recite" ec="{{ec}}"></ec-canvas>
  </view>
</view>

延迟加载

与最基本有什么差异呢？

1. data数据变了，因为要延迟加载，不再是直接将数据用来传递
2. onLoad中两行代码，一是通过id获取wxml的组件，二是调用接下来写的init方法，其实就是将原本的init包装了一下
3. init
   a. 用到了上面id获取wxml的组件，然后再用组基本的init方法
   b. 和最基本说的一样，只不过将option提取了出来，并且执行了chart.setOption()
   c. this.chart = chart

到时候可以在onLoad中执行init前调用接口获取数据，传递进去，再展示

import * as echarts from '../../ec-canvas/echarts';

Page({
  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    }
  },
  onLoad: function () {
    // 获取组件
    this.ecComponent = this.selectComponent('#mychart-dom-recite');
    this.init();
  },

  // 点击按钮后初始化图表
  init() {
    this.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      setOption(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数中访问
      this.chart = chart;

      return chart;
    });
  }
});

function setOption(chart) {
  let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'bar'
    }]
  };
  chart.setOption(option);
}

接口调用后端数据

调用数据后，传值给init，然后再传到option里，赋值给data就行了
option中也有多种参数，不太懂先用着几个
注意：调用接口的方法是自己封装的，不需要管，只要将需要的数据传入给init就行了。然后下面代码的形参名为p
xAxis和series的data都用到了。可以按自己的需求来输入数据

let option = {
    title:{
      text: '打卡情况',
      left: 'center'
    },
    legend: {
      data: ['测新', '测旧'],
      bottom: 20,
      left: 'center',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: p.time
    },
    yAxis: {
        type: 'value'
    },
    series: [
      {
        name: '测新',
        smooth: true,
        data: p.newNum,
        type: 'bar'
      },
      {
        name: '测旧',
        smooth: true,
        data: p.oldNum,
        type: 'bar'
      }
    ]
  };