前端學習篇 ECharts 學習

2021-10-24 16:07:25 字數 3663 閱讀 8319

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

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

常見的資料視覺化庫:

引入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中橫座標 x軸 值自動間隔顯示的解決方案 echarts中,若x軸資料太多,會自動間隔顯示 如下圖 這時我們可以通過屬性xaxis屬性axislabel interval和rotate來進行調整 interval 0 x軸資料全部顯示 rotate 40 x軸資料傾斜顯示 二 ec...

Echarts學習筆記

var mychart echarts.init document.getelementbyid main option subtext 副標題 subtextstyle textalign center 整體 包括 text 和 subtext 的水平對齊 auto left right cent...

Echarts 初步學習

二 定義圖表顯示區域 三 初始化echarts物件 基於準備好的dom,初始化echarts例項 var mychart echarts.init document.getelementbyid main 四 指定圖表的配置項和資料 指定圖表的配置項和資料 配置項可檢視配置手冊 var option...