1.安装
cnpm install echarts vue-echarts --save-dev
// 本人所使用的版本如下,最新版本的会有差异,建议指定办版本进行安装
"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' 可以使用按需进行加载
全量加载会有一定的性能问题(打包体积增大等等)
3.组件内使用
<template>
<v-chart
ref="eChart1"
class="EchartContainer"
:options="chartsOptions"
/>
</template>
chartsOptions 可以参照echarts官方的参数进行传入
// 页面窗口变化触发 echarts 重新绘制
window.addEventListener('resize', this.resizeTheChart);
resizeTheChart(){
this.$refs.eChartType.resize();
}