官網(wǎng)奉上?ECharts
vue項目中可以引入echarts?或者?vue echarts，大致區(qū)別如下：
echarts就是官方的js庫；
vue-echarts是封裝后的vue插件，功能一致只是把它封裝成vue插件? ?這樣更方便以vue的方式去使用
具體引入方式：在Vue中使用echarts的兩種方式
? ??????????????????????????????????這里主要介紹引入官方?echarts
強迫癥? 代碼潔癖的看這里 (按需引入echarts)：
如果在main.js中引入報錯的話請自行根據(jù)載包的目錄進(jìn)行修改(即到node_module中找到文件路徑)
一般先在官網(wǎng)的實例中找到想要的效果，點擊進(jìn)去拷貝代碼到項目中。
? ??????????????????????????????????????????????以下是大概結(jié)構(gòu)
如果對效果不滿意，再到官網(wǎng)配置項查找相對應(yīng)屬性進(jìn)行設(shè)置。注意：文檔盡量用最新版的
例如：series屬性控制要顯示的圖表類型，可以是柱體圖、餅圖、折線圖、或者地圖
? ????????????????????????????????????????????????echarts地圖
series{ type: map }
因為地圖精度的提高，echarts 官方不再內(nèi)置地圖數(shù)據(jù)增大代碼體積。這是官方以百度地圖為底圖的實例：ECharts Examples
ECharts 中提供了兩種格式的地圖數(shù)據(jù)，一種是可以直接 script 標(biāo)簽引入的 js 文件，引入后會自動注冊地圖名字和數(shù)據(jù)。還有一種是 JSON 文件，需要通過 AJAX 異步加載后手動注冊。
這里推薦兩個地圖json下載鏈接：地圖選擇器?、ECharts 地圖數(shù)據(jù)在線生成工具
如果發(fā)現(xiàn)地圖上的文字不居中，打開地圖 js 或 Json 文件，找到地圖描述的（"properties":{"name":"XX省","cp":[101.04524,23.062507],"childNum":1},）內(nèi)容，將（"cp":[xx,xx]）內(nèi)容刪除，省名就會自動在該省的地圖中間了，否則會默認(rèn)在省會或首府位置顯示
地圖下鉆
類似 省市區(qū)三級下鉆 這種需求，可以參考一下?GitHub - dongkelun/vue-echarts-map: Vue版本Echarts中國地圖鉆取
????????????????????????????????????
????????????????????????????????????????echarts自適應(yīng)
echarts圖表的尺寸自適應(yīng)，是靠監(jiān)聽 window 的 onresize 來實現(xiàn)的，而有時候需要實現(xiàn) window 窗口大小不變，echarts?容器?尺寸變化時圖表也能夠自適應(yīng)。官方文檔也有對類似的需求進(jìn)行說明
比如項目中有對菜單折疊的需求，每次折疊菜單echarts圖表都無法進(jìn)行自適應(yīng)，參考以下鏈接
dom元素增加resize,以及echart增加resize
echarts圖表初始大小問題及echarts隨窗口變化自適應(yīng) - 一只愛吃糖的小羊 - CSDN博客
由于項目中的echarts 容器寬度是百分?jǐn)?shù)來控制，并不能很好通過上面兩種方法解決
于是有了對echarts圖表銷毀重新繪制的想法，通過調(diào)用官方的api：dispose()進(jìn)行銷毀再重新繪制。這里要注意：dispose()和clear()的區(qū)別??清除echarts 實例 - jiang_mingyi的博客 - CSDN博客
每次點擊伸縮菜單，通過循環(huán)對當(dāng)前路由所有echarts實例進(jìn)行銷毀再繪制，添加定時器對性能進(jìn)行優(yōu)化，而且最主要原因可能是容器寬度有延遲
????????????????????????????
????????????????????????????echarts 調(diào)整圖表在容器當(dāng)中的大小
有時候發(fā)現(xiàn)echarts圖表并不能很好布滿容器，這主要跟grid屬性有關(guān)??echarts 調(diào)整圖表大小的方法 - 你說什么我聽不見 - CSDN博客
????????????????????????????echarts 柱狀圖legend圖例不顯示
legend中數(shù)據(jù)要和series中name的值保持一致，餅圖、折線圖沒有這個要求
