uniapp echarts 适配H5与微信小程序

---

前言

接上文：uniapp 微信小程序使用echarts，这篇文章目的为使用uniapp时提供一个同时兼容H5和小程序的echarts组件，在使用时尽量减少心智负担。

---

一、修改 ec-canvas组件

---

首先修改uniapp 微信小程序使用echarts中的ec-canvas组件，将initChart方法置于该组件内部，而不是存在于业务组件中。

1.1 在ec-canvas组件methods中定义一个initChart方法

methods: {
	initChart(canvas, width, height, dpr) {
      const chartInstance = echarts.init(canvas, null, {
        width,
        height,
        devicePixelRatio: dpr // 像素
      })
      canvas.setChart(this.chartInstance)
      chartInstance.setOption(this.ec.option || {})
        
      return chartInstance
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

1.2 用initChart全局替换this.ec.onInit

• 修改initByOldWay和initByNewWay两个方法

methods: {
	initByOldWay(callback) {
		//...其余逻辑
		else if ( this.ec ) {
            this.chart = this.initChart(
              canvas,
              res.width,
              res.height,
              canvasDpr
            )
        }
       //...其余逻辑
	},
	initByNewWay(callback) {
		//...其余逻辑
		else if (this.ec) {
            this.chart = this.initChart(
              canvas,
              canvasWidth,
              canvasHeight,
              canvasDpr
            )
         }
		//...其余逻辑
	}
}
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

1.3 监听数据变化

• 阅读initChart方法，可知我们现在的图表数据是从props中的ec来的，ec是个对象，有一个option的键。对这个option监听即可:

注:这里没必要使用深度监听，外部组件使用时，如果图表数据的值有变化，直接将有变化的部分直接赋值给option即可，而不是通过option.xxx去修改数据。
如果想要通过option.xxx去修改数据，那么就需要深度监听了。

export default {
	//...其余代码
	watch: {
    	"ec.option"(val) {
      		if(!this.chart) return
      		this.chart.setOption(val)
    	}
  	},
	//...其余代码
}
1
2
3
4
5
6
7
8
9
10

1.4 ec-canvas完整代码参考

<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.min.js'

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,
    }
  },
  watch: {
    "ec.option"(val) {
      if(!this.chart) return
      this.chart.setOption(val)
    }
  },
  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)
        }
      }
    },
    initChart(canvas, width, height, dpr) {
      const chartInstance = echarts.init(canvas, null, {
        width,
        height,
        devicePixelRatio: dpr // 像素
      })
      canvas.setChart(this.chartInstance)
      chartInstance.setOption(this.ec.option || {})
        
      return chartInstance
    },
    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 ) {
            this.chart = this.initChart(
              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
          ) {
            this.chart = this.initChart(
              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
323
324
325
326
327
328
329
330
331
332

二、H5 echarts组件

---

• 其实就是平时正常使用echarts，取名为ec-h5，直接上代码：

<template>
  <view class="h5-chart-container" :id="id"></view>
</template>

<script>
  import * as echarts from './echarts.min.js'
  export default {
    props: {
      id: {
        type: String,
        default: 'ec-h5-id'
      },
      option: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      option(val) {
        if(!this.chart) return
        this.chart.setOption(val)
      }
    },
    data() {
      return {}
    },
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        const chartDom = document.getElementById(this.id)
        this.chart = echarts.init(chartDom)
        this.chart.setOption(this.option)
      }
    }
  }
</script>

<style scoped>
.h5-chart-container {
  height: 100%;
  width: 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

三、供外部调用的组件

---

外部调用组件 uni-chart代码

• 取名为uni-chart，通过条件编译的方式，由这个组件判断是微信还是H5。

<template>
  <!--  #ifdef  MP-WEIXIN -->
  <ec-canvas :ec="{option}" :canvasId="id" />
  <!--  #endif -->

  <!--  #ifdef  H5 -->
  <ec-h5 :option="option" :id="id" />
  <!--  #endif -->
</template>

<script>
  import ecCanvas from './ec-canvas.vue';
  import ecH5 from './ec-h5.vue'

  export default {
    props: {
      id: {
        type: String,
        default: 'uni-chart-id'
      },
      option: {
        type: Object,
        default: () => {}
      }
    },
    components: {
      ecCanvas,
      ecH5
    },
  }
</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

使用uni-chart

• 参考:

<template>
  <view class="parent-container">
    <uni-chart class="my-chart" :option="option" />
  </view>
</template>

<script>
import uniChart from './components/uni-chart.vue'
export default {
  components: {
    uniChart,
  },
  data() {
    return {
      option: {
        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',
          },
        ],
      },
    }
  },
  mounted() {
    // 动态更新图表数据
    setTimeout(() => {
      this.option = {
        series: [
          {
            data: [12, 20, 15, 8, 7, 11, 13],
            color: ['red']
          },
        ],
      }
    }, 2000)
  },
}
</script>
<style scoped>
.parent-container {
  height: 100vh;
}
.my-chart {
  height: 600rpx;
}
</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

碎碎念：微信小程序主包限制有2MB，所以这个组件不好放于根目录下的components，这样会被打到主包里，所以创个分包，将图表相关的业务组件都丢到这个分包去，这样最好。
分包也能有static文件夹，但是我丢进去之后，uni还是会重复打包，导致分包什么都没有，就有2MB大小。