1.安裝
cnpm install echarts vue-echarts --save-dev
// 本人所使用的版本如下趁窃,最新版本的會有差異油猫,建議指定辦版本進(jìn)行安裝
"echarts": "^4.1.0", "vue-echarts": "^4.0.1",
2.main.js引入
import ECharts from 'vue-echarts';
import echarts from 'echarts';
import 'echarts/lib/echarts';
Vue.use(echarts);
Vue.prototype.$echarts = echarts;
Vue.component('v-chart', ECharts);
//注意 import echarts from 'echarts' 可以使用按需進(jìn)行加載
全量加載會有一定的性能問題(打包體積增大等等)
3.組件內(nèi)使用
<template>
<v-chart
ref="eChart1"
class="EchartContainer"
:options="chartsOptions"
/>
</template>
chartsOptions 可以參照echarts官方的參數(shù)進(jìn)行傳入
// 頁面窗口變化觸發(fā) echarts 重新繪制
window.addEventListener('resize', this.resizeTheChart);
resizeTheChart(){
this.$refs.eChartType.resize();
}