1 在vue中使用echarts
先安裝 echarts 此處用的yarn 工具
安裝完畢之后 可以在package.json中檢查
如上圖所示 表示安裝完畢; 接著需要在main.js中引入echart文件
如上圖所示 完成之后 則可以直接在組件中使用echarts圖表了
首先在template中定義兩個 div ,表示承載展示圖表的容器,此處需要用? ? id 來表示 否則在渲染時會失敗;除此之外 還需要在data中定義需要渲染的數(shù)據(jù)及配置文件,最后通過圖中在methods中定義的方法將圖表展示到頁面中; 此處方法只能在mounted函數(shù)中調(diào)用,否則會失敗;(和vue的生命周期有關(guān)系)?
2?自定義 tooltip樣式:
在數(shù)據(jù)option的配置中,可以通過在tooltip中定義formatter函數(shù),來對懸浮框進行設(shè)置,value參數(shù)可以獲取相對應(yīng)的參數(shù) 通過對參數(shù)進行判斷,從而對所需要的值進行處理,以上代碼主要實現(xiàn)的效果就是讓百分比后面添加了百分號,效果圖如下:
在formatter函數(shù)中 通過打印value可以獲取到一下數(shù)據(jù):
????圖5????中的函數(shù)主要是對以上標(biāo)記的幾個函數(shù)進行處理? 從而實現(xiàn)????圖6? ? 的效果
3????echarts 自適應(yīng)瀏覽器窗口大小
實現(xiàn)窗口自適應(yīng)主要是通過window.onresize() 方法 和resize()方法;
通過對窗口大小的檢測讓圖表自適應(yīng)? 具體代碼實現(xiàn)如下:
此處需要注意的是 window.onresize() 方法中的this指向window,需要在外部聲明變量,改變this指向;
