实现ECharts双Y轴左右刻度线一致的例子

 更新时间:2020年05月16日 15:27:41   作者:毛公鼎  
这篇文章主要介绍了实现ECharts双Y轴左右刻度线一致的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

不一致的情况如下图:

修改成一致的情况如下图:

代码如下:

yAxis : [
          {
            type : 'value',
            name : '人数',
            //splitLine:{show:false},
            axisLabel : {
              formatter: '{value} 个',
              textStyle:{color: '#A23400'}//#A23400 purple
            },
            axisLine:{
               lineStyle:{color:'#A23400',width:'1'} //y轴坐标轴颜色 #A23400 black
            }
          },
          {
            type : 'value',
            name : '人次',
            //splitLine:{show:false},
            axisLabel : {
              formatter: qfamtter,
              textStyle:{color: '#00AEAE'}//#00AEAE blue
            },
            axisLine:{
               lineStyle:{color:'#00AEAE',width:'1'} //y轴坐标轴颜色 #00AEAE black
            },
            min: 0,
            max: Max2*2,
            splitNumber: 6,
            interval: (Max2*2 - 0) / 6
          }

其中需要加:

            min: 0,
            max: Max2*2,
            splitNumber: 6,
            interval: (Max2*2 - 0) / 6

左边Y轴默认了分成6段,所以要把右边Y轴也分成6段。

附加:jquery 数组获取最大值和最值的方法,仅供参考

//计算最大值
 function cal_Max(a) {
    //debugger
    a=$.grep(a,function(n,i){return i>0;});
    var maxval = Math.max.apply(null, a);
    return maxval;
   }
 
 //计算最小值
 function calMin(a) {
  a=$.grep(a,function(n,i){return i>0;});
  var minval = Math.min.apply(null, a)
  return minval;
 }

补充知识: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)
  }

以上这篇实现ECharts双Y轴左右刻度线一致的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Python Tornado框架轻松写一个Web应用的全过程

    Python Tornado框架轻松写一个Web应用的全过程

    Tornado全称Tornado Web Server,是一个用Python语言写成的Web服务器兼Web应用框架,Tornado走的是少而精的方向,注重的是性能优越,它最出名的是异步非阻塞的服务器方式,这篇文章主要给大家介绍了关于Python Tornado框架轻松写一个Web应用的相关资料,需要的朋友可以参考下
    2021-08-08
  • pandas dataframe的合并实现(append, merge, concat)

    pandas dataframe的合并实现(append, merge, concat)

    这篇文章主要介绍了pandas dataframe的合并实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • pygame实现键盘和鼠标事件的处理

    pygame实现键盘和鼠标事件的处理

    这篇文章主要介绍了pygame实现键盘和鼠标事件的处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例

    使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例

    这篇文章主要介绍了使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • Python实现暴力破解有密码的zip文件的方法

    Python实现暴力破解有密码的zip文件的方法

    这篇文章主要介绍了Python实现暴力破解有密码的zip文件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • 详解Python中range()与xrange()的区别

    详解Python中range()与xrange()的区别

    range() 和 xrange() 是两个函数,可用于在 Python的 for 循环中迭代一定次数。本文将通过示例详细说说二者的区别与使用,需要的可以参考一下
    2022-09-09
  • python文件的读取、写入与删除

    python文件的读取、写入与删除

    文件是无处不在的,,无论我们使用哪种编程语言,处理文件对于每个程序员都是必不可少的,下面这篇文章主要给大家介绍了关于python文件的读取、写入与删除的相关资料,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Python 多线程不加锁分块读取文件的方法

    Python 多线程不加锁分块读取文件的方法

    今天小编就为大家分享一篇Python 多线程不加锁分块读取文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-12-12
  • python属于软件吗

    python属于软件吗

    在本篇内容里小编给Python新手整理了关于python是软件吗的相关知识点,有兴趣的朋友们可以阅读下。
    2020-06-06
  • Tensorflow训练模型越来越慢的2种解决方案

    Tensorflow训练模型越来越慢的2种解决方案

    今天小编就为大家分享一篇Tensorflow训练模型越来越慢的2种解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-02-02

最新评论