在mpvue中使用图表插件wxcharts

文章提供&＃xff1a;林子翔

前言

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

原理

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

步骤

git clone git&＃64;github.com:xiaolin3303/wx-charts.git

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

// /src/pages/bar/bar.vue script中内容var wxCharts &＃61; require(&＃39;&＃64;/lib/wxcharts-min.js&＃39;);  //该路径为该js文件在你项目中的路径export default { name: "bar",data() { return { bar: null}}, mounted: function (e) { var windowWidth &＃61; 320; try { var res &＃61; wx.getSystemInfoSync();windowWidth &＃61; res.windowWidth;} catch (e) { console.error(&＃39;getSystemInfoSync failed!&＃39;);} this.bar &＃61; new wxCharts({ canvasId: &＃39;areaCanvas&＃39;, type: &＃39;area&＃39;, categories: [&＃39;1&＃39;, &＃39;2&＃39;, &＃39;3&＃39;, &＃39;4&＃39;, &＃39;5&＃39;, &＃39;6&＃39;], animation: true, series: [{ name: &＃39;成交量1&＃39;, data: [32, 45, null, 56, 33, 34], format: function (val) { return val.toFixed(2) &＃43; &＃39;万&＃39;;}}], yAxis: { title: &＃39;成交金额 (万元)&＃39;, format: function (val) { return val.toFixed(2);}, min: 0, fontColor: &＃39;#8085e9&＃39;, gridColor: &＃39;#8085e9&＃39;, titleFontColor: &＃39;#f7a35c&＃39;}, xAxis: { fontColor: &＃39;#7cb5ec&＃39;, gridColor: &＃39;#7cb5ec&＃39;}, extra: { legendTextColor: &＃39;#cb2431&＃39;}, width: windowWidth, height: 200});}, methods: { touchHandler: function (e) { console.log(this.bar.getCurrentDataIndex(e)); this.bar.showToolTip(e);}   }}

总结

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