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>
相關文章
相關標籤/搜索