EChart使用簡單介紹

1、title：寫標題，屬性如下

show:false/true  標題是否顯示；

text：標題內容；textstyle修飾標題樣式

subtext：副標題，也可以算是內容；subtextstyle修飾副標題樣式；

2、legentd:圖例元件展現了不同系列的標記(symbol)，顏色和名字；

show:false/true  是否顯示；

data:圖例的資料陣列;

3、grid:直角座標系內繪圖網格,單個 grid 內最多可以放置上下兩個 x 軸，左右兩個 y 軸。可以在網格上繪製折線圖，柱狀圖，散點圖;

show:false/true  是否顯示；

top、left、right、bottom標識上左右下的邊距；

4、xaxis :直角座標系 grid 中的 x 軸，單個 grid 元件最多只能放上下兩個 x 軸。

type:座標軸型別。

data:類目資料，在類目軸（type: 'category'）中有效。

5、yaxis:直角座標系 grid 中的 y 軸，單個 grid 元件最多只能放左右兩個 y 軸。

type:座標軸型別。

6、datazoom:元件 用於對資料進行區域縮放，從而能自由關注細節的資料資訊，或者概覽資料整體。

type:slider; 是否顯示 元件。如果設定為false，不會顯示，但是資料過濾的功能還存在;

backgroundcolor:元件的背景顏色。

realtime:拖動時，是否實時更新系列的檢視。如果設定為false，則只在拖拽結束的時候更新。

top、left、right、bottom標識上左右下的邊距；

7、tooltip:提示框元件。

show:false/true  是否顯示；

trigger:觸發型別;

8、color：調色盤顏色列表。如果系列沒有設定顏色，則會依次迴圈從該列表中取顏色作為系列顏色。

預設為：['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3']；

9、seriers:系列列表。每個系列通過type 決定自己的圖表型別；

series[i]-line：折線

itemstyle折線拐點標誌的樣式；

series[i]-bar：柱狀圖通過柱形的高度來表現資料的大小，用於有至少乙個類目軸的直角座標系上。

series[i]-pie：餅圖主要用於表現不同類目的資料在總和中的佔比。每個的弧度表示資料數量的比例。

10、itemstyle 樣式:

normal:color 顏色；

echart高階使用 EChart使用簡單介紹

1 title 寫標題，屬性如下 show false true 標題是否顯示 text 標題內容 textstyle修飾標題樣式 subtext 副標題，也可以算是內容 subtextstyle修飾副標題樣式 2 legentd 圖例元件展現了不同系列的標記 symbol 顏色和名字 show f...

echart高階使用 Echart使用總結

水監測圖表.gif 1 專案中用到的一些屬性 const options yaxis else,折線點設定為實心點 symbolsize 12,折線點的大小 showbackground true,backgroundstyle itemstyle opacity 1 2 echart初始化的時候獲...

echart使用小結

寫在前面。定義的接收圖表 的容器哦必須設定寬高。不然可能找不到就報錯 cannot read property getattribute of null 如果在vue專案裡面，寫了寬高還報這個錯就可能是頁面的容器還沒有載入完，他還沒有找到。動態新增資料 引入echart import echarts...