核心思路 #

• dataZoom预览区固定使用低分辨率全量数据，保证始终展示完整时间范围
• 主图表根据dataZoom的选中范围，动态加载并渲染对应时间区间的高分辨率数据

具体实现步骤 #

1. 初始化基础配置 #

先初始化图表，给dataZoom滑块绑定低分辨率数据，主图表先加载默认范围的高分辨率数据：

// 低分辨率全量数据（预览区用）
const lowResData = [/* 你的低分辨率时间序列数据 */];
// 初始高分辨率数据（默认时间范围）
let highResData = [/* 初始时间范围的高分辨率数据 */];

const myChart = echarts.init(document.getElementById('main'));

const option = {
    xAxis: {
        type: 'time',
        boundaryGap: false
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {
            type: 'slider',
            start: 0,
            end: 10,
            // 给dataZoom滑块绑定全量时间轴数据
            data: lowResData.map(item => item[0])
        }
    ],
    series: [
        {
            name: '主数据',
            type: 'line',
            data: highResData,
            smooth: true
        },
        {
            name: '预览数据',
            type: 'line',
            data: lowResData,
            // 隐藏主图表中的预览数据，仅在dataZoom滑块中生效
            silent: true,
            lineStyle: { opacity: 0 },
            symbol: 'none'
        }
    ]
};

myChart.setOption(option);

2. 监听dataZoom事件，动态更新高分辨率数据 #

通过监听datazoom事件，获取当前选中的时间范围，请求对应区间的高分辨率数据并更新主图表：

// 防抖处理，避免拖动滑块时频繁请求
let debounceTimer = null;

myChart.on('datazoom', function(params) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        // 从低分辨率数据中计算选中的时间范围
        const totalLen = lowResData.length;
        const startIndex = Math.floor(totalLen * params.start / 100);
        const endIndex = Math.ceil(totalLen * params.end / 100);
        const startTime = lowResData[startIndex][0];
        const endTime = lowResData[endIndex][0];

        // 替换为实际后端接口请求
        fetchHighResData(startTime, endTime).then(newData => {
            highResData = newData;
            myChart.setOption({
                series: [{ name: '主数据', data: highResData }]
            });
        });
    }, 300);
});

// 模拟后端数据请求函数
function fetchHighResData(start, end) {
    return new Promise(resolve => {
        // 根据时间区间请求高分辨率数据，返回格式需与主图表适配
        resolve([/* 请求到的高分辨率时间序列数据 */]);
    });
}

3. 关键细节说明 #

• 预览区数据隐藏：通过silent: true和透明样式，让预览数据仅在dataZoom滑块中渲染，不干扰主图表
• 时间范围映射：利用低分辨率数据的索引快速定位选中区间，避免复杂的时间格式计算
• 性能优化：防抖处理可减少接口请求次数，提升用户体验

注意事项 #

• 低分辨率与高分辨率数据的时间轴格式需统一（如均为时间戳或ISO字符串）
• 后端接口需支持按时间区间返回对应分辨率的数据；若前端已有全量高分辨率数据，可直接在本地筛选
• 若dataZoom滑块的预览图样式需要调整，可修改dataZoom组件的backgroundColor、dataBackground等配置项

内容的提问来源于stack exchange，提问作者nook24