平時在項目中實現數據可視化，可以使用百度的開源圖表庫echarts，根據項目需求來繪製生成各種類型的圖表，那麼在Vue中如何引入echarts並封裝成組件調用呢？
目錄：
1. 安裝echarts
2. 全局引入
3. 按需引入
4. 參考文檔
1. 安裝echarts
因爲通過vue-echarts按需引入時，一些組件模塊（如折線圖、柱狀圖，提示框和標題組件等）需要依賴已經包含所有圖表和組件的Echarts包，所以這裏兩個都需要安裝：
npm install echarts vue-echarts -S
當然，你不使用vue-echarts也可以實現按需引入，就可以不安裝vue-echarts，下面會講到。
使用
2. 全局引入
在入口文件main.js中：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
新建MyChart.vue組件，內容如下，其中option配置可在引用組件時通過props傳入，在這裏爲了演示我直接寫在組件裏了：
<template>
<div>
<div :id="chartId" :style="{ width: width, height: height }"></div>
</div>
</template>
<script>
export default {
name: "MyChart",
props: {
chartId: {
type: String,
required: true
},
width: {
type: String,
default: "500px"
},
height: {
type: String,
default: "500px"
},
chartOptions: {
type: Object,
required: true
},
},
mounted() {
this.createChart()
},
methods: {
createChart() {
// 基於準備好的dom，初始化echarts實例
let chart = this.$echarts.init(document.getElementById(this.chartId));
// 指定圖表的配置項和數據
var option = {
title: {
text: "一週價格走勢"
},
tooltip: {},
legend: {
data: ["價格"]
},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
name: "價格",
data: [220, 202, 231, 243, 225, 220, 213],
type: "line",
smooth: true
}
]
}
chart.setOption(option);
}
}
}
</script>
使用組件：
<my-chart chartId="chart" :chartOptions="{}" width="500px" height="500px"></my-chart>
npm start，即可在瀏覽器中看到根據配置生成折線圖（series.type=‘line’）：
我的Vue開發配置環境
使用 import echarts from ‘echarts’ 得到的是已經加載了所有圖表和組件的 ECharts 包，因此項目打包體積會比較大，如果在項目中對體積要求比較苛刻，可以只按需引入需要的模塊。
3. 按需引入
（1）按需引入方式一
此時我們不在main.js文件中引入，而是直接在MyChart.vue組件中，直接引入echarts包中的基礎模版，然後再按需引入需要的組件模塊，修改MyChart.vue組件，內容如下：
<template>
<div>
<div :id="chartId" :style="{ width: width, height: height }"></div>
</div>
</template>
<script>
// 引入基本模板
let Echarts = require("echarts/lib/echarts");
// 按需引入需要的組件模塊
require("echarts/lib/chart/line");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/tooltip");
export default {
name: "MyChart",
props: {...},
mounted() {
this.createChart();
},
methods: {
createChart() {
// 基於準備好的dom，初始化echarts實例
let chart = Echarts.init(document.getElementById(this.chartId));
// 指定圖表的配置項和數據
var option = {...};
chart.setOption(option);
}
}
}
</script>
（1）按需引入方式二
此時我們通過引入vue-echarts組件庫，然後再按需引入echarts包中的組件模塊：
vue-echarts是基於echarts封裝實現的一個組件庫，直接按照正常的組件引用方式，安裝引用即可，具體的安裝和引用讀者可以直接閱讀 vue-echarts技術文檔。
在入口文件main.js中：
// 引入vue-echarts組件庫
import ECharts from 'vue-echarts'
// 按需引入需要的組件模塊
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
// 註冊組件後即可使用
Vue.component('chart', ECharts)
然後修改MyChart.vue組件，內容如下：
<template>
<div>
<chart ref="chart" :options="chartOptions" :auto-resize="true"></chart>
</div>
</template>
<script>
export default {
name: "MyChart",
data() {
return {
chartOptions: {}
};
},
mounted() {
this.getOptions()
},
methods: {
getOptions() {
this.chartOptions = {
title: {
text: "一週價格走勢"
},
tooltip: {},
legend: {
data: ["價格"]
},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
name: "價格",
data: [220, 202, 231, 243, 225, 220, 213],
type: "line",
smooth: true
}
]
}
}
}
}
</script>
以上是通過全局註冊組件的方式使用vue-echarts組件，當然你也可以在MyChart.vue組件中import然後註冊成局部組件，但這裏建議使用全局註冊組件方式，因爲這樣不管你在項目中使用多少的不同圖表系列類型，只需關心在.vue組件文件中定義不同的option配置就可以了，而不用在每個組件中寫重複的import引入。