ECharts的知識點有哪些

本文小編為大家詳細介紹“ECharts的知識點有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“ECharts的知識點有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

簡介

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

知識儲備

1.標簽式單文件引入Echarts。

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

2.時間軸控件的使用。

使用時間軸控件，我們需要從兩個方面做準備，一個是設置時間軸，一個是設置每一個時間點（數據和標題等）。

設置時間軸。時間軸在 ECharts 里使用 timeline 設置，每一個圖標最多只能具有一個時間軸，主要參數以下。

注意：

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

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

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

show : 是不是顯示 ；

interval : 挑選間隔，默許為'auto'，可選為：'auto'（自動隱藏顯示不下的） | 0（全部顯示） | {number} ；

rotate : 旋轉角度，默許為0，不旋轉，正值為逆時針，負值為順時針，可選為：⑼0 ~ 90 ；

formatter ： 間隔名稱格式器：{string}（Template） | {Function} ；

textStyle : 文字樣式（詳見textStyle）

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

d++. checkpointStyle 的參數解釋以下，默許值為代碼所示。

symbol : 當前點 symbol，默許隨軸上的 symbol 

symbolSize : 當前點 symbol 大小，默許隨軸上 symbol 大小 

color : 當前點 symbol 色彩，默許為隨當前點色彩，可指定具體色彩，如無則為'#1e90ff' 

borderColor ： 當前點 symbol 邊線色彩 

borderWidth ： 當前點 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'} }

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

設置每一個時間點。第2步是設置每一個具體的時間點，每一個時間點就是1個圖標，包括標題、圖例、坐標軸、數據等，固然一般坐標軸、圖例等不變，僅僅改變標題和數據。

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

實現進程

然后我們來解讀實現進程。

時間軸里面我們設置了時間戳，僅僅顯示年份；為保證美觀，調劑了時間軸的位置；同時設定了時間軸播放設置。

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

然后設置時間點，先看2012年的數據設置，我們設置標題、提示、圖例、坐標軸、繪制數據線。

var option = { //時間軸設置 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); } }, //時間軸的位置設定 height:80, x:50, padding:[40,10,10,10], //時間軸播放控制 autoPlay : true, playInterval : 2000 }, //時間點設置 options : [ //第1個時間點 //2002年數據表,新增內容 { title:{ text:'2002年貨物銷量圖', subtext:'純屬捏造，如有雷同，人品爆發。' }, //設置提示 tooltip: { show: true }, //設置圖例 legend: { data:['銷量'] }, //設置坐標軸 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個時間點 {}, //... ] }

其他時間點只需要設置于2002年不同的地方便可，本例我們僅僅設置標題和數據表。

var option = { //時間軸設置 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); } }, //時間軸的位置設定 height:80, x:50, padding:[40,10,10,10], //時間軸播放控制 autoPlay : true, playInterval : 2000 }, //時間點設置 options : [ //第1個時間點 //2002年數據表 { title:{ text:'2002年貨物銷量圖', subtext:'純屬捏造，如有雷同，人品爆發。' }, //設置提示 tooltip: { show: true }, //設置圖例 legend: { data:['銷量'] }, //設置坐標軸 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年數據表，新增內容 { title:{ text:'2003年貨物銷量圖', subtext:'純屬捏造，如有雷同，人品爆發。' }, 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個時間點 {}, //... ] }

讀到這里，這篇“ECharts的知識點有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。