uniapp 微信小程序使用echarts

本文目的：通过分包的方式，尽可能在微信小程序中使用最新的echarts。
当然你也可以直接使用现成的uchart或者市场里别人封好的echarts.

• 准备工作
  • 下载echarts-for-weixin源码。
    • 复制ec-canvas文件夹以及下属文件，在uniapp项目中与pages同级的地方创建wxcomponents文件夹，将复制的文件夹放于该文件夹下。wxcomponents文件名不可更改,参考：Uniapp小程序自定义组件支持
    • 修改pages.json文件，往globalStyle中添加"usingComponents": {"ec-canvas": "/wxcomponents/ec-canvas/ec-canvas"}。
    • 跑一下项目，这样会在ec-canvas下生成一个ec-canvas.vue，我自己试过来跑在浏览器上(h5)会生成，直接跑微信小程序不会生成。
    • 因ec-canvas下已经包含echarts文件，但版本可能不是最新的，想换新的可以去echarts github下载，至此准备工作完成。
• 修改ec-canvas.vue中的代码
  • 替换两个canvas标签中所绑定的事件,视methods中的方法名而定
    • @touchstart=“touchStart”
    • @touchmove=“touchMove”
    • @touchend=“touchEnd”
  • 去除import上的两行代码:global['__wxVueOptions'] = {components:{}}和global['__wxRoute'] = 'ec-canvas/ec-canvas'
  • 确保echart.js文件的路径与名称是否引用正确,下载过来没改名可能是echarts.min.js
  • 将export default global['__wxComponents']['ec-canvas/ec-canvas']改为export default {},然后将Component中的键按Vue的原本语法一一复制:
    • properties => props, 其中的value改为default
    • data => data() { return {} }
    • ready => mounted() {}
    • methods => 直接复制即可
    • compareVersion和wrapTouch这两个方法至于export default上即可,无需放在methods中
  • 给methods的init方法加上async,在if (isUseNewCanvas)上加上await this.$nextTick()，否则具体的init方法中获取node会变成null。
  • 在当前文件搜索this.data替换为this.
  • 在当前文件搜索setData,将唯一一条this.setData({ isUseNewCanvas })改为this.isUseNewCanvas = isUseNewCanvas
  • 改完后的ec-canvas.vue参考:

<template>
  <uni-shadow-root class="ec-canvas-ec-canvas">
    <canvas
      v-if="isUseNewCanvas"
      type="2d"
      class="ec-canvas"
      :canvas-id="canvasId"
      @init="init"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
    </canvas>

    <canvas
      v-else
      class="ec-canvas"
      :canvas-id="canvasId"
      @init="init"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
    </canvas>
  </uni-shadow-root>
</template>

<script>
import WxCanvas from './wx-canvas'
import * as echarts from './echarts'

let ctx

function compareVersion(v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  const len = Math.max(v1.length, v2.length)

  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }

  for (let i = 0; i < len; i++) {
    const num1 = parseInt(v1[i])
    const num2 = parseInt(v2[i])

    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }
  return 0
}

