Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to use the wx-charts chart plug-in in mpvue, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Steps

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

Get wxcharts-min.js (obfuscation version) in the dist folder under clone. If you need secondary development, you can use wxcharts.js and then modify the content to achieve the purpose of customization. After modification, you can use online obfuscation to re-confuse.

/ / content in src/pages/bar/bar.vue script var wxCharts = require ('@ / lib/wxcharts-min.js') / / this path is the path of the js file in your project 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: ['1mm,' 2mm, '3cm,' 4cycles, '5cycles,' 6'], animation: true Series: [{name: 'volume 1 million, data: [32, 45, null, 56, 33, 34], format: function (val) {return val.toFixed (2) +' ten thousand' }}], yAxis: {title: 'transaction amount (ten thousand yuan)', format: function (val) {return val.toFixed (2) }, min: 0, fontColor:'# 8085e9, gridColor: '8085e9' TitleFontColor:'# f7a35c'}, xAxis: {fontColor:'# 7cb5ecial, gridColor:'# 7cb5ec'} Extra: {legendTextColor:'# cb2431'}, width: windowWidth, height: 200}) }, methods: {touchHandler: function (e) {console.log (this.bar.getCurrentDataIndex (e)); this.bar.showToolTip (e) } after reading the above, do you have any further understanding of how to use the wx-charts Chart plug-in in mpvue? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.