bug描述: 双轴折线图显示超出图表范围,原因是两个折线系列数据差距较大,如下图所示:当水位为1,流量显示为986,但图上并没有显示出对应的折线;
测试数据如下:
var xdata=[1,2,3,4,5,6,7,8,9,10];//横坐标
var y1data=[0,1,2.2,3.2,2.0,1,0.2,2.5,3.2,2];//水位数据
var y2data=[230,0,152,254,36,986,23,256,128,0.2];//流量数据
示例代码:
var dom = document.getElementById("line");
var myChart = echarts.init(dom);
var xdata=[1,2,3,4,5,6,7,8,9,10];
var y1data=[0,1,2.2,3.2,2.0,1,0.2,2.5,3.2,2];
var y2data=[230,0,152,254,36,986,23,256,128,0.2];
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
var option = {
legend: {
icon: 'rect',
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
data: ['水位', '流量'],
left: '14%',
top: '2%',
textStyle: {
fontSize: 12,
color: ['#FF9435', '#899dbf']
}
},
grid: {
top: '10%',
left: '5%',
bottom: "20%",
right: '20%'
},
tooltip: {
show: true, //---是否显示提示框,默认为true
trigger: 'axis', //---数据项图形触发
axisPointer: { //---指示样式
type: 'shadow',
axis: 'auto',
},
padding: 5,
textStyle: { //---提示框内容样式
color: "red",
},
},
dataZoom: [{
startValue: xdata[0],
endValue: xdata[5],
bottom: '0%'
}, {
type: 'inside'
}],
xAxis: {
type: 'category',
data: xdata,
axisLabel: {
rotate: 0,
textStyle: {
color: '#ffffff'
}
}
},
yAxis: [
{
name: "水位",
nameTextStyle: {
color: '#899dbf',
fontSize: 14
},
position: 'left',
type: 'value',
min: 0,
max: (Math.max(...y1data) + 1).toFixed(0),
axisLabel: {
color: '#899dbf',
fontSize: 14
},
axisLine: { //y轴
show: true
},
axisTick: { //y轴刻度线
show: false
},
splitLine: { //设置网格线颜色
show: true,
lineStyle: {
color: ['#b7c8eb4a'],
width: 0.98,
type: 'solid'
}
},
},
{
name: "流量",
min: 0,
max: (Math.max(...y2data) + 1).toFixed(0),
nameTextStyle: {
color: '#899dbf',
fontSize: 14
},
position: 'right',
type: 'value',
axisLabel: {
color: '#899dbf',
fontSize: 14
},
axisLine: { //y轴
show: true
},
axisTick: { //y轴刻度线
show: false
},
splitLine: { //设置网格线颜色
show: true,
lineStyle: {
color: ['#b7c8eb4a'],
width: 0.98,
type: 'solid'
}
}
},
],
series: [
{
name: "水位",
type: 'line', //---类型
legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
label: { //---图形上的文本标签
show: false,
position: 'insideTop', //---相对位置
rotate: 0, //---旋转角度
color: '#eee',
},
itemStyle: {
color: '#188df0'
},
data: y1data
},
{
name: "流量",
type: 'line', //---类型
legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
label: { //---图形上的文本标签
show: false,
position: 'insideTop', //---相对位置
rotate: 0, //---旋转角度
color: '#eee',
},
itemStyle: {
color: '#FF9435'
},
data: y2data
}
]
};
myChart.setOption(option);
其中两个y轴最大值为对应数组中最大值加1 如: (Math.max(...y2data) + 1).toFixed(0),
解决办法:明确指定使用的Y轴 ,在series里对应加入 yAxisIndex: 0(指定左侧Y轴)
yAxisIndex: 1(指定右侧Y轴)
series: [
{
name: "水位",
type: 'line', //---类型
legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
label: { //---图形上的文本标签
show: false,
position: 'insideTop', //---相对位置
rotate: 0, //---旋转角度
color: '#eee',
},
itemStyle: {
color: '#188df0'
},
data: y1data,
yAxisIndex: 0,
},
{
name: "流量",
type: 'line', //---类型
legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
label: { //---图形上的文本标签
show: false,
position: 'insideTop', //---相对位置
rotate: 0, //---旋转角度
color: '#eee',
},
itemStyle: {
color: '#FF9435'
},
yAxisIndex: 1,
data: y2data
}
]
完美解决!