# 圖表
管理后臺圖表也是常見得需求。這里圖表就只推薦 ECharts，功能齊全，社區 demo 也豐富[gallery](http://gallery.echartsjs.com/explore.html)。
我還是那個觀點，大部分插件建議大家還是自己用 vue 來封裝就好了，真的很簡單。ECharts 支持 webpack 引入，圖省事可以將 ECharts 整個引入`var echarts = require('echarts')`不過 ECharts 還是不小的，如果只使用它小部分功能或者圖表類型的話建議按需引入。
~~~
// 按需引入 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts')
// 引入柱狀圖
require('echarts/lib/chart/bar')
// 引入提示框和標題組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
//全部引入
var echarts = require('echarts')
~~~
[webpack 中使用 ECharts 文檔](http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts)
[ECharts 按需引入模塊文檔](https://github.com/ecomfe/echarts/blob/master/index.js)
接下來我們就要在 vue 中聲明初始化 ECharts 了。因為 ECharts 初始化必須綁定 dom，所以我們只能在 vue 的 mounted 生命周期里進行初始化。
~~~
mounted() {
this.initCharts();
},
methods: {
initCharts() {
this.chart = echarts.init(this.$el);
this.setOptions();
},
setOptions() {
this.chart.setOption({
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
}
~~~
就這樣簡單，ECharts 就配置完成了，這時候你想說我的 data 是遠程獲取的，或者說我動態改變 ECharts 的配置該怎么辦呢？我們可以通過 watch 來觸發 setOptions 方法
~~~
//第一種 watch options變化 利用vue的深度 watcher，options 一有變化就重新setOption
watch: {
options: {
handler(options) {
this.chart.setOption(this.options)
},
deep: true
},
}
//第二種 只watch 數據的變化 只有數據變化時觸發ECharts
watch: {
seriesData(val) {
this.setOptions({series:val})
}
}
~~~
其實都差不多，還是要結合自己業務來封裝。后面就和平時使用 ECharts 沒有什么區別了。題外話 ECharts 的可配置項真心多，大家使用的時候可能要花一點時間了解它的 api 的。知乎有個問題：百度還有什么比較良心的產品？答案：ECharts，可見 ECharts 的強大與好用。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/chart.html#demo)Demo
> ## TIP
>
> 具體實例可參照`@/views/dashboard/admin/components/`文件下幾個 chart 文件
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/chart.html#%E5%85%B6%E5%AE%83)其它
當然社區里的其它圖表如[d3](https://github.com/d3/d3),[Chart.js](https://github.com/chartjs/Chart.js),[chartist-js](https://github.com/gionkunz/chartist-js)等封裝方法都是大同小異差不多的，這里就不再展開了。
