ECharts在圖表中加入交互組件

ECharts 有很多的交互組件，例如：

• 圖例組件 legend
  
• 標題組件 title
  
• 視覺映射組件 visualMap
  
• 數(shù)據(jù)區(qū)域縮放組件 dataZoom
  
• 時間線組件 timeline
  

這里我們不一一講解每個組件的加入，只通過介紹加入 數(shù)據(jù)區(qū)域縮放組件 dataZoom 就可以掌握 Echarts 交互組件的加入操作。

介紹 Echarts 數(shù)據(jù)區(qū)域縮放組件（dataZoom）

數(shù)據(jù)可視化的基本交互需求是：概覽數(shù)據(jù)整體，按照需要關注數(shù)據(jù)細節(jié)。

dataZoom 組件完美的在直角坐標系（grid）、極坐標系（polar）中實現(xiàn)了這一功能。

如下例子：

點擊編輯實例 》》

• dataZoom 組件是對數(shù)軸（axis） 進行 數(shù)據(jù)窗口縮放 和 數(shù)據(jù)窗口平移 操作。

可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數(shù)軸。

• dataZoom 組件可同時存在多個，起到共同控制的作用?？刂仆粋€數(shù)軸的組件，會自動聯(lián)動。下面例子中會詳細說明。
• dataZoom 的運行原理是通過 數(shù)據(jù)過濾 來達到 數(shù)據(jù)窗口縮放 的效果。數(shù)據(jù)過濾模式的設置不同，效果也不同，參見：dataZoom.filterMode。
• dataZoom 的數(shù)據(jù)窗口范圍的設置，目前支持兩種形式：百分比形式：參見 dataZoom.start 和 dataZoom.end。絕對數(shù)值形式：參見 dataZoom.startValue 和 dataZoom.endValue。

dataZoom 組件支持的幾種子組件：

• 內置型數(shù)據(jù)區(qū)域縮放組件（dataZoomInside）：內置于坐標系中。
• 滑動條型數(shù)據(jù)區(qū)域縮放組件（dataZoomSlider）：有單獨的滑動條操作。
• 框選型數(shù)據(jù)區(qū)域縮放組件（dataZoomSelect）：全屏的選框進行數(shù)據(jù)區(qū)域縮放。入口和配置項均在 toolbox中。

Echarts 在代碼加入 dataZoom 組件

先只在單獨的一個橫軸上加上 dataZoom 組件，代碼示例如下：

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {   // 這個dataZoom組件，默認控制x軸。
            type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
            start: 10,      // 左邊在 10% 的位置。
            end: 60         // 右邊在 60% 的位置。
        }
    ],
    series: [
        {
            type: 'scatter', // 這是個『散點圖』
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
        }
    ]
}

結果顯示如下：

點擊編輯實例 》》

接下來我們來實現(xiàn)在坐標系內進行拖動，以及用滾輪（或移動觸屏上的兩指滑動）進行縮放，方法很簡單：再加上一個 inside 型的 dataZoom 組件即可。

具體的實現(xiàn)是直接在上面的 option.dataZoom 中增加：

option = {
    ...,
    dataZoom: [
        {   // 這個dataZoom組件，默認控制x軸。
            type: 'slider', // 這個 dataZoom 組件是 slider 型 dataZoom 組件
            start: 10,      // 左邊在 10% 的位置。
            end: 60         // 右邊在 60% 的位置。
        },
        {   // 這個dataZoom組件，也控制x軸。
            type: 'inside', // 這個 dataZoom 組件是 inside 型 dataZoom 組件
            start: 10,      // 左邊在 10% 的位置。
            end: 60         // 右邊在 60% 的位置。
        }
    ],
    ...
}

執(zhí)行上述代碼就能在坐標系中進行滑動，以及使用滾輪縮放了。

效果如下：

點擊編輯實例 》》

如果想 y 軸也能夠縮放，那么在 y 軸上也加上 dataZoom 組件：

option = {
    ...,
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 10,
            end: 60
        },
        {
            type: 'inside',
            xAxisIndex: 0,
            start: 10,
            end: 60
        },
        {
            type: 'slider',
            yAxisIndex: 0,
            start: 30,
            end: 80
        },
        {
            type: 'inside',
            yAxisIndex: 0,
            start: 30,
            end: 80
        }
    ],
    ...
}

可以看到如下結果：

點擊編輯實例 》》