步骤

gitclonegit@github.com:xiaolin3303/wx-charts.git

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

<!--/src/pages/bar/bar.vuetemplate中内容--><canvascanvas-id="areaCanvas"class="canvas"@touchstart="touchHandler"></canvas>

///src/pages/bar/bar.vuescript中内容varwxCharts=require('@/lib/wxcharts-min.js');//该路径为该js文件在你项目中的路径exportdefault{name:"bar",data(){return{bar:null}},mounted:function(e){varwindowWidth=320;try{varres=wx.getSystemInfoSync();windowWidth=res.windowWidth;}catch(e){console.error('getSystemInfoSyncfailed!');}this.bar=newwxCharts({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){returnval.toFixed(2)+'万';}}],yAxis:{title:'成交金额(万元)',format:function(val){returnval.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);}}}

看完上述内容,你们对mpvue中如何使用使用wx-charts图表插件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注本站行业资讯频道,感谢大家的支持。