ECharts 交互組件

ECharts 提供了很多交互組件：例組件 legend、標題組件 title、視覺映射組件 visualMap、數據區域縮放組件 dataZoom、時間線組件 timeline。

接下來的內容我們將介紹如何使用數據區域縮放組件 dataZoom。

dataZoom

dataZoom 組件可以實現通過滑鼠滾輪滾動，放大縮小圖表的功能。

默認情況下 dataZoom 控制 x 軸，即對 x 軸進行數據窗口縮放和數據窗口平移操作。

實例

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: {
                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"]]
        }
    ]
}

上面的實例只能拖動 dataZoom 組件來縮小或放大圖表。如果想在坐標系內進行拖動，以及用滑鼠滾輪（或移動觸屏上的兩指滑動）進行縮放，那麼需要 再再加上一個 inside 型的 dataZoom 組件。

在以上實例基礎上我們再增加 type: 'inside' 的配置資訊：

實例

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% 的位置。
        }
    ],
    ...
}

當然我們可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數軸。

實例

var data1 = [];
var data2 = [];
var data3 = [];

var random = function (max) {
    return (Math.random() * max).toFixed(3);
};

for (var i = 0; i < 500; i++) {
    data1.push([random(15), random(10), random(1)]);
    data2.push([random(10), random(10), random(1)]);
    data3.push([random(15), random(10), random(1)]);
}

option = {
    animation: false,
    legend: {
        data: ['scatter', 'scatter2', 'scatter3']
    },
    tooltip: {
    },
    xAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    yAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    dataZoom: [
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '93%',
            start: 29,
            end: 36
        },
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 29,
            end: 36
        }
    ],
    series: [
        {
            name: 'scatter',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data1
        },
        {
            name: 'scatter2',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data2
        },
        {
            name: 'scatter3',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8,
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data3
        }
    ]
}