微信小程序中使用ECharts方法

官网中介绍到：为了兼容小程序 Canvas，微信小程序提供了一个小程序的组件，echarts-for-weixin用这种方式可以方便地使用 ECharts。

进入github下载

下载完项目后把文件中ec-canvas文件，放到你的小程序的page目录下，或者你的components组件文件夹下，将echarts.js引入到你需要展示图表的.json文件，如果希望减小包体积大小， 可以使用自定义构建生成并替换掉你文件内 echarts.js；

在需要展示图表的文件夹对应的.json文件内引入echarts.js，如下：

//例如你的页面名叫myEcharts,需在myEcharts.json中配置，如下：
{
  "usingComponents": {
    "ec-canvas": "../../../components/ec-canvas/ec-canvas"
  },
}

在myEcharts.wxml使用，如下：

<view>
     <!--ec是组件对象，对应着js文件里data的ec，canvas需要给一个宽度、高度-->
	 <ec-canvas id="mychart-dom-bar" class="myCanvas" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
</view>

在myEcharts.wxss中加入宽高：

.myCanvas canvas{
  width: 100%;
  height: 300rpx!important;
}

在myEcharts.js中写法，如下：

import * as echarts from "../../components/ec-canvas/echarts.js"; //这个是ec-canvas 目录下的 echarts.js
// 获取应用实例
const app = getApp()
let chart = null;

function setOption(chart) {
  var option = {
    legend: {
      // Try 'horizontal'
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    dataset: {
      source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
      ]
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {},
    series: [{
      type: 'bar'
    }, {
      type: 'bar'
    }, {
      type: 'bar'
    }]
  }
  chart.setOption(option);
  return chart;
}
Component({
  data: {
    ec: {
      lazyLoad: true,
    },
  },
  lifetimes: {
    ready() {
      this.initpie();
    }
  },
  methods: {
    initpie: function () {
      let ecComponent = this.selectComponent('#mychart-dom-bar');
      ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        setOption(chart);
        return chart;
      });
    },
  },
});