echarts解决数据差异过大的问题

问题描述
使用echarts折线图和柱状图展示数据时,如果数据差异值较大,会导致显示图形差异过大,图表不美观。
如这一组数据[2000000, 200, 0.1, 20, 0, -10, -3000],渲染出来的效果如下图:
在这里插入图片描述
可以看到由于最大值和最小值差异过大,导致过小的值柱子显示不出来,数据的波动趋势不明显。
当前需要解决的问题是如何体现数据差异性,让小数值柱子也能显示出来。
解决方案:
使用对数轴(yAxis. type=“log”),适用于对数数据,可以解决数据差异过大的问题。但对数轴只适用于data>=0的情况。
如数据:barDatas = [2000000, 200, 0.1, 20, 3,3, 3000]
在这里插入图片描述
如果对数轴中的数组数据出现0或者负数情况,就会造成错误渲染。
在这里插入图片描述
试了很多办法都无法解决这个问题,最后采取了多个grid多轴的办法。

可以通过grid来划分多个网格区域,然后让正数和负数柱状图分别在在不同的区域展现。
如:const barDatas = [2000000, 200, 0.1, 20, 0, -10, -3000]
在这里插入图片描述
流程展示:

  • 将barDatas数组拆分为正数数组,负数数组

  • 设置三个grid,分别为用于展示正数,负数数据,以及底部X轴

  • 正负数数据网格区域y轴为yAxis. type=“log”,X轴网格区数数据区域yAxis. type=“value”

  • 正数柱状图series.data只展示大于0的数据,其余为null(barDatas.map(item => item > 0 ? item : null);
    负数柱状图series.data只展示小于0的数据,并展示为绝对值,其余为null(barDatas.map(item => item < 0 ? Math.abs(item): null)

  • 设置负数的y轴yAxis.inverse=true,让Y轴绕X轴上下翻转,并配置y轴标签显示yAxis.axisLabel.formatter=(val) => val === 1 ? 0 : -${val}

其中要解决的问题是:
1)解决起始0对齐的问题
在这里插入图片描述
因为对数轴的数据不能为0,所以需要设置上下yAxis的min为1,再通过yAxis.axisLabel.formatter将y轴的1改为0。
在这里插入图片描述
2)小于1的数据柱子无高度。
在这里插入图片描述
需要设置barMinHeight最小高度,同时改造小于1的数为1.01

这种方式能很好的解决数据差异过大的问题。
代码附上:

<!DOCTYPE html>
<html lang="en" style="height: 100%"><head><meta charset="utf-8">
</head>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script><body style="height: 100%; margin: 0"><div id="container" style="width: 50%;height: 50%;border: 1px solid red;margin: 30px;"></div><script type="text/javascript">var dom = document.getElementById('container');var myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false});var app = {};var option;// const barDatas = [1000000, 20000000, 0.1, 20, 0, -10, -3000];// const barDatas = [200000, -100];const barDatas = [2000000, 200, 0.1, 20, 0, -10, -3000]option = {color: ['#3398DB'],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: (params) => {const { dataIndex } = params[0]return `${`城市${dataIndex + 1}`}${barDatas[dataIndex]}`}},grid: [{right: 20,left: 80,top: 30,bottom: '50%',containLabel: false,}, {right: 20,left: 80,top: '50%',bottom: 30,containLabel: false,show: false}, {right: 20,left: 80,top: '50%',bottom: 30,containLabel: false,show: false}],xAxis: [{type: 'category',gridIndex: 0,show: false,},{type: 'category',show: false,gridIndex: 1,},{type: 'category',interval: 0,gridIndex: 2,data: barDatas.map((item, index) => `城市${index + 1}`)},],yAxis: [{type: 'log',gridIndex: 0,min: 1, // 设置y轴最小值axisLabel: {formatter: (val) => val === 1 ? 0 : val}},{type: 'log',gridIndex: 1,inverse: true, //设置反向坐标,让Y轴绕X轴上下翻转min: 1, // 设置y轴最小值axisLabel: {formatter: (val) => val === 1 ? 0 : `-${val}`}},{type: 'value',gridIndex: 2,show: false,},],series: [{name: '正数',xAxisIndex: 0,yAxisIndex: 0,type: 'bar',data: barDatas.map(item => item > 0 ? item > 1 ? item : 1.01 : null), // 正数柱状图series.data只展示大于0的数据barMinHeight: 1.5,// 最小高度},{name: '负数',type: 'bar',xAxisIndex: 1,yAxisIndex: 1,data: barDatas.map(item => item < 0 ? Math.abs(item) > 1 ? Math.abs(item) : 1.01 : null), // 负数柱状图eries.data只展示小于0的数据barMinHeight: 1.5, // 最小高度},{name: 'x轴',xAxisIndex: 2,yAxisIndex: 2,type: 'bar',show: false,data: barDatas.map(item => null),},],};if (option && typeof option === 'object') {myChart.setOption(option);}window.addEventListener('resize', myChart.resize);</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/45684.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

