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


Posted in Python onMay 16, 2020

不一致的情况如下图:

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

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

实现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轴刻度线重合

效果如图:

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

y轴刻度不重合情况:

实现ECharts双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 相关文章推荐
Python使用Socket(Https)Post登录百度的实现代码
May 18 Python
浅谈Python的Django框架中的缓存控制
Jul 24 Python
详解Python3.6的py文件打包生成exe
Jul 13 Python
Python通过调用有道翻译api实现翻译功能示例
Jul 19 Python
Python面向对象之接口、抽象类与多态详解
Aug 27 Python
使用Python制作表情包实现换脸功能
Jul 19 Python
python实现小世界网络生成
Nov 21 Python
解决使用python print打印函数返回值多一个None的问题
Apr 09 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
May 16 Python
python request 模块详细介绍
Nov 10 Python
python3中编码获取网页的实例方法
Nov 16 Python
详解Java中一维、二维数组在内存中的结构
Feb 11 Python
在echarts中图例legend和坐标系grid实现左右布局实例
May 16 #Python
Python如何使用PIL Image制作GIF图片
May 16 #Python
pyecharts调整图例与各板块的位置间距实例
May 16 #Python
通过Python实现一个简单的html页面
May 16 #Python
Python批量处理csv并保存过程解析
May 16 #Python
基于Python测试程序是否有错误
May 16 #Python
关于matplotlib-legend 位置属性 loc 使用说明
May 16 #Python
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
vue实现路由切换改变title功能
2019/05/28 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
一个C/C++编程面试题
2013/11/10 面试题
JPA的优势都有哪些
2013/07/04 面试题
大学生怎样写好自荐信
2014/02/25 职场文书
幼儿评语大全
2014/04/30 职场文书
林肯就职演讲稿
2014/05/19 职场文书
平面设计专业求职信
2014/08/09 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
交流会主持词
2015/07/02 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang