ECharts.js學習（三）
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>
- 1. ECharts.js學習（二）
- 2. ECharts.js學習（一）
- 3. ECHarts.js
- 4. ECharts.js
- 5. ECharts.js學習（二）動態數據綁定
- 6. ECharts.js學習（一） 簡單入門
- 7. Echarts.js使用
- 8. echarts.js官網
- 9. echarts.js初步
- 10. ECharts.js（四）-疊加
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. ECharts.js學習（二）
- 2. ECharts.js學習（一）
- 3. ECHarts.js
- 4. ECharts.js
- 5. ECharts.js學習（二）動態數據綁定
- 6. ECharts.js學習（一） 簡單入門
- 7. Echarts.js使用
- 8. echarts.js官網
- 9. echarts.js初步
- 10. ECharts.js（四）-疊加