echartdatazoom詳解

一、什麼是echartdatazoom

Echartdatazoom是一個用於數據區域縮放和漫遊的接口組件，可在ECharts中提供數據區域縮放、漫遊等交互功能。通過數據區域的縮放和漫遊功能，用戶可以更加方便的瀏覽大量數據，快速定位關注區間，更全面準確地觀察數據趨勢，提升數據分析用戶體驗。

二、echartdatazoom的作用

echartdatazoom主要是用於在圖表中進行數據區域的縮放和漫遊。在進行大數據量的數據分析時，由於數據量的巨大，很多時候需要將某個特定區域進行放大，或者是整個數據區域進行漫遊，這時使用echartdatazoom則可以輕鬆實現數據的快速定位和查詢。

三、如何配置echartdatazoom

在ECharts中，通過配置xAxis或yAxis的axisType為’value’，並在dataZoom內開啟即可使用數據區域縮放和漫遊功能。

    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項和數據
    var option = {
        xAxis: {
            type: 'value',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            data: ['a', 'b', 'c', 'd', 'e']
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                start: 50,
                end: 100
            },
            {
                type: 'slider',
                yAxisIndex: 0,
                start: 30,
                end: 80
            }
        ],
        series: [{
            data: [10, 20, 30, 40, 50, 60, 70],
            type: 'line'
        }]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);

四、echartdatazoom的常見類型

目前，ECharts中主要有四種類型的echartdatazoom：

1、slider：滑動條型數據區域縮放和漫遊組件，可以水平或垂直放置，通過拖拽或點擊的方式調整區域範圍。

2、inside：內置型數據區域縮放和漫遊組件，一般跟別的坐標系組件（比如geo、polar等）一起使用，可以通過鼠標滾輪或兩指縮放進行縮放，通過鼠標拖拽進行漫遊。

3、select：行列選擇型組件，使用鼠標框選的方式進行數據區域選擇，效果類似於brush。

4、toolbox：工具箱型數據區域縮放和漫遊組件，可以通過toolbox中的toolbox.dataZoomInside和toolbox.dataZoomSlider等配置項開啟相應的功能，並可通過toolbox.iconStyle中的emphasis來設置高亮時的圖標樣式。

五、echartdatazoom的聯動

在ECharts中，可以將多個圖表組合在一起，實現聯動的效果。在聯動時，只需要將多個圖表的dataZoom中共用一個instanceId即可。具體配置如下：

    // 基於準備好的dom，初始化echarts實例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定圖表的配置項和數據
    var option1 = {
        xAxis: {
            type: 'value',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            data: ['a', 'b', 'c', 'd', 'e']
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                start: 50,
                end: 100,
                dataBackground: {
                    areaStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    },
                    lineStyle: {
                        opacity: 0.8,
                        color: '#8392A5'
                    }
                },
                fillerColor: 'rgba(255,255,255,0.2)',
                handleStyle: {
                    color: 'rgba(255,255,255,0.9)'
                }
            }
        ],
        series: [{
            data: [10, 20, 30, 40, 50, 60, 70],
            type: 'line'
        }]
    };

    var option2 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                start: 50,
                end: 100,
                dataBackground: {
                    areaStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    },
                    lineStyle: {
                        opacity: 0.8,
                        color: '#8392A5'
                    }
                },
                fillerColor: 'rgba(255,255,255,0.2)',
                handleStyle: {
                    color: 'rgba(255,255,255,0.9)'
                }
            }
        ],
        series: [{
            data: [10, 20, 30, 40, 50, 60, 70],
            type: 'bar'
        }]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart1.setOption(option1);
    myChart2.setOption(option2);

    // 設置兩個圖表聯動
    myChart1.on('dataZoom', function (params) {
        if (params.batch) {
            myChart2.dispatchAction({
                type: 'dataZoom',
                batch: true,
                start: params.start,
                end: params.end
            });
        } else {
            myChart2.dispatchAction({
                type: 'dataZoom',
                start: params.start,
                end: params.end
            });
        }
    });

    myChart2.on('dataZoom', function (params) {
        if (params.batch) {
            myChart1.dispatchAction({
                type: 'dataZoom',
                batch: true,
                start: params.start,
                end: params.end
            });
        } else {
            myChart1.dispatchAction({
                type: 'dataZoom',
                start: params.start,
                end: params.end
            });
        }
    });

六、總結

echartdatazoom是ECharts中非常實用的一個組件，通過它的數據區域縮放和漫遊功能，可以方便地進行大量數據的快速定位和查詢。在使用echartdatazoom時，需要注意其常見類型和聯動的配置，以此提升數據分析的效率和精度。