Echarts的dataZoom如何固定部分区域

琪公子呀

已于 2022-02-23 15:48:00 修改

阅读量1.2k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2021-11-17 10:44:17 首次发布

原文链接：https://www.jianshu.com/p/dc68ca787b59

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【解决方案】Echarts的dataZoom如何固定部分区域

echart.jpg

最近遇到一个需求，如上图。数据存在实际数据和预测数据，需求希望预测区的数据是固定的，不会随着datazoom的滚动条缩放或者移走。
通过其API中的action和events事件都无法达到需求想要的效果。各方百度，google都无果的时候。看到官网的一个demo

echarts-demo.jpg

一个图层放下了4个echarts，那我放2个拼接一下是不是也可以，就进行了尝试，效果如下

grid.jpg

可以看到datazoom的缩放滚动条只在实际数据区出现，预测区因为是固定，所以完全不需要缩放滚动条。
话不多说上代码：

option = {
    grid: [
        {x: '5%', y: '5%', width: '50%'},
        {x2: '-5%', y: '5%', width: '50%'}
    ],
    tooltip: {
        formatter: 'Group {a}: ({c})'
    },
    xAxis: [
        {
            gridIndex: 0,
            data: ['2019-10-01', '2019-10-02', '2019-10-03', '2019-10-04', '2019-10-05', '2019-10-06', '2019-10-07'],
            boundaryGap:false
        },
        {
            gridIndex: 1,
            data: ['', '2019-10-08', '2019-10-09', '2019-10-10', '2019-10-11', '2019-10-12', '2019-10-13'],
            boundaryGap:false
        }
    ],
    yAxis: [
        {gridIndex: 0, min: 0, max: 100},
        {gridIndex: 1, min: 0, max: 100,
            axisLine:{
                show:false
            },
            axisLabel:{
                show:false
            },
            axisTick:{
                show:false
            }
        }
    ],
    series: [{
        data: [40, 44, 56, 60, 70, 75, 80],
        type: 'line',
        xAxisIndex: 0,
            yAxisIndex: 0,
        smooth: false
    },
    {
        data: [80, 83, 88, 95, 100, 100, 100],
        type: 'line',
        xAxisIndex: 1,
            yAxisIndex: 1,
        smooth: false
    }],
    dataZoom:[{
        
    }]
};

只是工作中遇到的一些问题以及解决方案分享，我知道这可能不是一个很好的解决方案，只是做个分享记录，希望对遇到这方面问题的码友们有一点点帮助。

以上转载自乔巴兄文章【解决方案】Echarts的dataZoom如何固定部分区域 - 简书