今天就跟大家聊聊有關(guān)mpvue中如何使用使用wx-charts圖表插件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

作為一家“創(chuàng)意+整合+營(yíng)銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。成都創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、創(chuàng)意表現(xiàn)、網(wǎng)頁(yè)制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營(yíng)銷運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷方法,創(chuàng)造更大的價(jià)值。

步驟

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

在clone下來(lái)的dist文件夾獲得wxcharts-min.js（混淆版本）,如果需要進(jìn)行二次開發(fā)，可以使用wxcharts.js然后修改 內(nèi)容，達(dá)到定制化的目的，修改完后可以利用在線混淆進(jìn)行重新混淆使用。

// /src/pages/bar/bar.vue script中內(nèi)容var wxCharts = require('@/lib/wxcharts-min.js');  //該路徑為該js文件在你項(xiàng)目中的路徑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) + '萬(wàn)';
				}
			}],			yAxis: {				title: '成交金額 (萬(wàn)元)',				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);
			}   
		}
	}

看完上述內(nèi)容，你們對(duì)mpvue中如何使用使用wx-charts圖表插件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。