动态设置echarts series,X轴可拖动浏览,设置双Y轴显示

本文介绍了如何在Echarts中动态设置series,并实现X轴可拖动浏览的功能,同时详细讲解了如何配置双Y轴显示,特别是通过设置yAxisIndex属性来指定数据对应Y轴。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// x轴拖动
          dataZoom: [
              {
                type: "slider",
                realtime: true, //拖动滚动条时是否动态的更新图表数据
                height: 20, //滚动条高度
                start: 0, //滚动条开始位置(共100等份)
                end: 100 //结束位置(共100等份)
              }
            ],
          series:this.getSeries(),

给series动态赋值时设置yAxisIndex属性可指定Y轴;例如yAxisIndex: 1,

getSeries(){
      var serie=[];
      this.surveyPointNameData.forEach(res =>{
        if(res == "水位"){
          var item = {
            name:"水位",
            type: 'line',
            showSymbol: false,
            yAxisIndex: 1,
            itemStyle : {  
                normal : {  
                    color:'#24CBE5',
                    lineStyle:{  
                        color:'#24CBE5'  
                    }  
                }  
            },  
            smooth: true,
            data: this.rsvrData
          }
        }
        else if(this.isUserY2.indexOf(res)){
          var item={
            name: res,
            type: 'line',
            showSymbol: false,
            yAxisIndex: 1,
            smooth: true,
            data: this.getSeriesData(res)
          }
        }
        else{
          var item={
            name: res,
            type: 'line',
            showSymbol: false,
            yAxisIndex: 0,
            smooth: true,
            data: this.getSeriesData(res)
          }
        }
        serie.push(item);
      })
      return serie;
    },
    getSeriesData(name){
      var xData = [];
      this.tableData.forEach(res =>{
        if(name==res.name){
          if(res.tysj==null){
            xData.push(0)
          }else{
            xData.push(res.tysj)
          }
        }
      })
      return xData;
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值