在wepy框架中使用echarts

echarts-for-wexin目前提供的方式是在原生小程序中的使用,直接将其中的ec-canvas作为组件在wepy的页面中使用可能会出现问题,并不能达到渲染的效果

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

<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仓库,只是还没有合并

假如你修改完成,就可以进行使用了:

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


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

版权声明:本文为juzipidemimi原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/juzipidemimi/article/details/81807110

智能推荐

2018.8.27

2018.8.27...

HTML 表单元素的基本样式

HTML 表单元素的基本样式 原创 ixygj197875 发布于2018-02-22 17:48:53 阅读数 2296 收藏 更新于2018-05-20 15:35:58 分类专栏: 揭秘 CSS 揭秘 CSS 收起 表单元素主要包括 label、input、textarea、select、datalist、******、progress、meter、output等,以及对表单元素进行分组的 ...

php输出语句

php输出语句 常见的输出语句 echo(): 可以一次输出多个值,多个值之间用逗号分隔。echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用。 print(): 函数print()打印一个值(它的参数),如果字符串成功显示则返回true,否则返回false。 print_r(): 可以把字符串和数字简单地打印出来,而数组则以括起来的键和值...

工厂模式

简介 常见的实例化对象模式。 用工厂方法替代new操作的一种模式。 当我们使用new操作实例化对象时,调用构造函数完成初始化。若初始化仅是进行赋值等简单的操作,写入构造函数即可。但如果初始化时需要执行一长串复杂的代码,将多个工作装入一个方法,是不妥的。 创建实例与使用实例分离。将创建实例所需的大量初始化工作从基类的构造函数中分离出去。 简单工厂模式、工厂方法模式针对的是一个产品等级结构;而抽象工厂...

B1105 Spiral Matrix (画图)

B1105 Spiral Matrix (25分) //第一次只拿了21分 矩阵的长和宽,求最大因子,从sqrt(num)开始枚举. 每次循环一次,s++,t--,d--,r++ 测试点四运行超时,是因为输入一个数字的时候,需要直接输出这个数字。//1分 测试点二运行超时,最后一个数字不必再while循环一次,直接输出即可。//3分 最后一个测试点卡了好久/(ㄒoㄒ)/~~ 螺旋矩阵...

猜你喜欢

Java基础=>String,StringBuffer与StringBuilder的区别

字符串常量池 什么是字符串常量池? JVM为了减少字符串对象的重复创建,其维护了一块特殊的内存,这段内存被称为字符串常量池(存储在方法区中)。 具体实现 当代码中出现字符串时,JVM首先会对其进行检查。 如果字符串常量池中存在相同内容的字符串对象,如果有,则不再创建,直接返回这个对象的地址返回。 如果字符串常量池中不存在相同内容的字符串对象,则创建一个新的字符串对象并放入常量池,并返回新创建的字符...

java调用其他java项目的Https接口

项目中是这样的: 用户拿出二维码展示,让机器识别二维码, 机器调用开门的后台系统接口, 然后开门的后台系统接口需要调用管理系统的接口, 管理系统需要判断能不能开门.这两个系统是互相独立的.当时使用http调用是没有问题的.当时后来要求必须用https.废话不说,直接代码: 我的项目中调用的是 HttpsUtils.Get(utlStr) 这个接口 开门系统接口如下图:   管理系统的接口...

Hadoop1.2.1全分布式模式配置

一 集群规划 主机名            IP                               安装的软件 &nbs...

Go语言gin框架的安装

尝试安装了一下gin,把遇到的一些小问题来记录一下 安装步骤 首先来看看官方文档,链接点这里 可以看到安装步骤很简单,就一句话 在命令行中输入这句话运行等待就好。 问题来了,因为墙的问题,go get会很慢,所以命令行里面半天什么反应也没有,不要急,慢慢等着就会看到gin-gonic/gin这个目录出现 这个时候命令行还是没有结束,表示还在下一些东西。有的时候可能心急的人就停了(比如我),然后写个...

uni-app表单组件二

input(输入框) 属性名 类型 说明 平台差异 value String 输入框的初始内容 type String input 的类型 password Boolean(默认false) 是否是密码类型 placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class Strin...