在mpvue中使用图表插件wx-charts

  1. 前言
  2. 原理
  3. 步骤
  4. 总结

前言

大家在原生小程序中需要用到图表插件时,可能会选择echarts或者由xiaolin3303开发的一款wx-charts插件,
本文为大家剖析一下如何在开源小程序框架mpvue中使用wx-charts插件

原理

mpvue编译后的代码是原生的小程序代码,它把页面的wxml内容全部封成了template引入到page中。既然是最后会转为原生代码,就支持使用原生的canvas组件,这一点也是官方明确肯定的。所以在mpvue中使用wx-charts就跟在原生中使用一样,除了注意事件的绑定使用mpvue的方式即可。

步骤

1.

1
git clone git@github.com:xiaolin3303/wx-charts.git

在clone下来的dist文件夹获得wxcharts-min.js(混淆版本),如果需要进行二次开发,可以使用wxcharts.js然后修改
内容,达到定制化的目的,修改完后可以利用在线混淆进行重新混淆使用。

  1. 1
    2
    <!--/src/pages/bar/bar.vue template中内容 -->
    <canvas canvas-id="areaCanvas" class="canvas" @touchstart="touchHandler"></canvas>

3.

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
// /src/pages/bar/bar.vue script中内容
var wxCharts = require('@/lib/wxcharts-min.js'); //该路径为该js文件在你项目中的路径
export default {
name: "bar",
data() {
return {
bar: null
}
},

mounted: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error('getSystemInfoSync failed!');
}

this.bar = new wxCharts({
canvasId: 'areaCanvas',
type: 'area',
categories: ['1', '2', '3', '4', '5', '6'],
animation: true,
series: [{
name: '成交量1',
data: [32, 45, null, 56, 33, 34],
format: function (val) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
title: '成交金额 (万元)',
format: function (val) {
return val.toFixed(2);
},
min: 0,
fontColor: '#8085e9',
gridColor: '#8085e9',
titleFontColor: '#f7a35c'
},
xAxis: {
fontColor: '#7cb5ec',
gridColor: '#7cb5ec'
},
extra: {
legendTextColor: '#cb2431'
},
width: windowWidth,
height: 200
});
},
methods: {
touchHandler: function (e) {
console.log(this.bar.getCurrentDataIndex(e));
this.bar.showToolTip(e);
}
}
}

总结

该图表支持tooltip,这个功能比较实用,目前mpvue-echarts是不支持这一点的,但是echarts会更加美观,
可以根据需求取舍


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com

×

喜欢就点赞,疼爱就打赏