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

// 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:
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现这个功能,可以使用 ECharts 提供的 dataZoom 组件。dataZoom 组件用于区域缩放和拖动。在 ECharts 中,dataZoom 分为两种类型,一种是基于 x 的 dataZoom,另一种是基于 y 的 dataZoom。 下面是一个基于 x 的 dataZoom 的示例代码: ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }], dataZoom: [{ type: 'slider', // 滑动条型 dataZoom 组件 start: 0, // 起始位置 end: 100, // 结束位置 xAxisIndex: [0], // 需要控制的 x 的索引 filterMode: 'filter' // 过滤模式,数据范围外的数据将被过滤掉 }] }; ``` 在这个示例代码中,我们使用了 `dataZoom` 配置项来配置基于 x 的 dataZoom 组件。其中,`type` 属性设置为 `slider`,表示使用滑动条型的 dataZoom 组件。`start` 和 `end` 属性分别设置了 dataZoom 的起始位置和结束位置,范围是 0 到 100,表示可视化区域的百分比。`xAxisIndex` 属性指定了需要控制的 x 的索引,这里我们只有一个 x ,所以设置为 `[0]` 即可。`filterMode` 属性设置为 `filter`,表示数据范围外的数据将被过滤掉,而不是显示在图表的两侧。 当图表的 x 数据超出可视化区域时,就会在 x 底部出现一个滑动条,可以通过拖动滑动条来控制可视化区域的范围。这样就可以实现 x 超出可左右滑动的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值