麗水連都區(qū)建設(shè)局網(wǎng)站網(wǎng)絡(luò)推廣運(yùn)營推廣
目錄
一.series系列
二.常見組件?
1.標(biāo)題title
2.圖例legend?
3.工具欄toolbox
4.提示框tooltip?
5.坐標(biāo)軸 xAxis yAsix
6.series系列
? ? ? ? 上一篇已經(jīng)介紹了ECharts庫的導(dǎo)入工作和繪制基本的圖標(biāo)，今天我們來了解一下常用的組件，如果對數(shù)據(jù)可視化感興趣的麻煩點(diǎn)個(gè)關(guān)注，內(nèi)容會(huì)持續(xù)更新。
? ? ? ? 如果不清楚ECharts庫的導(dǎo)入過程的可以參考：ECharts導(dǎo)入
在介紹常用組件之前，先了解一下series系列
一.series系列
? ? ? ? 我們知道數(shù)據(jù)的可視化包含了我們可以直接看見的圖表，還包含了數(shù)據(jù)，而這些都包含series系列里，一個(gè)series系列必須包含兩個(gè)要素：圖表數(shù)值data和圖表類型type，有了這兩個(gè)要素?cái)?shù)據(jù)才可以表現(xiàn)出來
常見的圖表類型：
- 折線圖line
- 柱狀圖bar
- 餅圖pie
- 散點(diǎn)圖scatter
- 關(guān)系圖graph
- 樹圖tree
? ? ? ? 例如：一個(gè)折線圖表,type為line，給定數(shù)據(jù)data
<script type="text/javascript">// 因?yàn)樵揹emo會(huì)經(jīng)常更該，所以要銷毀前一個(gè)圖表echarts.init(document.getElementById('div')).dispose();//定義var myChart = echarts.init(document.getElementById('div'));var option={xAxis:{data:['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']},yAxis:{},series:[{type:'line',data:[43,62,56,91,23,5,12,31,38,97,86,57]}]}myChart.setOption(option);
</script>
二.常見組件?
1.標(biāo)題title
- 主標(biāo)題 title
- 副標(biāo)題 subtext
- 位置 left
- 主標(biāo)題樣式 textStyle
- 副標(biāo)題樣式 subtextStyle
- 可見性 show
例如：在上面的例子中加入標(biāo)題
2.圖例legend?
? ? ? ? 圖例legend方便對數(shù)據(jù)的分辨，它的data參數(shù)和series系列搭配使用
var option={legend:{data:['人數(shù)'], //要和series的name對于},xAxis:{data:['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']},yAxis:{},series:[{name:'人數(shù)',type:'line',data:[43,62,56,91,23,5,12,31,38,97,86,57]}]}在數(shù)據(jù)上會(huì)多出legend圖例?
3.工具欄toolbox
- 保存圖片 saveAslmage
- 配置項(xiàng)還原 restore
- 數(shù)據(jù)視圖工具 dataView
- 數(shù)據(jù)區(qū)域縮放 dataZoom
- 動(dòng)態(tài)類型切換 magicType
例如：加上toolbox后
toolbox:{feature:{saveAsImage:{type:'jpg'},dataView:{},restore:{},dataZoom:{},magicType:{type:['line','bar','stack','titled']}}},圖表上會(huì)多出一些工具?
4.提示框tooltip?
提示觸發(fā)方式trigger
item 圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無類目軸的圖表中使用
axis 坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會(huì)使用類目軸的圖表
none什么都不觸發(fā)
例如：在上面的例子中加入提示框
tooltip:{trigger:'axis'},當(dāng)鼠標(biāo)觸碰到圖表坐標(biāo)時(shí)，會(huì)有提示信息
5.坐標(biāo)軸 xAxis yAsix
- ?坐標(biāo)名稱 name
- 類名數(shù)據(jù) data?
y軸的分割設(shè)置：
- splitNUmber 分割段數(shù)
- interval 坐標(biāo)分割間隔
- minlnterval 坐標(biāo)軸最小間隔
- maxlnterval 坐標(biāo)軸最大間隔
6.series系列
- ?類型 type
- 類名名 name
- 數(shù)據(jù)data
- 標(biāo)記點(diǎn) markPoint
markPoint：{
? ? ? ? data：[
{type:'min'},{type:'max'},{value:'value',coord:[x,y]}? ? ? ? //coord 坐標(biāo)
]
}
- 標(biāo)記線 markLine
markLine：{
? ? ? ? data：[
{type:'min'},{type:'max'},{value:'value',coord:[x,y]}? ? ? ? //coord 坐標(biāo)
]
}
全例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<script src="echart.js"></script><style></style>
</head>
<body>
<div style="height: 500px;width: 600px" id="div"></div>
<script type="text/javascript">// 因?yàn)樵揹emo會(huì)經(jīng)常更該，所以要銷毀前一個(gè)圖表echarts.init(document.getElementById('div')).dispose();//定義var myChart = echarts.init(document.getElementById('div'));var option={legend:{data:['人數(shù)'], //要和series的name對于},title:{text:'主標(biāo)題',subtext:'副標(biāo)題',textStyle:{color:'blue',fontSize:20},subtextStyle:{color: 'red',fontSize: 10}},toolbox:{feature:{saveAsImage:{type:'jpg'},dataView:{},restore:{},dataZoom:{},magicType:{type:['line','bar','stack','titled']}}},tooltip:{trigger:'axis'},xAxis:{data:['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']},yAxis:{},series:[{name:'人數(shù)',type:'bar',data:[43,62,56,91,23,5,12,31,38,97,86,57],markPoint:{data:[{type:'min'},{type: 'max'},{coord:[0,70],value:70},]},// markLine:{// date:[// {name:'平均線',type:'min'},// ]// },}]}myChart.setOption(option);</script>
</body>
</html>