在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的代码抽离成wepycomponent,这个工作已经有人做了,可以去这里看看

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事件,以完成渲染:
这里写图片描述

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

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页