個(gè)人喜好使用cnpm,速度比npm快N倍
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts --save
在assets目錄下新建js目錄,再添加myCharts.js文件:
image.png
/**
* 各種畫echarts圖表的方法都封裝在這里
* 注意：為了方便學(xué)習(xí)echarts沒有采用按需引入的方式
*/
import echarts from 'echarts'
const install = function(Vue) {
Object.defineProperties(Vue.prototype, {
$chart: {
get() {
return {
//畫一條簡單的線
line1: function (id) {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
const optionData = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
this.chart.setOption(optionData);
},
}
}
}
})
}
export default {
install
}
在main.js中添加如下代碼
import myCharts from '@/assets/js/myCharts.js'
Vue.use(myCharts)
至此就可以和在js中一樣使用echarts圖了
