App下載

ECharts案例教程

猿友 2021-01-06 16:25:04 瀏覽數(shù) (4067)
反饋

簡介

ECharts(Enterprise Charts,商業(yè)級數(shù)據(jù)圖表)是百度的一個開源的數(shù)據(jù)可視化工具,底層基于 ZRender(一個全新的輕量級 canvas 類庫),可以比較方便的折線圖、柱狀圖、散點圖、K 線圖、餅圖、雷達圖、地圖、和弦圖、力導(dǎo)向布局圖、儀表盤和漏斗圖,同時支持任意維度的堆積和多圖表混合展現(xiàn)等。

案例欣賞

本案例為具有時間軸的折線系列圖,合適用于對照展現(xiàn)數(shù)據(jù),比如某超市年度銷量變化圖,某產(chǎn)品的前期投入資金圖等。

微信截圖_20210106093211

知識儲備

1.標(biāo)簽式單文件引入Echarts。

官方推薦三種使用引入 ECharts 的方式,模塊化包引入、模塊化單文件引入和標(biāo)簽式單文件引入。首篇博客采取了模塊化單文件引入的方式,這類方式可以按需加載文件,是官方推薦的方式。本文我們將使用標(biāo)簽式單文件引入的方式,如果你的項目沒有基于模塊化開發(fā),同時也不基于 AMD 規(guī)范,那末使用標(biāo)簽式單文件方式將會非常方便,我們只需要使用 script 標(biāo)簽引入一個 ECharts 庫便可,可引入的單文件包括:dist/echarts-all.js 和 source/echarts-all.js。前者經(jīng)過緊縮,包括全圖表,包括 world,china 和34個省市級地圖數(shù)據(jù);后者未緊縮,包括全圖表,包括 world,china 和34個省市級地圖數(shù)據(jù),可用于調(diào)試。

2.時間軸控件的使用。

使用時間軸控件,我們需要從兩個方面做準(zhǔn)備,一個是設(shè)置時間軸,一個是設(shè)置每一個時間點(數(shù)據(jù)和標(biāo)題等)。

設(shè)置時間軸。時間軸在 ECharts 里使用 timeline 設(shè)置,每一個圖標(biāo)最多只能具有一個時間軸,主要參數(shù)以下。

分組 參數(shù) 類型 默許值 含義
參數(shù)設(shè)置 data Array [] 時間軸列表,同時也是軸label內(nèi)容
show boolean true 顯示策略,可選為:true(顯示) | false(隱藏)
type string 'time' 模式是時間類型,時間軸間隔根據(jù)時間跨度計算,可選為:'number'
notMerge boolean false 時間軸上多個option切換時是不是進行merge操作,同setOption第2個參數(shù)(詳見實例方法)
realtime boolean true 拖拽或點擊改變時間軸是不是實時顯示,在不支持Canvas的閱讀器中該值自動強迫置為false
播放控制 autoPlay boolean false 是不是自動播放
loop boolean true 是不是循環(huán)播放
playInterval number 2000 播放時間間隔
currentIndex number 0 當(dāng)前索引位置,對應(yīng)options數(shù)組,用于指定顯示特定系列
樣式設(shè)置 width number|string 自適應(yīng) 時間軸寬度,默許為總寬度 - x - x2,指定width后將疏忽x2。
height number|string 50 時間軸高度
x number|string 80 時間軸左上角橫坐標(biāo)
y number|string null 時間軸左上角縱坐標(biāo),默許無,隨y2定位,
x2 number|string 80 時間軸右下角橫坐標(biāo)
y2 number|string 0 時間軸右下角縱坐標(biāo)
padding number|Array 5 內(nèi)邊距,單位px,接受數(shù)組分別設(shè)定上右下左側(cè)距,同css。
backgroundColor color 'rgba(0,0,0,0)' 背景色彩,默許透明。
borderWidth number 0 邊框線寬
borderColor color '#ccc' 邊框色彩
controlPosition string 'left' 播放控制器位置,可選為:'left' | 'right' | 'none'
lineStyle Object 參見代碼 時間軸軸線樣式,lineStyle控制線條樣式,(詳見lineStyle)
label Object 參見代碼 時間軸標(biāo)簽文本
checkpointStyle Object 參見代碼 時間軸當(dāng)前點
controlStyle Object 參見代碼 時間軸控制器樣式,可指定正常和高亮色彩
symbol string 'emptyDiamond' 軸點symbol,同serie.symbol
symbolSize number 4 軸點symbol,同serie.symbolSize

注意:

a++. width、height、x、x2、y、y2等設(shè)置大小位置的參數(shù),類型為 number|string,可以接受數(shù)值型,單位為 px,也可接受百分比(字符串),如50%表示居中顯示。

b++. lineStyle 的默許值為{color: '#666', width: 1, type: 'dashed'}

c++. label 的默許值為代碼所示。參數(shù)解釋以下

show : 是不是顯示 ;

interval : 挑選間隔,默許為'auto',可選為:'auto'(自動隱藏顯示不下的) | 0(全部顯示) | {number} ;

rotate : 旋轉(zhuǎn)角度,默許為0,不旋轉(zhuǎn),正值為逆時針,負(fù)值為順時針,可選為:⑼0 ~ 90 ;

formatter : 間隔名稱格式器:{string}(Template) | {Function} ;

textStyle : 文字樣式(詳見textStyle)

{ show: true, interval: 'auto', rotate: 0, formatter: null, textStyle: { color: '#333' } }

d++. checkpointStyle 的參數(shù)解釋以下,默許值為代碼所示。

