一、了解Echarts

????????????ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫(kù)?ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

二、下載插件

cnpm install echarts --save? &? npm install echarts --save

三、不多說(shuō)直接來(lái)干的。

? ? ? ?下載完成后，打開(kāi)我們的vue項(xiàng)目中的main.js中引入插件

import?echarts?from?'echarts'

Vue.prototype.$echarts?=?echarts

? ? ? ?在main.js中全局引入后，在組件中添加一個(gè)dom節(jié)點(diǎn)

<div?id="myChart"?:style="{width:?'1000px',?height:?'500px'}"></div>

回看Echarts官網(wǎng)

點(diǎn)擊實(shí)例的官方實(shí)例

選擇需要的列表類型，點(diǎn)進(jìn)去。。。

ok，拿到了。 左邊的代碼直接復(fù)制到剛才創(chuàng)建節(jié)點(diǎn)的文件內(nèi)，定義一個(gè)方法，

最后通過(guò) myChart.setOption（var的那個(gè)名稱）方法傳到實(shí)例中就歐克了！

僅供參考，其中的屬性全是語(yǔ)義化命名的。

得到參數(shù)后，把對(duì)應(yīng)的屬性復(fù)制 就ok了。。。