ECharts案例教程

簡(jiǎn)介

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

案例欣賞

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

知識(shí)儲(chǔ)備

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

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

2.時(shí)間軸控件的使用。

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

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

注意：

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'（自動(dòng)隱藏顯示不下的） | 0（全部顯示） | {number} ；

rotate : 旋轉(zhuǎn)角度，默許為0，不旋轉(zhuǎn)，正值為逆時(shí)針，負(fù)值為順時(shí)針，可選為：⑼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)前點(diǎn) symbol，默許隨軸上的 symbol 

symbolSize : 當(dāng)前點(diǎn) symbol 大小，默許隨軸上 symbol 大小 

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

borderColor ： 當(dāng)前點(diǎn) symbol 邊線色彩 

borderWidth ： 當(dāng)前點(diǎn) 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ù)在時(shí)間軸上的作用效果見下圖詳視。

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

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

實(shí)現(xiàn)進(jìn)程

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

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

var option = {             
//時(shí)間軸設(shè)置 timeline : {            
//時(shí)間軸時(shí)間列表 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í)間軸的位置設(shè)定 height:80, x:50, padding:[40,10,10,10],         
//時(shí)間軸播放控制 autoPlay : true, playInterval : 2000 },          
//時(shí)間點(diǎn)設(shè)置 options : [ //第1個(gè)時(shí)間點(diǎn) {}, //第2個(gè)時(shí)間點(diǎn) {}, //... ] }

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

var option = { 
//時(shí)間軸設(shè)置 timeline : { 
//時(shí)間軸時(shí)間列表 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í)間軸的位置設(shè)定 height:80, x:50, padding:[40,10,10,10], 
//時(shí)間軸播放控制 autoPlay : true, playInterval : 2000 }, 
//時(shí)間點(diǎn)設(shè)置 options : [ 
//第1個(gè)時(shí)間點(diǎn) 
//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: '平均值'} ] }, 
//繪制最高最低點(diǎn) markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ] }, 
//第2個(gè)時(shí)間點(diǎn) {}, //... ] }

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

var option = { 
//時(shí)間軸設(shè)置 timeline : { 
//時(shí)間軸時(shí)間列表 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í)間軸的位置設(shè)定 height:80, x:50, padding:[40,10,10,10], 
//時(shí)間軸播放控制 autoPlay : true, playInterval : 2000 }, 
//時(shí)間點(diǎn)設(shè)置 options : [ 
//第1個(gè)時(shí)間點(diǎn) 
//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: '平均值'} ] }, 
//繪制最高最低點(diǎn) markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ] }, 
//第2個(gè)時(shí)間點(diǎn) 
//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: '平均值'} ] }, 
//繪制最高最低點(diǎn) markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ] }, //第3個(gè)時(shí)間點(diǎn) {}, //... ] }