ECharts折线图多个折线每次只显示一条_echart 平均值自定义,只显示一条-CSDN博客

问题

一个折线图中有多条折线。由于折线之间数值范围相差较大（折线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 之后该配置项无效。

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

参考文章

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

参考链接：https://www.jianshu.com/p/b2dfe16ae5e4
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。