在wepy框架中使用echarts

echarts-for-wexin目前提供的方式是在原生小程序中的使用，直接将其中的ec-canvas作为组件在wepy的页面中使用可能会出现问题，并不能达到渲染的效果
(具体使用可以到我的这个github项目中查看，页面路径为pages/charts，使用到的相关文件也可直接复制项目中的)

我最开始的使用方式是这样的：

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

<script>
import wepy from 'wepy'
import echarts from './ec-canvas/echarts.js'

export default class LineChart extends wepy.page {
  config = {
    navigationBarTitleText: 'Charts',
    usingComponents: {
      ec_canvas: '../components/charts/ec-canvas/ec-canvas'
    }
  }
  
  data = {
    ec: {
        onInit: this.initChart
    }
  }

  initChart(canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    })
    canvas.setChart(chart)

    const option = {
      // 和平时使用echarts的option一样
    }

    chart.setOption(option)
    return chart
  }
}
</script>

<style lang='less'>
  .line__chart {
    width: 700rpx;
    height: 600rpx;
    margin: 0 auto;
  }
</style>

简单看下，似乎并没有什么问题，和原生实现方式基本一致，只是以wepy的方式存放ec对象和initChart函数，但是却不能够成功，为什么呢？根据ec-canvas组件的源码，它会调用initChart函数来渲染图表，这里我们是放置到ec对象的onInit属性的，如果你测试一下，会发现等到执行时ec-canvas调用的ec是个空对象{}，也就是说没有onInit函数让它去渲染图表，这又是为什么呢？我们明明传了的呀，据wepy的维护者所说，在wepy里面初始化data的数据时调用了setData主动设置了下data的数据，这样刚好会命中官方小程序的一个bug，他也写了一段代码来对此进行验证，可以去这里看看

看了github issue下面的讨论后，差不多有三种解决方式：

1、将ec-canvas的代码抽离成wepy的component，这个工作已经有人做了，可以去这里看看

2、第二种方式是wepy框架的维护者提供的，针对我上面所贴的使用方式，会对ec-canvas的代码进行一些修改，具体的修改可以直接到这里查看，已作为PR提到了github仓库（该PR已经合并，发布该篇文章时需要手动修改文件，目前只需直接去官方仓库下载最新文件，原文内容我不作变动，作为寻找解决方案的一次记录）

假如你修改完成，就可以进行使用了：

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

<script>
import wepy from 'wepy'
import echarts from './ec-canvas/echarts.js'

export default class LineChart extends wepy.page {
  config = {
    navigationBarTitleText: 'Charts',
    usingComponents: {
      ec_canvas: '../components/charts/ec-canvas/ec-canvas'
    }
  }
  
  data = {
    ec: {}
  }

  methods = {
    echartInit (e) {
      this.initChart(e.detail.canvas, e.detail.width, e.detail.height)
    }
  }

  initChart(canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    })
    canvas.setChart(chart)

    const option = {
    }

    chart.setOption(option)
    return chart
  }
}
</script>

<style lang='less'>
  .line__chart {
    width: 700rpx;
    height: 600rpx;
    margin: 0 auto;
  }
</style>

可以看到和最开始那段代码基本没有什么区别，只是将ec对象中的onInit直接绑定到一个事件上，并且传递的ec对象也是空的(既然传过去也是空的，那就给它个空的呗)，让init事件去渲染图表，仔细看下对ec-canvas组件的源码修改也很简单，就是多加了个判断：

判断ec对象里的onInit函数到底是否为函数类型，如果不是我就主动去调用init事件，以完成渲染：

3. 第三种最简单：直接在小程序原生组件中使用，然后在wepy中引用这个原生组件即可，使用方法和官方仓库的案例差不多，只不过是将page的写法换成component而已，这里就不过多描述了，可以到上面贴的我的github项目中查看具体用法~~

---

如果有发现错误，请留言告诉我~~~