几何距离与函数距离:解锁数据空间中的奥秘

几何距离&#xff1a;直观的空间度量 几何距离&#xff0c;顾名思义&#xff0c;是我们在几何学中熟悉的距离概念&#xff0c;如欧几里得距离、曼哈顿距离和切比雪夫距离等。这些距离度量直接反映了数据点在多维空间中的位置关系。 欧几里得距离&#xff1a;最为人熟知的几何距…

(四)stm32之通信协议

一.串口通信 1、全双工、半双工、单工 单工:只能一个人传输,只能向一个方向传输 半双工:只能一个人传输,可以多个方向传输 全双工:多方传输,多个方向传输 2、同步通信、一步通信 异步通信:双方时钟可以不同步,发送的信息封装(加上起始位、停止位)实现同步,效率低,…

Arrays:专为数组而生的工具类

创建数组 1.copyOf&#xff1a;复制指定的数组&#xff0c;截取或用 null 填充 String[] intro new String[] { "沉", "默", "王", "二" }; String[] revised Arrays.copyOf(intro, 3); String[] expanded Arrays.copyOf(intro, …

同三维T80004ESL编码器视频使用操作说明书:高清HDMI编码器,高清SDI编码器,4K超清HDMI编码器,双路4K超高清编码器

同三维T80004ESL编码器视频使用操作说明书&#xff1a;高清HDMI编码器&#xff0c;高清SDI编码器&#xff0c;4K超清HDMI编码器&#xff0c;双路4K超高清编码器 同三维T80004ESL编码器视频使用操作说明书&#xff1a;高清HDMI编码器&#xff0c;高清SDI编码器&#xff0c;4K超清…

elk部署springboot

1.设置es版本&#xff1a; <properties><java.version>1.8</java.version><elasticsearch.version>6.8.13</elasticsearch.version> </properties> 2.导入ES依赖&#xff0c;JSON依赖&#xff1a; <dependency><groupId>co…

【全网最全】2024年辽宁省大学生数学建模竞赛完整思路解析+代码+论文

我是Tina表姐&#xff0c;毕业于中国人民大学&#xff0c;对数学建模的热爱让我在这一领域深耕多年。我的建模思路已经帮助了百余位学习者和参赛者在数学建模的道路上取得了显著的进步和成就。现在&#xff0c;我将这份宝贵的经验和知识凝练成一份全面的解题思路与代码论文集合…

Vue和Element UI 路由跳转,侧边导航的路由跳转,侧边栏拖拽

首先看布局&#xff0c;因为我的用于页面显示的 <router-view> 是通过重定向定位到登陆页的&#xff0c;然后通过登陆页跳转到主页。项目中用到了点击侧边栏的跳转&#xff0c;所以记录下来&#xff0c;方便有需要的人用到~ 阐述 &#xff08;1&#xff09;.content{ di…

26.7 Django单表操作

1. 模型管理器 1.1 Manager管理器 Django ORM中, 每个Django模型(Model)至少有一个管理器, 默认的管理器名称为objects. objects是一个非常重要的管理器(Manager)实例, 它提供了与数据库进行交互的接口.通过管理器, 可以执行数据库查询, 保存对象到数据库等操作.objects管理器…

sqlalchemy通过查询参数生成query

sqlalchemy通过查询参数生成query 在SQLAlchemy中,可以使用查询参数来动态生成查询。这通常通过使用.filter()方法和Python的比较运算符来实现。以下是一个简单的示例,展示如何使用查询参数生成查询: 假设我们有一个名为User的模型(表),它具有id、username和email字段。…

【Unity学习笔记】第十九 · 物理引擎约束求解解惑(LCP,最优,拉格朗日乘数法,SI,PGS,基于冲量法)

