echarts数据区域缩放（拉选框、鼠标滚轮、滚动条）

Greatlifeee

已于 2023-06-20 17:14:46 修改

阅读量2.9k

点赞数 6

分类专栏： echarts 文章标签： echarts javascript ecmascript

于 2023-02-03 10:23:36 首次发布

本文链接：https://blog.csdn.net/weixin_43883951/article/details/128861972

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求：echarts图表上的数据很多时，想要查看部分区域的数据状态，可以通过数据区域缩放来实现，并获取缩放后当前x轴的起始点

选框缩放

	var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr1 = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月','1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr1 = [9000, 8800,7900, 6000, 6800, 9700, 11400, 11300, 6900, 10000, 9800, 7600]
    var yDataArr2 = [300, 280, 1900, 1200, 600, 900, 1800, 2000, 2900, 500, 700, 900,300, 280, 1900, 1200, 600, 900, 1800, 2000, 2900, 500, 700, 900]
    var option = {
      title: {
        text: '选框缩放'
      },
      xAxis: [{
        type: 'category',
        data: xDataArr
      },{
        triggerEvent: true,
        type: 'category',
        data: xDataArr1
      }],
      yAxis: [{
        name:'左侧Y轴',
        type: 'value'
      },{
        name:'右侧Y轴',
        type: 'value'
      }],
      toolbox: {
        show:true,
        feature:{
          dataZoom: {
            yAxisIndex:"none"
          },//其他功能性按钮查看官网进行增加，包括（显示数据，下载图片，改为柱状图等）
        },
        right:30,
        top:-8
      },
      series: [
        {
          xAxisIndex:0,
          yAxisIndex: 0,//使用哪条y轴
          data: yDataArr1,
          type: 'line', // 设置图表类型为 折线图
        },
        {
          xAxisIndex:1,
          yAxisIndex: 1,
          data: yDataArr2,
          type: 'line', // 设置图表类型为 折线图
          smooth:true, // 设置图表平滑
        }
      ]
    }
    mCharts.setOption(option)
    // 缩放后的起始点数据
    mCharts.on('datazoom', (params) =>{
      console.log( mCharts.getModel().option);
      let dataZoomStartIndex1 = mCharts.getModel().option.dataZoom[0].startValue;
      let dataZoomEndIndex1 = mCharts.getModel().option.dataZoom[0].endValue;
      let dataZoomStartIndex2 = mCharts.getModel().option.dataZoom[1].startValue;
      let dataZoomEndIndex2 = mCharts.getModel().option.dataZoom[1].endValue;
      //缩放后，两条x轴的起始点
      console.log(xDataArr[dataZoomStartIndex1]);
      console.log(xDataArr[dataZoomEndIndex1]);
      console.log(xDataArr1[dataZoomStartIndex2]);
      console.log(xDataArr1[dataZoomEndIndex2]);
    });

效果图：
在这里插入图片描述

鼠标滚轮缩放

只需在上面代码中加入
dataZoom:[{ type:"inside" //详细配置可见echarts官网 }],

在这里插入图片描述
效果图：

滚动条缩放

只需在上面代码中加入

 dataZoom:[{
        type: 'slider',//图表下方的伸缩条
 　　　　show : true, //是否显示
 　　　　realtime : true, //拖动时，是否实时更新系列的视图
 　　　　start : 0, //伸缩条开始位置（1-100），可以随时更改
 　　　　end : 100, //伸缩条结束位置（1-100），可以随时更改
      }],