实现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编写爬虫的基本模块及框架使用指南
Jan 20 Python
python实现SOM算法
Feb 23 Python
Python unittest模块用法实例分析
May 25 Python
Django objects的查询结果转化为json的三种方式的方法
Nov 07 Python
在python 中实现运行多条shell命令
Jan 07 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
Apr 10 Python
使用Python实现图像标记点的坐标输出功能
Aug 14 Python
python 遍历pd.Series的index和value
Nov 26 Python
python 字段拆分详解
Dec 17 Python
Selenium常见异常解析及解决方案示范
Apr 10 Python
彻底解决Python包下载慢问题
Nov 15 Python
Python 随机按键模拟2小时
Dec 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网络操作函数汇总
2015/05/18 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
react redux入门示例
2018/04/19 Javascript
js new Date()实例测试
2019/10/31 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
python爬虫的工作原理
2017/03/05 Python
Python制作exe文件简单流程
2019/01/24 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
股份转让协议书
2014/04/12 职场文书
诚实守信演讲稿
2014/09/01 职场文书
小学运动会通讯稿
2015/07/18 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书