转载请注明出处: https://blog.csdn.net/weixin_44013533/article/details/140309494 作者&#xff1a;CSDN|Ringleader| 在学习物理引擎过程中&#xff0c;有几大问题一直困扰着我&#xff1a; 约束求解到底是LCP还是带约束最优问题&#xff1f;约束求解过程中拉格朗日乘数法…

SpringBoot整合JWT示例教程

1. JWT简介 JSON Web Token (JWT) 是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;它定义了一种紧凑且自包含的方式&#xff0c;用于在各方之间作为 JSON 对象安全地传输信息。由于这些信息是经过数字签名的&#xff0c;因此可以被验证和信任。JWT 通常用于身份验…

openharmony上传图片,并获取返回路径

适用条件&#xff1a; openharmony开发 4.0 release版本&#xff0c;对应能力API10 一直不断尝试&#xff0c;一会用官方提供的上传文件&#xff0c;一会用第三方库的axios都不行&#xff0c; 一会报错‘没权限&#xff0c;一会报错’路径错误&#xff0c;还有报错‘401参数错…

本地部署,去除动漫图像背景Anime Remove Background

目录 摘要 引言 深度学习在动漫角色中的应用 1.​U-Net 2.Mask R-CNN 3.ISNet 模型 4.MODNet 模型 5.InSPyReNet 模型 本地部署 运行效果 测验结果​ Tip&#xff1a; 摘要 动漫图像背景去除是一项在图像处理和计算机视觉领域具有重要应用的技术&#xff0c;广泛应用于…

奇舞周刊第533期:单点登录(SSO)实现详解

奇舞推荐 ■ ■ ■ 单点登录&#xff08;SSO&#xff09;实现详解&#xff01;&#xff01; 单点登录是什么&#xff1f;你是怎么理解的&#xff1f;单点登录是如何实现的。 纯前端怎么实现检测版本更新&#xff0c;请看这篇&#xff01; 在传统的多页Web应用中&#xff0c;每次…

WXML,WXSS和HTML,CSS的区别

一、WXML&#xff08;WeiXin Markup Language&#xff09;与 HTML&#xff08;HyperText Markup Language&#xff09; &#xff08;一&#xff09;语法和标签 1. 标签系统&#xff1a;HTML 拥有一套完整且丰富的标签体系&#xff0c;涵盖了文档结构、文本格式、多媒体嵌入、表…

CSS实现table表格:隔行换色的效果

表格是网页中十分重要的组成元素。表格用来存储数据&#xff0c;包含标题、表头、行和单元格。在HTML语言中&#xff0c;表格标记使用符号<table>表示。定义表格光使用<table>是不够的&#xff0c;还需要定义表格中的行、列、标题等内容。推荐博文&#xff1a;《HT…

Mac M1安装配置Hadoop+Flink SQL环境

Flink 1.18.1 Hadoop 3.4.0 一、准备工作 系统&#xff1a;Mac M1 (MacOS Sonoma 14.3.1) JDK&#xff1a;jdk1.8.0_381 &#xff08;注意&#xff1a;尽量一定要用JDK8&#xff0c;少用高版本&#xff09; Scala&#xff1a;2.12 JDK安装在本机的/opt/jdk1.8.0_381.jdk/C…

OpenCV中的轮廓检测cv2.findContours()

文章目录 前言一、查找轮廓二、绘制轮廓轮廓面积轮廓周长 前言 轮廓提取的前提&#xff0c;将背景置为黑色&#xff0c;目标为白色&#xff08;利用二值化或Canny&#xff09; 边缘检测&#xff0c;例如Canny等&#xff0c;利用梯度变化&#xff0c;记录图像中的边缘像素点&a…

Uniapp鸿蒙项目实战

Uniapp鸿蒙项目实战 24.7.6 Dcloud发布了uniapp兼容鸿蒙的文档&#xff1a;Uniapp开发鸿蒙应用 在实际使用中发现一些问题&#xff0c;开贴记录一下 设备准备 windows电脑准备&#xff08;家庭版不行&#xff0c;教育版、企业版、专业版也可以&#xff0c;不像uniapp说的只有…

html5——CSS3_文本样式属性

目录 字体样式 字体类型 字体大小 字体风格 字体的粗细 文本样式 文本颜色 排版文本段落 文本修饰和垂直对齐 文本阴影 字体样式 字体类型 p{font-family:Verdana,"楷体";} body{font-family: Times,"Times New Roman", "楷体";} …