symbol : 當(dāng)前點 symbol,默許隨軸上的 symbol 

symbolSize : 當(dāng)前點 symbol 大小,默許隨軸上 symbol 大小 

color : 當(dāng)前點 symbol 色彩,默許為隨當(dāng)前點色彩,可指定具體色彩,如無則為'#1e90ff' 

borderColor : 當(dāng)前點 symbol 邊線色彩 

borderWidth : 當(dāng)前點 symbol 邊線寬度 

label 同 c

{ symbol : 'auto', symbolSize : 'auto', color : 'auto', borderColor : 'auto', borderWidth : 'auto', label: { show: false, textStyle: { color: 'auto' } } }

e++. controlStyle 的默許值為

{ normal : { color : '#333'}, emphasis : { color : '#1e90ff'} }

樣式參數(shù)在時間軸上的作用效果見下圖詳視。

微信截圖_20210106093319


設(shè)置每一個時間點。第2步是設(shè)置每一個具體的時間點,每一個時間點就是1個圖標(biāo),包括標(biāo)題、圖例、坐標(biāo)軸、數(shù)據(jù)等,固然一般坐標(biāo)軸、圖例等不變,僅僅改變標(biāo)題和數(shù)據(jù)。

var option = { //時間軸設(shè)置 timeline : {}, //時間點設(shè)置 options : [ //第1個時間點 {}, //第2個時間點 {}, //... ] }

實現(xiàn)進程

然后我們來解讀實現(xiàn)進程。

時間軸里面我們設(shè)置了時間戳,僅僅顯示年份;為保證美觀,調(diào)劑了時間軸的位置;同時設(shè)定了時間軸播放設(shè)置。

var option = { 
//時間軸設(shè)置 timeline : { 
//時間軸時間列表 data:[ '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01' ], 
//自定義處理,只顯示年份 label:{ formatter : function(s) { return s.slice(0, 4); } }, 
//時間軸的位置設(shè)定 height:80, x:50, padding:[40,10,10,10], 
//時間軸播放控制 autoPlay : true, playInterval : 2000 }, 
//時間點設(shè)置 options : [ //第1個時間點 {}, //第2個時間點 {}, //... ] }

然后設(shè)置時間點,先看2012年的數(shù)據(jù)設(shè)置,我們設(shè)置標(biāo)題、提示、圖例、坐標(biāo)軸、繪制數(shù)據(jù)線。

var option = { 

//時間軸設(shè)置 timeline : { 

//時間軸時間列表 data:[ '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01' ], //自定義處理,只顯示年份 label:{ formatter : function(s) { return s.slice(0, 4); } }, 

//時間軸的位置設(shè)定 height:80, x:50, padding:[40,10,10,10], 

//時間軸播放控制 autoPlay : true, playInterval : 2000 }, 

//時間點設(shè)置 options : [ 

//第1個時間點 

//2002年數(shù)據(jù)表,新增內(nèi)容 { title:{ text:'2002年貨物銷量圖', subtext:'純屬捏造,如有雷同,人品爆發(fā)。' }, //設(shè)置提示 tooltip: { show: true }, 

//設(shè)置圖例 legend: { data:['銷量'] }, 

//設(shè)置坐標(biāo)軸 xAxis : [ { type : 'category', data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"], axisLabel:{ margin:⑵0, textStyle:{ color:'#999', fontWeight:'bold' } } } ], yAxis : [ { type : 'value' } ], series : [ { type:'line', data:[5, 20, 38, 10, 24, 20,24,32], 

//繪制平均線 markLine : { data : [ {type : 'average', name: '平均值'} ] }, 

//繪制最高最低點 markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ] }, 

//第2個時間點 {}, //... ] }

其他時間點只需要設(shè)置于2002年不同的地方便可,本例我們僅僅設(shè)置標(biāo)題和數(shù)據(jù)表。

var option = { 

//時間軸設(shè)置 timeline : { 

//時間軸時間列表 data:[ '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01' ], 

//自定義處理,只顯示年份 label:{ formatter : function(s) { return s.slice(0, 4); } }, 

//時間軸的位置設(shè)定 height:80, x:50, padding:[40,10,10,10], 

//時間軸播放控制 autoPlay : true, playInterval : 2000 }, 

//時間點設(shè)置 options : [ 

//第1個時間點 

//2002年數(shù)據(jù)表 { title:{ text:'2002年貨物銷量圖', subtext:'純屬捏造,如有雷同,人品爆發(fā)。' }, 

//設(shè)置提示 tooltip: { show: true }, 

//設(shè)置圖例 legend: { data:['銷量'] }, 

//設(shè)置坐標(biāo)軸 xAxis : [ { type : 'category', data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"], axisLabel:{ margin:⑵0, textStyle:{ color:'#999', fontWeight:'bold' } } } ], yAxis : [ { type : 'value' } ], series : [ { type:'line', data:[5, 20, 38, 10, 24, 20,24,32], 

//繪制平均線 markLine : { data : [ {type : 'average', name: '平均值'} ] }, 

//繪制最高最低點 markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ] }, 

//第2個時間點 

//2003年數(shù)據(jù)表,新增內(nèi)容 { title:{ text:'2003年貨物銷量圖', subtext:'純屬捏造,如有雷同,人品爆發(fā)。' }, series : [ { type:'line', data:[10, 20, 36, 18, 26, 16,20,34], 

//繪制平均線 markLine : { data : [ {type : 'average', name: '平均值'} ] }, 

//繪制最高最低點 markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ] }, //第3個時間點 {}, //... ] }


0 人點贊