一锌奴、前言
本文章為長期更新的文章笆包，記錄在vue中使用的echarts的各種技巧以及遇到的問題和解決方案宵距，歡迎糾錯指導腊尚。
二、環(huán)境
系統(tǒng)【windows 10 專業(yè)版】满哪、Vue【2.5.22】婿斥、Echarts【4.2.1】劝篷。
三、安裝
官網(wǎng)描述的比較詳細民宿，可詳閱娇妓，本人主要是在Vue環(huán)境下使用，為了追求打包體積的優(yōu)化活鹰，可以在官網(wǎng)進行自定義構建哈恰。
四、記錄
1华望、初始化
圖表的初始化需要在生命周期mounted函數(shù)中（Dom掛載和渲染完成后的回調）或者nextTick（Dom異步更新隊列完成后的回調）進行蕊蝗。
2、圖表刷新
在watch中對可變的數(shù)據(jù)進行偵聽赖舟，需要判斷當前圖表是否存在蓬戚，存在則在this.$nextTick函數(shù)中進行更新：this.chart.setOption(genChartOption(val))，對于數(shù)據(jù)項（series）的動態(tài)增加和刪減宾抓，setOption會出現(xiàn)緩存的問題子漩，解決方案為調用當前echart對象的clear方法：chart.clear()。
3石洗、優(yōu)化
圖表盡量封裝幢泼，以避免當前組件或頁面代碼過于混亂不利于維護，提高復用率讲衫；
不變的數(shù)據(jù)盡量不要放到data里缕棵，以函數(shù)的形式，將可變的數(shù)據(jù)進行傳參生成option尚可涉兽，如chart.setOption(genChartOption({title, data, xData}))招驴。
4、v-show下出現(xiàn)不加載和寬高失常的問題
這個問題是圖表的寬高未設定值造成的枷畏，針對兩種場景有對應的解決方案别厘，一是自適應圖表，強依賴父容器的寬高以及是否可視（display）拥诡，采用v-if進行控制触趴，只有當前容器被顯示才加載圖表，常見的就是自己實現(xiàn)的tab渴肉，通過v-if來控制面板切換冗懦。二是直接設置固定寬高。
5宾娜、封裝的echarts組件批狐，將title（字符串參數(shù)等）作為props參數(shù)進行傳遞，導致符號未能正確顯示或者格式化的問題
將字符串用單引號括起來：:title="'第一行文本\n第二行文本'"前塔。
