实现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常用模块用法分析
Sep 08 Python
修改Python的pyxmpp2中的主循环使其提高性能
Apr 24 Python
在Python中操作时间之tzset()方法的使用教程
May 22 Python
Python中的变量和作用域详解
Jul 13 Python
Python正确重载运算符的方法示例详解
Aug 27 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
Oct 14 Python
Python 中Django验证码功能的实现代码
Jun 20 Python
Python单元测试工具doctest和unittest使用解析
Sep 02 Python
基于Python数据结构之递归与回溯搜索
Feb 26 Python
判断Threading.start新线程是否执行完毕的实例
May 02 Python
pytorch实现查看当前学习率
Jun 24 Python
Python 中Operator模块的使用
Jan 30 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处理多图上传压缩代码功能
2018/06/13 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python视频按帧截取图片工具
2019/07/23 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
python简单实现插入排序实例代码
2020/12/16 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
党员带头倡议书
2015/04/29 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL