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

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

news 2026/1/12 7:24:02

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

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/11 10:44:05

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/1/10 10:57:47

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/12/26 0:50:26

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2026/1/10 2:08:36

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/3 5:16:53