function wrapTouch(event) {
  for (let i = 0; i < event.touches.length; ++i) {
    const touch = event.touches[i]
    touch.offsetX = touch.x
    touch.offsetY = touch.y
  }
  return event
}
export default {
  props: {
    canvasId: {
      type: String,
      value: 'ec-canvas',
    },

    ec: {
      type: Object,
    },

    forceUseOldCanvas: {
      type: Boolean,
      value: false,
    },
  },
  data() {
    return {
      isUseNewCanvas: false,
    }
  },
  onReady: function () {
    // Disable prograssive because drawImage doesn't support DOM as parameter
    // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
    echarts.registerPreprocessor((option) => {
      if (option && option.series) {
        if (option.series.length > 0) {
          option.series.forEach((series) => {
            series.progressive = 0
          })
        } else if (typeof option.series === 'object') {
          option.series.progressive = 0
        }
      }
    })

    if (!this.ec) {
      console.warn(
        '组件需绑定 ec 变量，例： +
          'canvas-id="mychart-bar" ec="{{ ec }}">'
      )
      return
    }

    if (!this.ec.lazyLoad) {
      this.init()
    }
  },
  methods: {
    init: async function (callback) {
      const version = wx.getSystemInfoSync().SDKVersion

      const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0
      const forceUseOldCanvas = this.forceUseOldCanvas
      const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas
      this.isUseNewCanvas = isUseNewCanvas

      if (forceUseOldCanvas && canUseNewCanvas) {
        console.warn('开发者强制使用旧canvas,建议关闭')
      }
      await this.$nextTick()
      if (isUseNewCanvas) {
        // console.log('微信基础库版本大于2.9.0，开始使用');
        // 2.9.0 可以使用 
        this.initByNewWay(callback)
      } else {
        const isValid = compareVersion(version, '1.9.91') >= 0
        if (!isValid) {
          console.error(
            '微信基础库版本过低，需大于等于 1.9.91。' +
              '参见：https://github.com/ecomfe/echarts-for-weixin' +
              '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82'
          )
          return
        } else {
          console.warn(
            '建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能'
          )
          this.initByOldWay(callback)
        }
      }
    },

    initByOldWay(callback) {
      // 1.9.91 <= version < 2.9.0：原来的方式初始化
      ctx = wx.createCanvasContext(this.canvasId, this)
      const canvas = new WxCanvas(ctx, this.canvasId, false)

      echarts.setCanvasCreator(() => {
        return canvas
      })
      // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
      const canvasDpr = 1
      var query = wx.createSelectorQuery().in(this)
      query
        .select('.ec-canvas')
        .boundingClientRect((res) => {
          if (typeof callback === 'function') {
            this.chart = callback(canvas, res.width, res.height, canvasDpr)
          } else if (
            this.ec &&
            typeof this.ec.onInit === 'function'
          ) {
            this.chart = this.ec.onInit(
              canvas,
              res.width,
              res.height,
              canvasDpr
            )
          } else {
            this.triggerEvent('init', {
              canvas: canvas,
              width: res.width,
              height: res.height,
              canvasDpr: canvasDpr, // 增加了dpr，可方便外面echarts.init
            })
          }
        })
        .exec()
    },

    initByNewWay(callback) {
      // version >= 2.9.0：使用新的方式初始化
      const query = wx.createSelectorQuery().in(this)
      query
        .select('.ec-canvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvasNode = res[0].node
          this.canvasNode = canvasNode

          const canvasDpr = wx.getSystemInfoSync().pixelRatio
          const canvasWidth = res[0].width
          const canvasHeight = res[0].height

          const ctx = canvasNode.getContext('2d')

          const canvas = new WxCanvas(ctx, this.canvasId, true, canvasNode)
          echarts.setCanvasCreator(() => {
            return canvas
          })

          if (typeof callback === 'function') {
            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
          } else if (
            this.ec &&
            typeof this.ec.onInit === 'function'
          ) {
            this.chart = this.ec.onInit(
              canvas,
              canvasWidth,
              canvasHeight,
              canvasDpr
            )
          } else {
            this.triggerEvent('init', {
              canvas: canvas,
              width: canvasWidth,
              height: canvasHeight,
              dpr: canvasDpr,
            })
          }
        })
    },
    canvasToTempFilePath(opt) {
      if (this.isUseNewCanvas) {
        // 新版
        const query = wx.createSelectorQuery().in(this)
        query
          .select('.ec-canvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvasNode = res[0].node
            opt.canvas = canvasNode
            wx.canvasToTempFilePath(opt)
          })
      } else {
        // 旧的
        if (!opt.canvasId) {
          opt.canvasId = this.canvasId
        }
        ctx.draw(true, () => {
          wx.canvasToTempFilePath(opt, this)
        })
      }
    },

    touchStart(e) {
      if (this.chart && e.touches.length > 0) {
        var touch = e.touches[0]
        var handler = this.chart.getZr().handler
        handler.dispatch('mousedown', {
          zrX: touch.x,
          zrY: touch.y,
          preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {},
        })
        handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y,
          preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {},
        })
        handler.processGesture(wrapTouch(e), 'start')
      }
    },

    touchMove(e) {
      if (this.chart && e.touches.length > 0) {
        var touch = e.touches[0]
        var handler = this.chart.getZr().handler
        handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y,
          preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {},
        })
        handler.processGesture(wrapTouch(e), 'change')
      }
    },

    touchEnd(e) {
      if (this.chart) {
        const touch = e.changedTouches ? e.changedTouches[0] : {}
        var handler = this.chart.getZr().handler
        handler.dispatch('mouseup', {
          zrX: touch.x,
          zrY: touch.y,
          preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {},
        })
        handler.dispatch('click', {
          zrX: touch.x,
          zrY: touch.y,
          preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {},
        })
        handler.processGesture(wrapTouch(e), 'end')
      }
    },
  },
}
</script>
<style scoped>
.ec-canvas {
  width: 100%;
  height: 100%;
}
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322

• 将ec-canvas.vue、wx-canvas.js、echarts.js复制到需要使用的分包中，三个文件需在同一目录下，再在组件中引用即可，注意引用组件与echarts的路径：
  • 复制完后，注意将wxcomponents 文件夹删除以及pages中对应的地方，否则主包体积会变大。
• 示例

<template>
  <view style="height: 500rpx">
    <ec-canvas
      ref="canvasRef"
      style="height:100%;width:100%;"
      canvas-id="mychart-bar"
      :ec="{ onInit: initChart }"
    />
  </view>
</template>

<script>
import * as echarts from './components/echarts.min.js'
import EcCanvas from './components/ec-canvas'
let chartInstance
export default {
  components: {
    EcCanvas,
  },
  data() {
    return {}
  },
  mounted() {
    setTimeout(() => {
      this.setOption({
        series: [
          {
            data: [12, 20, 15, 8, 7, 11, 13],
            type: 'bar',
          },
        ],
      })
    },3000)
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      chartInstance = echarts.init(canvas, null, {
        width,
        height,
        devicePixelRatio: dpr, // 像素
      })
      canvas.setChart(chartInstance)
      chartInstance.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
          },
        ],
      })
      return chartInstance
    },
    // 需要更新图表数据时调用
    setOption(data) {
      if(!chartInstance) return
      chartInstance.setOption(data)
    }
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

ec-canvas 进一步封装以及同时适配H5，参考我的下一篇文章：uniapp echarts 适配H5与微信小程序