资讯专栏INFORMATION COLUMN

ECharts折线图多个折线每次只显示一条

_DangJin / 1131人阅读

摘要:问题一个折线图中有多条折线。通过设置为与后,对轴进行复用,并每次只展示一条折线,这样能够较好的展示每个折线的变化趋势与大致范围,不过一次看不了多个折线的参考文章文档配置项文档折线图多条折线的时候怎么控制每次只能限制条

问题

一个折线图中有多条折线。由于折线之间数值范围相差较大(折线A范围[0-50],折线B范围[10000-20000]……),如果用单Y轴来表示,折线的变化趋势不明显。

解决方案

1、最开始想到的是多Y轴方式,每个折线对应一个Y轴

    var option = {
      ……
      yAxis : [
          {
              name : "A",
              type : "value",
              scale : false,
              show : true,
              splitLine:{  
                show:true  
            }, 
              position : "left",
          },
          {
              name : "B",
              type : "value",
              scale : true,
              show : false,
              splitLine:{  
                show:false  
            },
              position : "right",
          },
          {
              name : "C",
              type : "value",
              scale : true,
              show : false,
              splitLine:{  
                show:false  
            },
              offset: 50,
              position : "left"
          },
          ……
      ],
      series : [
          {
              name:"A",
              type:"line",
              yAxisIndex:0,
              data:AArr,
          },
          {
              name:"B",
              type:"line",
              yAxisIndex:1,
              data:BArr,
          },
          {
              name:"C",
              type:"line",
              yAxisIndex:2,
              data:CArr,
          },
          ……
        ]
    };

position 坐标轴类型,横轴默认为类目型"bottom",纵轴默认为数值型"left",可选为:"bottom" | "top" | "left" | "right"

offset Y 轴相对于默认位置的偏移,在相同的 position 上有多个 Y 轴的时候有用。

yAxisIndex 当不指定时默认控制所有纵向类目,可通过数组指定多个需要控制的纵向类目坐标轴Index,仅一个时可直接为数字。第一个Y轴yAxisIndex为0

这样就可以将多个折线对应多个Y轴。但当Y轴过多时(实际使用时有6条曲线),会显得页面太复杂。

2、在方案1的基础上不显示Y轴,只显示折线变化趋势

    var option = {
      ……
      yAxis : [
          {
              name : "A",
              type : "value",
              scale : false,
              show : false,
              splitLine:{  
                show:false  
            }, 
              position : "left",
          },
          ……
      ],
      ……
    };

show 置为false不展示

每个Y轴都这样隐藏后,Y轴不再展示,界面只展示折线的变化趋势。但这样无法通过Y轴得到每条折线的大概范围,只能去选择折线的最高点与最低点来判断,也不够直接。

3、每次只展示一条折线

  var option = {
      legend: {
        x : "center",
        borderWidth : "1",
        data:YDescrib,
        selectedMode: "single",
      },
      calculable : true,
      xAxis : [
          {
              type : "category",
              boundaryGap : false,
              data : xScale
          }
      ],
      yAxis : [
          {
              type : "value",
              scale : true,
              show : true,
              splitLine:{  
                show:true  
            }, 
          },
      ],
      series : [
          {
              name:"A",
              type:"line",
              data:AArr,
          },
          {
              name:"B",
              type:"line",
              data:BArr,
          },
          {
              name:"C",
              type:"line",
              data:CArr,
          },
          ……
      ]
  };

selectedMode [ default: true ] 图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。除此之外也可以设成 "single" 或者 "multiple" 使用单选或者多选模式。

yAxis scale [ default: false ] 是否是脱离 0 值比例。设置成 true
 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。

通过设置为singlescale:true后,对Y轴进行复用,并每次只展示一条折线,这样能够较好的展示每个折线的变化趋势与大致范围,不过一次看不了多个折线的……

参考文章

ECharts3.0文档配置项
ECharts2.0文档
echarts折线图多条折线的时候怎么控制每次只能限制1条

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88709.html

相关文章

  • echarts3的线图怎么分段显示不同的颜色

    摘要:原来的格式修改为现在的格式篇幅所限,我这里没有详细列出来详细请访问我的的折线图怎么分段显示不同的颜色再次刷新,是不是两条断线连上了呢。 一.场景 在使用echarts3做图表的时候,可能会遇到一些特殊的需求: 星期一到星期四这几个点的折线显示一个颜色,周五到周日这几个点的折线显示另外一个颜色,来起到强调区别的作用。 二.效果图 先看一下效果图,你会有一个更清晰的认识: showImg(...

    J4ck_Chan 评论0 收藏0
  • echarts3的线图怎么分段显示不同的颜色

    摘要:原来的格式修改为现在的格式篇幅所限,我这里没有详细列出来详细请访问我的的折线图怎么分段显示不同的颜色再次刷新,是不是两条断线连上了呢。 一.场景 在使用echarts3做图表的时候,可能会遇到一些特殊的需求: 星期一到星期四这几个点的折线显示一个颜色,周五到周日这几个点的折线显示另外一个颜色,来起到强调区别的作用。 二.效果图 先看一下效果图,你会有一个更清晰的认识: showImg(...

    mumumu 评论0 收藏0
  • echarts3】 线图我踩过的那些坑 (tooltip 设置,line 单个点/散点不显示问题

    摘要:折线图小技巧折线图功能丰富且官方文档详细易懂,上手比较容易,这篇文章将分享一些项目中踩过的坑,示例主要以多条曲线为主,对大家完成一些曲线和的展示及交互有所帮助基本使用文档写得非常详细清晰,官方示例也很丰富,中还有很多功能更强大的示例篇的是很 echarts 折线图小技巧 echarts 折线图功能丰富且官方文档详细易懂,上手比较容易,这篇文章将分享一些项目中踩过的坑,示例主要以多条曲线...

    isaced 评论0 收藏0
  • echarts3】 线图我踩过的那些坑 (tooltip 设置,line 单个点/散点不显示问题

    摘要:折线图小技巧折线图功能丰富且官方文档详细易懂,上手比较容易,这篇文章将分享一些项目中踩过的坑,示例主要以多条曲线为主,对大家完成一些曲线和的展示及交互有所帮助基本使用文档写得非常详细清晰,官方示例也很丰富,中还有很多功能更强大的示例篇的是很 echarts 折线图小技巧 echarts 折线图功能丰富且官方文档详细易懂,上手比较容易,这篇文章将分享一些项目中踩过的坑,示例主要以多条曲线...

    MonoLog 评论0 收藏0

发表评论

0条评论

_DangJin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<