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

最新推荐文章于 2024-08-19 11:00:43 发布

Awkward゛

最新推荐文章于 2024-08-19 11:00:43 发布

阅读量713

点赞数

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

本文链接：https://blog.csdn.net/Developer_ChengC/article/details/121611038

版权

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

摘要由CSDN通过智能技术生成

// 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: