wepy || taro 完美解决使用echart方法

下面代码为wepy案例，taro有所不同，区别在获取ec_canvas方法上。

1、wepy与小程序大致相同，只不过调用的是this.$wxpage.selectComponent('#mychart-dom-bar')方法，注意是this.$wxpage

2、taro则可以通过ref绑定后获取，具体可百度，有详细案例

<template>

  <view class="container">

    <ec_canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" bind:init="echartInit"></ec_canvas>

  </view>

</template>

<script>

  import wepy from 'wepy'

  // 引入echarts.js 

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

// 申明一个变量，方便后续echarts绑定

var chartBox = null 

  export default class Example extends wepy.page {

    config = {

      navigationBarTitleText: '',

     // 申明组件

      usingComponents: {

        ec_canvas: '../components/ec-canvas/ec-canvas'

      }

    }

    data = {

      ec: {

        // 默认，无需更改

        onInit: null,

        lazyLoad: true

      },

      title: 'zhou'

    }

    methods = {

      echartInit(e) {

      // 必填，无需更改

        this.initChart(e.detail.canvas, e.detail.width, e.detail.height)

      }

    }

    async onLoad() {

    // 动态修改data属性后必须调用this.$apply()方法，否则页面不会刷新

      this.title = 'sjkdf'

      this.$apply()

     //  重点，获取echarts组件后进行  intBar()  初始化， 可以在ajax后进行初始化，就能将进行动态改变数据了

      chartBox = await this.$wxpage.selectComponent('#mychart-dom-bar')

      this.initBar()

    }

    initBar() {

      // 初始化雷达图表

      chartBox.init((canvas, width, height) => {

        const barChart = echarts.init(canvas, null, {

          width: width,

          height: height

        })

        barChart.setOption(this.initChart())

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

        return barChart

      })

    }

    initChart() {

      const option = {

将data里的值绑定给echarts属性上

    title: this.title

        // echarts配置 ，  与接收data绑定

      }

      return option

    }

  }

</script>