数据区域缩放(DataZoom)

数据区域缩放(DataZoom)的基本概念

数据区域缩放是ECharts中一种常见的交互功能，允许用户通过鼠标操作来缩放和平移图表的数据区域。这种交互方式特别适用于数据量较大的场景，可以帮助用户聚焦在特定的数据区间进行分析。ECharts提供了多种类型的DataZoom组件，包括内置型(inside)和滑动条型(slider)，可以单独使用也可以组合使用。

DataZoom的类型与配置

内置型DataZoom(inside)

内置型DataZoom直接内嵌在坐标系中，用户可以通过鼠标拖拽、滚轮缩放等方式操作。配置示例：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }],
    dataZoom: [{
        type: 'inside',
        xAxisIndex: 0,
        start: 0,
        end: 50
    }]
};

滑动条型DataZoom(slider)

滑动条型DataZoom以滑动条的形式显示在坐标系下方，用户可以通过拖动滑块来缩放数据。配置示例：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }],
    dataZoom: [{
        type: 'slider',
        xAxisIndex: 0,
        start: 30,
        end: 70
    }]
};

DataZoom的常用配置项

基本配置

• type: 指定DataZoom类型，'inside'或'slider'
• xAxisIndex/yAxisIndex: 控制的坐标轴索引
• start/end: 初始范围的起始和结束百分比(0-100)
• filterMode: 过滤模式，'filter'或'weakFilter'或'empty'

高级配置

dataZoom: [{
    type: 'slider',
    show: true,
    xAxisIndex: [0],
    start: 0,
    end: 100,
    height: 20,
    bottom: 10,
    backgroundColor: '#eee',
    fillerColor: 'rgba(144,197,237,0.2)',
    borderColor: '#aaa',
    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
    handleSize: '80%',
    handleStyle: {
        color: '#fff',
        shadowBlur: 3,
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
    }
}]

多DataZoom联动

ECharts支持配置多个DataZoom组件，并且可以让它们联动。例如，可以同时控制x轴和y轴的缩放：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }],
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 30,
            end: 70
        },
        {
            type: 'inside',
            yAxisIndex: 0,
            start: 30,
            end: 70
        }
    ]
};

DataZoom的事件处理

ECharts提供了DataZoom相关的事件，可以监听用户的操作：

myChart.on('dataZoom', function(params) {
    console.log('dataZoom事件:', params);
    // params包含以下信息:
    // batch: 多个dataZoom同时触发时的批次信息
    // start: 开始百分比
    // end: 结束百分比
    // type: 触发类型，如'drag'、'zoom'等
});

动态更新DataZoom

可以通过setOption方法动态更新DataZoom的配置：

// 获取当前dataZoom的范围
var option = myChart.getOption();
var currentStart = option.dataZoom[0].start;
var currentEnd = option.dataZoom[0].end;

// 设置新的范围
myChart.setOption({
    dataZoom: [{
        start: currentStart + 10,
        end: currentEnd - 10
    }]
});

DataZoom与大数据量的优化

当处理大数据量时，DataZoom的性能优化尤为重要：

option = {
    dataset: {
        source: largeData // 假设这是一个大数据集
    },
    dataZoom: [{
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'weakFilter' // 使用弱过滤模式提高性能
    }],
    series: {
        type: 'line',
        progressive: 1000, // 增量渲染
        progressiveThreshold: 5000 // 数据量超过5000时启用增量渲染
    }
};

DataZoom的特殊应用场景

双轴图表中的DataZoom

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['蒸发量', '降水量', '温度']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name: '温度',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ],
    dataZoom: [
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 100
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '93%',
            start: 0,
            end: 100
        },
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 0,
            end: 100
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 0,
            end: 100
        }
    ]
};

地图中的DataZoom

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
        }
    },
    dataZoom: [
        {
            type: 'slider',
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            height: 20,
            filterMode: 'filter'
        }
    ],
    series: [
        {
            name: 'China',
            type: 'map',
            map: 'china',
            roam: true,
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: 934},
                {name: '天津', value: 544},
                {name: '上海', value: 965},
                {name: '重庆', value: 822},
                {name: '河北', value: 453},
                // 更多数据...
            ]
        }
    ]
};

DataZoom的样式定制

可以通过多种方式自定义DataZoom的样式：

dataZoom: [{
    type: 'slider',
    backgroundColor: '#eee',
    dataBackground: {
        lineStyle: {
            color: '#2f4554',
            width: 1,
            opacity: 0.3
        },
        areaStyle: {
            color: 'rgba(47,69,84,0.3)'
        }
    },
    selectedDataBackground: {
        lineStyle: {
            color: '#c23531',
            width: 2
        },
        areaStyle: {
            color: 'rgba(194,53,49,0.3)'
        }
    },
    fillerColor: 'rgba(167,183,204,0.4)',
    borderColor: '#aaa',
    handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
    handleSize: '80%',
    handleStyle: {
        color: '#fff',
        shadowBlur: 3,
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
    },
    labelPrecision: 0,
    labelFormatter: function(value) {
        return value.toFixed(0) + '%';
    },
    showDetail: true,
    showDataShadow: 'auto',
    realtime: true,
    textStyle: {
        color: '#333'
    },
    xAxisIndex: 0,
    yAxisIndex: 0
}]

DataZoom与时间轴

当处理时间序列数据时，DataZoom可以很好地配合时间轴使用：

option = {
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        data: (function() {
            var data = [];
            var now = new Date();
            var value = Math.random() * 1000;
            for (var i = 0; i < 1000; i++) {
                data.push([
                    new Date(now.getTime() + i * 86400000),
                    Math.round((Math.random() - 0.5) * 20 + value)
                ]);
                value = data[i][1];
            }
            return data;
        })()
    }],
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 10
    }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }]
};