前端學習篇 ECharts 學習

目的：借助於影象化手段，清晰有效地傳達與溝通資訊。

資料視覺化可以把資料從冰冷的數字轉換成圖形，揭示蘊含在資料中的規律和道理

常見的資料視覺化庫：

引入echarts 外掛程式檔案到html頁面中

準備乙個具備大小的dom容器

"main"
style
="width
: 600px;
height
:400px;
">
div>

初始化echarts例項物件

let mychart = echarts.
init
(document.
getelementbyid
('main'))
;

指定配置項和資料(option)

let option =
, yaxis:
, series:
};

將配置項設定給echarts例項物件

mychart.setoption(option);

需要了解的主要配置：seriesxaxisyaxisgridtooltiptitlelegendcolor

4.1 title：標題元件

設定圖表標題（一般不使用）

let option = ,
}

屬性值：

text: '文字內容'， link: '文字超連結', target: '超連結視窗開啟方式' blank - 新視窗

self - 當前視窗

4.2 tooltip：提示框元件（*）

滑鼠放上去會有提示資訊

let option = ,
tooltip: ,
}

屬性值：

trigger: '' 'item' 資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用 'axis' 座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用

'none' 什麼都不觸發

4.3 legend：圖例元件

類似圖表的錨點，點哪個對應的圖表就會隱藏/出現

let option = ,
textstyle: ,
itemgap: '圖示間隔',
itemwidth: '圖示寬',
itemheight:'圖示高',
}

4.4 toolbox : 工具箱元件

可以另存為等功能（一般不使用）

let option = }},
}

4.5 grid：直角座標系內繪圖網格（*）

控制圖表的大小

let option = ,
}

屬性值：

left：'距離容器的左側距離', right：'距離容器的右側距離', top：'距離容器的上側距離', left：'距離容器的下側距離', containlabel: '以什麼位置距離盒子' true - 以文字距離

false- 以刻度尺距離

4.6 xaxis 和 yaxis 座標軸（*）

設定圖表的水平軸跟垂直軸

xaxis: ,

yaxis: ,

屬性值：

show: '是否顯示座標軸', true / false inverse: '是否反向座標軸', true(正向) / false (反向) axistick: '座標軸刻度相關設定', show: '是否顯示', type: '座標軸型別', 'value' 數值軸，適用於 yaxis 'category' 類目軸,適用於 xaxis 'time' 時間軸,適用於連續的時序資料 'log' 對數軸。適用於對數資料 boundarygap: '設定圖表是否緊貼座標軸', true - 是 false- 否 data: ['資料1'，'資料2'...], axislabel: , axisline: },splitline:

}

4.7 series : 系列圖表配置（**）

它決定著顯示那種型別的圖表

series: [,,
]

屬性值：

name: '設定圖表的錨點名稱', //設定後就不用 legend 元件了 type: '圖表型別', 'line' - 折線圖 'bar' - 柱狀圖 'pie' - 餅圖 ...stack: '堆疊', //如果設定了相同的值，那麼data資料裡則是追加（一般不設定） data: //設定圖表資料, barwidth: '設定線條的寬度', linestyle: , itemstyle: , areastyle: , symbol: '設定線條焦點圖形'， 'circle' - 小圓點『rect』 - 小方塊 ...symbolsize: '設定線條焦點圖形大小', radius: '設定餅形圖大小', [40%,60%] //內圓半徑和外圓半徑 center: '設定餅形圖位置', [40%,60%] //水平位置和垂直位置 barcategorygap: '線條之間的距離', lable: //name裡的名字 //資料名，座標軸裡的data值 //data裡資料值 },lableline: yaxisindex: '設定y軸的層疊性', //如果y軸有兩條或以上資料，就是設定重疊

xaxisindex: '設定x軸的層疊性'

4.8 color：線條顏色（*）

設定線條顏色

color: ['顏色1','顏色2'...]

window.addeventlistener("resize", function() );

6.1 引入 china.js 檔案

6.2 社群找相關圖表

6.3 樣式

在 geo 物件裡修改

geo: 
},roam: false,
itemstyle: ,
emphasis: 
}}

前端學習篇 ECharts 學習

Echarts學習筆記

Echarts學習筆記

Echarts 初步學習

前端學習篇 ECharts 學習

Echarts學習筆記

Echarts學習筆記

Echarts 初步學習

相關推薦