ECharts.js 交互組件

ECharts.js有很多的交互組件，一般經常用到的組件有這些：

title：標題組件，包含主標題和副標題。

legend：圖例組件,展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。

xAxis：直角坐標系 grid 中的 x 軸，一般情況下單個 grid 組件最多只能放左右兩個 x 軸，多於兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。

yAxis：直角坐標系 grid 中的 y 軸，一般情況下單個 grid 組件最多只能放左右兩個 y 軸，多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。

tooltip：提示框組件，就是當你的鼠標懸浮在圖表上的提示內容。

toolbox：工具欄組件。內置有導出圖片、數據視圖、動態類型切換、數據區域縮放、重置五個工具。

series：系列列表。我理解為數據列表。這裏可以定義每組數據內容，以及數據的展現形式。

timeline:提供了在多個ECharts option 之間進行切換、播放等操作的功能。

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>

ECharts.js學習（三）