一.Echart基本圖表顯示與地圖顯示
將各種圖形拆分為交互組件车猬,各組件接收特定參數(shù)實(shí)現(xiàn)效果
- echart實(shí)例生成
每個(gè)echart都實(shí)例依賴于一個(gè)dom容器稳吮,且每個(gè)dom上僅可以有一個(gè)echart實(shí)例
? 初始化實(shí)例方法Init(1,2,3)用于在dom上初始化echart實(shí)例
注:對(duì)于隱藏的dom可能導(dǎo)致獲取不到height無法實(shí)例化殉摔,一般通過resize方法重新設(shè)定
? setOption用來為實(shí)例設(shè)置表現(xiàn)配置項(xiàng)
包括全局樣式凄贩,series設(shè)置(圖標(biāo)類型以及數(shù)據(jù)樣式)
? 異步數(shù)據(jù)加載與更新
一般會(huì)設(shè)置載入數(shù)據(jù)前后的opt(showLoading與hideLoading)
? 圖表聯(lián)動(dòng)
聯(lián)動(dòng)是指多個(gè)表格呈現(xiàn)統(tǒng)一數(shù)據(jù)時(shí)淑玫,數(shù)據(jù)在一張表格上觸發(fā)的效果同時(shí)會(huì)在其他表格上觸發(fā) - 圖標(biāo)中加入交互組件
dataZoom控制同一個(gè)數(shù)軸的組件崎岂,會(huì)自動(dòng)聯(lián)動(dòng)
- 事件與行為
事件分兩種
? 點(diǎn)擊或hover圖表上的數(shù)據(jù)
事件順序
鼠標(biāo)經(jīng)過表格數(shù)據(jù):move over out
點(diǎn)擊后立刻松開:down up click (dbclick) move
點(diǎn)擊后按住再松開:Down move up click move
? 可交互組件上的行為 - 基礎(chǔ)圖表使用場景
? 柱狀圖
二維數(shù)據(jù)捆毫,但只需要比較一個(gè)維度(xAxis為定值),所以series中data接收一維數(shù)組冲甘,數(shù)據(jù)差異一目了然绩卤,適用于中小規(guī)模數(shù)據(jù)途样。
注:通常用戶習(xí)慣認(rèn)為x軸為時(shí)間,因此當(dāng)x軸不為時(shí)間時(shí)考慮為不同數(shù)據(jù)使用不同顏色標(biāo)記
? 餅狀圖
面積差異不如柱狀圖明顯濒憋,因此一般用來觀察數(shù)據(jù)所占比例
? 折線圖
適用于二維大數(shù)據(jù)集何暇,常用于觀察數(shù)據(jù)趨勢(shì)以及多個(gè)二維數(shù)據(jù)集比較