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

最新推荐文章于 2025-05-07 11:47:32 发布

Awkward゛

最新推荐文章于 2025-05-07 11:47:32 发布

阅读量799

点赞数

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

本文链接：https://blog.youkuaiyun.com/Developer_ChengC/article/details/121611038

版权

前端开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在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;
    },