uniapp开发小程序引入echart碰到的问题

1. 在微信中使用echarts

1. 根据echarts-for-weixin 项目提供了一个小程序组件，可以使用echarts。
2. 在项目中，只需要保留ec-canvas文件夹。
3. 根据官方文档可知，可以使用自定义构建生成echarts.js去替换ec-canvas/echarts.js文件，从而减少打包体积。
4. 注意基础库版本需要>= 2.9.0。

2. 将echarts-for-weixin项目改造成uniapp版本

echarts-for-weixin 项目提供了一个小程序组件，主要文件如下：

将其改造成vue2版本的代码如下：

ec-canvas.vue文件如下：

wx-canvas.js文件如下：

自定义的my-chart组件如下：

注意ec.onInit方法去初始化canvas无效。

tooltip相关

不支持<br/>换行

• renderMode设置为richText
• 不用<br />标签换行，改用换行符合\n

tooltip: {
  show: true,
  trigger: 'axis',
  renderMode: 'richText',
  formatter: '9月{b0}日 \n{a0}：{c0}\n {a1}：{c1}'
},

点击后tooltip不消失

通过鼠标事件或者点击事件结合dispatchAction方法去控制

// chart 为echarts实例

// 点击事件
chart.getZr().on('click', () => {
    setTimeout(() => {
      this.hideToolTip()
    }, 1500)
})

// 鼠标事件
chart.getZr().on('mouseup', () => {
    this.hideToolTip()
})


// 关闭tooltip
hideToolTip() {
  chart.dispatchAction({
    type: 'hideTip'
  })
},