当前位置： 首页 > news >正文

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

news 2025/8/24 15:05:58

问题描述
使用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>

相关文章：

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

问题描述 使用echarts折线图和柱状图展示数据时&#xff0c;如果数据差异值较大&#xff0c;会导致显示图形差异过大&#xff0c;图表不美观。 如这一组数据[2000000, 200, 0.1, 20, 0, -10, -3000]&#xff0c;渲染出来的效果如下图&#xff1a; 可以看到由于最大值和最小值差…...

编程日记 2024/7/16 19:33:49

Oracle 常用系统

常用系统包 查看系统包 SELECT * FROM all_objects WHERE object_type PACKAGE AND owner SYS AND object_name 包名称;AUTO_SERVER_PKG AUTO_SERVER_PKG 在Oracle数据库的上下文中&#xff0c;并不是一个标准的Oracle系统包或内置功能。然而&#xff0c;在参考文章中提到…...

编程日记 2024/7/16 19:32:48

WPS点击Zotero插入没有任何反应

wps个人版没有内置vba&#xff0c;因此即便一下插件安装上了&#xff08;如Axmath&#xff0c;zotero&#xff09;&#xff0c;当点击插件的时候会出现“点不动”、“点击插件没反应的现象。至于islide一类的插件&#xff0c;干脆连装都装不上。 这就需要手动安装一下vba。 针…...

编程日记 2024/7/16 19:30:46

uniapp 实现上传文件的功能

