echarts 双轴折线图显示超出图表范围

 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
              }
            ]

完美解决!

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值