微信小程序使用echarts

前期准备：
1.echarts提供了一个微信小程序原生组件，下载地址：ecomfe/echarts-for-weixin ，拿到 ec-canvas 文件夹
2. 到 echarts官网 在线定制组件包

注意：版本一定要和 ec-canvas 相同

3.将下载的 echarts.min.js 替换掉原本的 echarts.js ，小程序文件过大影响发布
4.引入

ec-canvas.json

{
  "component": true,
  "usingComponents": {
    "ec-canvas":"../ec-canvas/ec-canvas"
  }
}

ec-canvas.wxml

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

注意：记得给容器设置宽高，否则会出现空白

ec-canvas.js

import * as echarts from '../../components/ec-canvas/echarts.min'
Page({
  data: {
    ec: {
      lazyLoad: true
    },
  },
  onReady: function () {
    // 手动获取到echart节点
    this.compBar = this.selectComponent('#mychart-dom-bar')
    this.loadData()
  },
  loadData: function () {
    api.getData().then(res => {
      // 数据处理
      const opts = {
        // ...
      }

      if (this.chartBar) {
        this.chartBar.setOption(opts)
      } else {
        this.initBar(opts)
      }

    })
  },
  initBar: function (option) {
    if(!this.compBar){
      this.compBar = this.selectComponent('#mychart-dom-bar')
    }
    this.compBar.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
      });

      chart.setOption(option)

      this.chartBar = chart
      return chart
    })
  },
});

如果需要复用，可以封装成组件

my-ec-canvas.wxml

<view class="my-ec-container">
  <ec-canvas id="{{chartId}}" canvas-id="{{canvasId}}" ec="{{ec}}"></ec-canvas>
</view>

my-ec-canvas.js

import * as echarts from '../../components/ec-canvas/echarts.min'

Component({
  properties: {
    chartId: {
      type: String,
      value: null
    },
    canvasId: {
      type: String,
      value: null
    },
    chartOpts: {
      type: Object,
      value: {}
    }
  },
  data: {
    ec: {
      lazyLoad: true
    }
  },
  
  methods: {
    initChart(options) {
      if(!this.chartComp){
        this.chartComp = this.selectComponent(`#${this.properties.chartId}`)
      }
      this.chartComp && this.chartComp.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        })
        chart.setOption(options)
        this.chart = chart
        return chart
      })
    }
  },

  observers: {
    'chartOpts': function (opts) {
      if (this.chart) {
        this.chart.setOption(opts)
      } else {
        this.initChart(opts)
      }
    }
  }
})

使用组件，传入 id，options 配置即可

<my-ec-canvas chartId="{{chartDomId}}" canvas-id="{{canvasId}}" chartOpts="{{optionsData}}"></my-ec-canvas>

参考文章：https://juejin.cn/post/6994742503207337991