上传单个文件 <script setup>const handleUploadClick () > {console.log("上传文件")uni.chooseImage({success: (chooseImageRes) > {const tempFilePaths chooseImageRes.tempFilePaths;console.log("用户选择的图片&#xff1a;", temp…...

编程日记 2024/7/16 19:27:43

apache Kylin系列介绍及配置

Apache Kylin是一个开源的分布式分析引擎，用于OLAP（联机分析处理）数据处理。它专门设计用于处理大规模的数据集，并提供快速的查询和分析能力。 apache Kylin架构： Apache Kylin是一个开源的分布式分析引擎，旨在提供高性能、低延迟的OLAP（联机分析处理）能力。下面是Ap…...

编程日记 2024/7/16 19:23:38

【Qt 初识】QPushButton 的详解以及 Qt 中的坐标

文章目录 1. Qt 中的信号槽机制 &#x1f34e;2. 通过图形化界面的方式实现 &#x1f34e;3. 通过纯代码的方式实现按钮版的HelloWorld &#x1f34e;4. 设置坐标 &#x1f34e; 1. Qt 中的信号槽机制 &#x1f34e; 》&#x1f427; 本质就是给按钮的点击操作&#xff0c;关联…...

编程日记 2024/7/16 19:19:34

道路运输企业管理人员安全考核试题（附答案）

1、【多选题】《道路旅客运输企业安全管理规范》规定&#xff0c;客运企业应当制定车辆动态监控操作规程。操作规程的内容包括( )。(ABCD) A、卫星定位装置、视频监控装置、动态监控平台设备的检修和维护要求 B、动态监控信息采集、分析、处理规范和流程 C、违法违规信息统…...

编程日记 2024/7/16 19:17:14

免费开源的工业物联网（IoT）解决方案

什么是 IoT&#xff1f; 物联网 (IoT) 是指由实体设备、车辆、电器和其他实体对象组成的网络&#xff0c;这些实体对象内嵌传感器、软件和网络连接&#xff0c;可以收集和共享数据。 IoT 设备&#xff08;也称为“智能对象”&#xff09;范围广泛&#xff0c;包括智能恒温器等…...

编程日记 2024/7/16 19:14:10

Android 底部导航栏实现

依赖库 implementation "androidx.viewpager2:viewpager2:1.0.0" fragment基类 /*** Fragment的基类** param <DB> data binding* param <VM> view model* author shizhiyin*/ public abstract class BaseFragment<DB extends ViewDataBinding, VM …...

编程日记 2024/7/16 19:13:10

ASP.NET Core----基础学习07----ViewStart ViewImports文件的使用

文章目录 1._ViewStart.cshtml的使用2.更换Layout文件3._ViewImports.cshtml文件的使用 1._ViewStart.cshtml的使用 step1&#xff1a; 在Views文件夹下面创建_ViewStart.cshtml文件 step2&#xff1a; 删掉视图文件中的Layout设置行 step3&#xff1a; 最终显示效果&#xff…...

编程日记 2024/7/16 19:12:08

铁威马教程丨如何收集NAS的日志

适用版本: 适用于TOS 5.0.xxx、TOS5.1.xxx版本。 适用机型&#xff1a; TNAS型号&#xff08;除F2-210、F4-210&#xff09; 故障现象&#xff1a; 当TNAS宕机导致网页不可访问且PC无法搜索到该设备时&#xff0c;重启后TOS网页的系统报告缺失相关日志&#xff0c;不利于异常…...

编程日记 2024/7/16 19:11:07

Taro自定义FromData实现本地路径转换为文件

在用Taro写头像上传功能时&#xff0c;因为需要对获得的图片进行剪切成圆形或方形。使用组件剪切完之后返回的是一个本地图片的相对路径。这个时候我们就需要自己实现将本地路径重新转换为二进制文件。 引入两个js文件 mimeMap.js module.exports {"0.001": &quo…...

编程日记 2024/7/16 19:10:06

React+TS前台项目实战（二十九）-- 首页构建之性能优化实现首页Echarts模块数据渲染

文章目录 前言Echart模块源码功能分析数据渲染一、HashRateEchart统计图1. 功能分析2. 代码详细注释 二、BlockTimeChart统计图1. 功能分析2. 代码详细注释 三、使用方式四. 数据渲染后效果如下 总结 前言 还记得之前我们创建的 高性能可配置Echarts组件 吗&#xff1f;今天我…...

编程日记 2024/7/16 19:07:02

接口测试返回参数的自动化对比！

引言 在现代软件开发过程中&#xff0c;接口测试是验证系统功能正确性和稳定性的核心环节。接口返回参数的对比不仅是确保接口功能实现的手段&#xff0c;也是测试过程中常见且重要的任务。为了提高对比的效率和准确性&#xff0c;我们可以通过自动化手段实现这一过程。本文将…...

编程日记 2024/7/16 19:06:01

React基础学习-Day02

React基础学习-Day02 1.受控表单绑定 在 React 中&#xff0c;受控表单&#xff08;controlled form&#xff09;是一种通过 React 组件状态&#xff08;state&#xff09;来管理表单元素值的方式。使用受控表单&#xff0c;可以将表单元素的值与 React 组件的状态保持同步&a…...

编程日记 2024/7/16 19:03:58

切换网页visibilitychange，的升级版实现

目录 1 需求场景 2 用到的技术 3 日常检测方法 4 一个有意思的场景 5 升级版实现一 5.1 新建 /utils/browser.js 5.2 项目业务组件中使用 6 升级版实现二 6.1 安装js-tool-big-box工具库 6.2 引入 browserBox 对象 6.3 以控制累加定时器为例 6.4 查看定时器效果 1…...

编程日记 2024/7/16 19:01:55

基于pytesseract的OCR图片识别

简介 pytesseract是基于谷歌的tesseract的OCR包&#xff0c;支持识别一些简单的数字、字母、中文。 安装 安装引擎 下载地址&#xff1a;https://digi.bib.uni-mannheim.de/tesseract/ 一般是Windows 64位系统最新版&#xff1a; 如果要识别中文&#xff0c;注意选中中文…...

编程日记 2024/7/16 18:59:52

Docker_指令篇

Docker 的常用指令 1. 启动docker systemctl start docker2. 关闭docker systemctl stop docker3. 重启docker systemctl restart docker4. 设置自启动 systemctl enable docker5. 查看运行状态 systemctl status docker6. 查看帮助命令 docker pull --help7. 查看镜像 …...

编程日记 2024/7/16 18:57:51

HAL_UART_Transmit()函数用法

HAL_UART_Transmit函数用法 HAL_UART_Transmit()是 HAL 库中的一个函数&#xff0c;用于向指定的串口发送数据。它的函数原型如下: HAL_StatusTypeDef HAL_UART_Transmit(UART_HandleTypeDef *huart, const uint8_t *pData, uint16_t Size, uint32_t Timeout)其中各参数的含…...

编程日记 2024/7/16 18:55:49

OpenCV一个简单的摄像头调用与关闭

在使用OpenCV&#xff08;Open Source Computer Vision Library&#xff09;进行摄像头调用与关闭时&#xff0c;通常使用cv2.VideoCapture()函数来调用摄像头&#xff0c;并通过适当的方式关闭它。 调用摄像头 首先&#xff0c;需要导入OpenCV库&#xff08;通常简写为cv2&a…...

编程日记 2024/7/16 18:52:45

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/8/23 9:15:45

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/25 10:29:46

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/8/22 5:05:48

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/8/22 3:42:14

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/6/21 1:43:55

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/7/31 1:40:46

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/8/9 23:42:13

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/7/9 20:53:30

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/7/9 0:26:24