前言
最近可視化浪潮越發兇猛
但是有些小夥伴們就慌了，覺得自己不是很懂，或者說對裡面的參數不是很清楚，是以也就印象也就很模糊
那麼今天嚴老濕就帶大家好好梳理梳理思路，順便也帶大家寫幾個Demo
首先得認識Echarts
商業級資料圖表，它是一個純Echarts
的圖示庫，相容絕大部分的浏覽器，底層依賴輕量級的JavaScript
類庫canvas
，提供直覺，生動，可互動，可高度個性化定制的資料可視化圖表。創新的拖拽重計算、資料視圖、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。ZRender
簡單起步
建立vue-cli
我們還是老套路，先建立一個
vue-cli
,如果你已經建立了項目可以跳轉到 下一步
配置啥的 就不用老嚴多說了吧(你已經是一個成熟的前端開發者了~)
安裝 Echarts
以下幾種安裝方式擇其一
本項目安裝的是采用的
yarn
，
echarts
版本号是
4.8.0
全局引入
在main.js中
到了這一步說明你已經把準備工作做完了
清空多餘代碼
我們先把頁面其他不需要用到的代碼給清除吧
建立一個容器
建立一個 id 為
EChart
的div 作為容器 (使用id會有個小問題，在最後解答)
建立一個方法
生命周期中調用此方法
請看大螢幕
吃瓜群衆：“這特麼不是官方示例麼？能不能炫一點”
嚴老師：“說實話确實有點low ，不要慌這才哪到哪呢，我們先從基礎講堂開始嘛”
先了解其參數
先講講其中簡單的一些配置參數，枯燥乏味，但是摸清楚之後，以後畫圖那是順手得一**
先整點簡單、常用的來看看(備注裡面皆是對應
API
位址)
| 參數名 | 作用 | 備注 |
|---|---|---|
| 作為圖表名稱 | https://echarts.apache.org/zh/option.html#title |
| 作為圖表的标記 | https://echarts.apache.org/zh/option.html#legend |
| 作為圖表的X軸 | https://echarts.apache.org/zh/option.html#xAxis |
| 作為圖表的Y軸 | https://echarts.apache.org/zh/option.html#yAxis |
| 作為圖表的系列 | https://echarts.apache.org/zh/option.html#series |
| 作為圖表的顔色清單 | https://echarts.apache.org/zh/option.html#color |
掰扯了這麼多，估計大家心裡也沒個底，實戰一下吧
來造作一下下
series type
來吧！！展示
series指系列清單。每個系列通過 type 決定自己的圖表類型
折線圖
修改折線圖,複制上面的
config
代碼
隻用修改一處地方，那就是
series
中的
type
屬性為
line
即可
餅狀圖
餅狀圖，我們也來看看，将
type
修改為
pie
當然我們需要把多餘的
X軸Y軸
配置删除咯,data資料格式也需要修改一下
儀表盤
儀表盤将
type
修改為
gauge
嗯~ 看起來有那麼一點味道了
legend
剛剛其實我們已經用到了這個參數噢 ps：餅狀圖
legend
可以作為圖表的标記或顔色的名稱描述(專業名詞：圖例)
它的type有兩個參數
plain || scroll
預設為
plain
當圖表内容比較豐富的時候可以使用
scroll
可以帶有滾動操作
color
都說顔色是Web的靈魂所在，每一個人都是畫手
color調色盤顔色清單。如果系列沒有設定顔色，則會依次循環從該清單中取顔色作為系列顔色。
官方預設配色 ：
我們也可以自己修改顔色,規則是按資料對應的
index
找
color
顔色
例如這樣：
yAxis
yAxis 指直角坐标系 grid 中的 y 軸，一般情況下單個 grid 元件最多隻能放左右兩個 y 軸，多于兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。
我們還是以線條為參考8
先看看基礎篇,我們在y軸聲明了一個name
但是有時候呢，我們會根據需求，要做一個雙Y軸，顧名思義雙Y軸，在加一個Y軸就好了
xAxis
xAxis指直角坐标系 grid 中的 x 軸，一般情況下單個 grid 元件最多隻能放上下兩個 x 軸，多于兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。
x軸與y軸基本同理，直接改成數組就成為雙x軸了
其他參數
- title 标題元件，包含主标題和副标題。
- backgroundColor背景色，預設無背景。
- animation是否開啟動畫。
- grid 直角坐标系内繪圖網格，單個 grid 内最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪制折線圖，柱狀圖，散點圖(氣泡圖)。
- tooltip提示框元件。
到了上面基礎篇也就差不多了
使用id為問題所在
其實我們講了這麼多，我們梳理梳理最開始的問題
- id重名怎麼辦？
- 資料多個渲染怎麼辦？
答案：使用ref，因為vue是單頁面，使用id出現 重名會導緻渲染問題
具體怎麼使用我們來看看
總結
使用
echarts
的熟練度最主要的就是寫得多，社群的案例也是多不勝數，面向社群開發就好了
社群位址：https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
參考文獻
https://echarts.apache.org/zh/option.html
https://echarts.apache.org/examples/zh/index.html