echarts 两个y轴展示折线图,并使两个y轴刻度线重合

效果如图:
体积-温度
y轴刻度不重合情况:
不重合
代码如下,具体的数据处理就不再一一展示,只看画图部分:

    drawGraphChart() {
      // 具体的数据格式可以参考: https://echarts.baidu.com/examples/editor.html?c=multiple-y-axis
      // 处理两个y轴的最大值 => 为使两个y轴的标度线完全重合
      // 拿到左右两个y轴的最大数据之后 给他们分别取整成为最终 y轴上展示的值 也是为了能够确保两个值都能整除10
      const maxY1 = parseInt((Math.max(...maxData1) + 2000) / 1000) * 1000
      const maxY2 = parseInt((Math.max(...maxData2) + 10) / 10) * 10
      this.myChart = this.$echarts.init(document.getElementById('drawChart'))
      // var color = ['#d14a61', '#5793f3'], // 这个颜色和y轴的颜色对应,如果画的曲线较少,可以直接用两种颜色区分线是按照哪个坐标轴的刻度画的
      const option = {
        title: {
          left: 20,
          text: '趋势图'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false, // 数据完全填充x轴
          data: this.toRepeatTimeArr // x轴时间
        },
        legend: {
          type: 'scroll',
          right: 120,
          top: 0,
          left: '65%',
          bottom: 0,
          data: legendTankNum //  图例
        },
        grid: {
          left: '6%',
          right: '6%',
          top: '14%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '体积',
            min: 0,
            max: maxY1, // 左侧y轴最大值
            // 两个y轴的刻度必须整除一个相同的数才能重合
            interval: Math.ceil(maxY1 / 10), // 间距等分为10等分 
            position: 'left',  // y轴在左侧
            // y轴的颜色和按y轴刻度画的曲线的颜色
            // axisLine: {
            //   lineStyle: {
            //     color: color[0]
            //   }
            // },
            axisLabel: {
              formatter: '{value} L'
            }
          },
          {
            type: 'value',
            name: '温度',
            min: 0,
            max: maxY2,  // 右侧y轴最大值
            interval: Math.ceil(maxY2 / 10),  // 间距等分为10等分
            position: 'right', // y轴在右侧
            // axisLine: {
            //   lineStyle: {
            //     color: color[1]
            //   }
            // },
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        toolbox: {
          right: 80,
          top: -5,
          feature: {
            saveAsImage: {}
          }
        },
        // {name: '--',type: 'line',data:[0,0,0···]}
        series: allRealData
      }
      // true 图数据不叠加
      this.myChart.setOption(option, true)
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值