实现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抓取京东图书评论数据
Aug 31 Python
python实现从web抓取文档的方法
Sep 26 Python
Python实现给文件添加内容及得到文件信息的方法
May 28 Python
Python实现批量更换指定目录下文件扩展名的方法
Sep 19 Python
Python从零开始创建区块链
Mar 06 Python
django 发送手机验证码的示例代码
Apr 25 Python
python中实现字符串翻转的方法
Jul 11 Python
在pycharm中设置显示行数的方法
Jan 16 Python
Django密码系统实现过程详解
Jul 19 Python
Pytorch实现各种2d卷积示例
Dec 30 Python
python opencv 实现读取、显示、写入图像的方法
Jun 08 Python
4种方法python批量修改替换列表中元素
Apr 07 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
php,不用COM,生成excel文件
2006/10/09 PHP
PHP生成月历代码
2007/06/14 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python中unittest用法实例
2014/09/25 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
基于python实现计算两组数据P值
2020/07/10 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
四年大学生活的个人自我评价
2013/12/11 职场文书
公益活动策划方案
2014/01/09 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
元宵节主持词
2014/03/25 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
民事调解书范文
2015/05/20 职场文书
小学体育组工作总结
2015/08/13 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
微信小程序实现轮播图指示器
2022/06/25 Javascript