目的:借助於影象化手段,清晰有效地傳達與溝通資訊。
資料視覺化可以把資料從冰冷的數字轉換成圖形,揭示蘊含在資料中的規律和道理
常見的資料視覺化庫:
引入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);
需要了解的主要配置:series
xaxis
yaxis
grid
tooltip
title
legend
color
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...