ECharts.js 交互組件javascript
ECharts.js有不少的交互組件,通常常常用到的組件有這些:java
title:標題組件,包含主標題和副標題。echarts
legend:圖例組件,展示了不一樣系列的標記(symbol),顏色和名字。能夠經過點擊圖例控制哪些系列不顯示。函數
xAxis:直角座標系 grid 中的 x 軸,通常狀況下單個 grid 組件最多隻能放左右兩個 x 軸,多於兩個 x 軸須要經過配置 offset 屬性防止同個位置多個 x 軸的重疊。工具
yAxis:直角座標系 grid 中的 y 軸,通常狀況下單個 grid 組件最多隻能放左右兩個 y 軸,多於兩個 y 軸須要經過配置 offset 屬性防止同個位置多個 Y 軸的重疊。佈局
tooltip:提示框組件,就是當你的鼠標懸浮在圖表上的提示內容。this
toolbox:工具欄組件。內置有導出圖片、數據視圖、動態類型切換、數據區域縮放、重置五個工具。插件
series:系列列表。我理解爲數據列表。這裏能夠定義每組數據內容,以及數據的展示形式。rest
timeline:提供了在多個ECharts option 之間進行切換、播放等操做的功能。code
dataZoom:用於區域縮放,從而能自由關注細節的數據信息,或者概覽數據總體,或者去除離羣點的影響。
....
官方給出的案例是dataZoom組件。它是用於區域縮放,從而能自由關注細節的數據信息,或者概覽數據總體,或者去除離羣點的影響。主要是對 數軸(axis) 進行操做。
toolbox組件
其中不少組件其實咱們都會用到,不過使用的都是一些基本配置。好比title組件,每每只寫一個text 值。legend,會一些每一個系列數據的name等等。
由於後面項目須要將圖表保存爲圖片,以及一種數據多種展示形勢,因此就研究一下toolbox組件的使用。
toolbox參數:
show:工具欄默認是隱藏的。因此必定要設置show爲true顯示出來。
orient:工具欄的的佈局方向,可選值有horizontal(橫向)和vertical(豎向)。默認值是horizontal
itemSize:工具欄的大小。默認值是15。
itemGap:工具欄每一個工具之間的距離,默認值是10。
showTitle:鼠標懸浮的是否顯示每一個工具的說明,默認是true。
feature:這個是設置工具欄裏要顯示哪些工具,以及這些工具的樣式等。
默認的插件工具:
savaAsImage:保存圖片
restore:還原配置
dataView:數據視圖工具,能夠展示圖表所用的數據,而且能夠編輯數據,再將編輯後的數據展現出來。同時也能夠設置爲數據爲只讀。
optionToContent:而且能夠經過對顯示出來的數據進行排版編輯,以HTML展示。
optionToOption:在使用 optionToContent 的狀況下,若是支持數據編輯後的刷新,須要自行經過該函數實現組裝 option 的邏輯。
dataZoom:數據區域縮放。目前只支持直角座標系的縮放。
xAxisIndex、yAxisIndex:分別控制xAxis和yAxis軸的縮放。
除了使用默認的工具意外,咱們還能夠根據需求自定義工具。須要注意的是,每一個自定義的工具,名稱必須以「my」打頭。在onclick函數中編寫須要進行的操做。
toolbox:{ show:true, orient:'vertical', feature:{ magicType:{type:['line','bar']}, restore:{}, saveAsImage:{}, dataZoom:{ show:true, xAxisIndex:[0,3] }, myTool1:{ show:true, title:'自定義工具一', icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', onclick:function(){ alert("this is myTool1"); } }, myTool2:{ show:true, title:'自定義工具二', icon: 'image://http://echarts.baidu.com/images/favicon.png', onclick:function(){ alert("this is myTool2"); } } } }
magicType:設置可切換的圖表類型。目前支持的只有4種,line折線圖、bar柱狀圖、stack堆疊模式、tiled平鋪模式。
brush:選框組件的控制按鈕。
iconStyle:公用的icon樣式設置
zlevel:全部圖形的zlevel值。zlevel用於Canvas分層。
z:全部圖形的z值。z不會建立Canvas層。比zlevel等級低。
left、top、right、bottom、width、height:工具欄的樣式,邊距設置。
<script type="text/javascript"> //初始化echarts實例 var myChart = echarts.init(document.getElementById('chartmain')); var option = { title:{ text:"馬雲和馬化騰期末成績圖", subtext:'本圖表純屬虛構', }, anmation:false, legend:{ data:["馬雲成績","馬化騰成績"], left:'50%', top:5 }, tooltip:{ trigger:"axis" }, xAxis:{ type:'category', boundaryGap:false, data:['語文','數學','英語','歷史','體育','生物','化學'] }, yAxis:{ type:'value', axisLabel:{ formatter:'{value}分' }, min:20 }, toolbox:{ show:true, orient:'vertical', itemSize:20, itemGap:20, feature:{ dataView:{ readOnly:true, backgroundColor:'#f5f5f5', optionToContent:function(opt){ var axisData = opt.xAxis[0].data; var series = opt.series; var table ='<table style="width:100%;text-align:center;border:1px solid red;"><tbody><tr>' +'<td>學生</td>' +'<td>'+series[0].name+'</td>' +'<td>'+series[1].name+'</td>' +'</tr>'; for (var i = 0; i < axisData.length; i++) { table +='<tr>' +'<td>'+axisData[i]+'</td>' +'<td>'+series[0].data[i]+'</td>' +'<td>'+series[1].data[i]+'</td>' +'</tr>' } table +='</tbody></table>'; return table; } }, dataZoom:{ show:true, xAxisIndex:[0,3] }, magicType:{type:['line','bar','stack','tiled']}, restore:{}, saveAsImage:{}, myTool1:{ show:true, title:'自定義工具一', icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', onclick:function(){ alert("this is myTool1"); } }, myTool2:{ show:true, title:'自定義工具二', icon: 'image://http://echarts.baidu.com/images/favicon.png', onclick:function(){ alert("this is myTool2"); } } }, }, series:[ { name:'馬雲成績', type:'line', data:[90,88,75,82,95,89,97], markLine:{ data:[{type:'average',name:'平均值'}] }, markPoint:{ data:[ {type:'max',name:'最高分'}, {type:'min',name:'最低分'} ] } }, { name:'馬化騰成績', type:'line', data:[55,45,99,60,35,45,74], markLine:{ data:[{type:'average',name:'平均值'}] }, markPoint:{ data:[ {type:'max',name:'最高分'}, {type:'min',name:'最低分'} ] } } ] } myChart.setOption(option); </script>