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

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

news 2026/5/22 16:03:50

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

C++ 重载与重写的区别与实现

1 . 前言在面向对象语言中&#xff0c;经常提到重载与重写&#xff0c;以下内容直观描述两者差异成员函数被重载的特征&#xff1a; &#xff08;1&#xff09;相同的范围&#xff08;在同一个类中&#xff09;&#xff1b; &#xff08;2&#xff09;函数名字相同&#xff1b;…...

编程新知 2026/5/22 15:55:49

炉石传说佣兵战记自动化脚本：告别重复操作的全能指南

炉石传说佣兵战记自动化脚本&#xff1a;告别重复操作的全能指南 【免费下载链接】lushi_script This script is to save your time from Mercenaries mode of Hearthstone 项目地址: https://gitcode.com/gh_mirrors/lu/lushi_script 还在为《炉石传说》佣兵战记模式中…...

编程新知 2026/5/22 15:23:15

Qt串口通信与STM32 PWM实战：滑动条控制RGB灯全流程解析

1. 项目概述与核心价值最近在做一个智能家居控制面板的原型&#xff0c;核心需求之一就是通过一个直观的图形界面&#xff0c;去实时调节RGB氛围灯的亮度和颜色。这听起来像是把手机App上的功能搬到了嵌入式设备上&#xff0c;但背后的实现链路却完全不同。我选择了Qt作为上位机…...

编程新知 2026/5/22 13:38:46

通过Taotoken CLI工具一键配置多开发环境接入参数

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken CLI工具一键配置多开发环境接入参数 在接入大模型服务时&#xff0c;开发者常常需要为不同的开发工具&#xff08;如…...

编程新知 2026/5/22 12:39:17

如何快速安装elan：Lean版本管理器的完整指南

如何快速安装elan&#xff1a;Lean版本管理器的完整指南 【免费下载链接】elan The Lean version manager 项目地址: https://gitcode.com/gh_mirrors/el/elan elan是一个专门为Lean定理证明器设计的版本管理工具&#xff0c;它能让你轻松管理多个Lean安装版本。无论你是…...

编程新知 2026/5/22 11:59:04

别再手动刷权重了！用Maya的ADV插件，30分钟搞定角色身体绑定（附减模包裹技巧）

别再手动刷权重了&#xff01;用Maya的ADV插件30分钟完成角色身体绑定 角色绑定一直是三维动画制作中的痛点环节。记得刚入行时&#xff0c;我曾为一个穿着皮夹克的游戏角色手动刷权重整整两天&#xff0c;结果肘部变形依然不自然。直到接触ADV插件的减模包裹功能&#xff0c;…...

编程新知 2026/5/22 11:20:18

DownGit：3分钟掌握GitHub精准下载的必备技能

DownGit&#xff1a;3分钟掌握GitHub精准下载的必备技能 【免费下载链接】DownGit github 资源打包下载工具 项目地址: https://gitcode.com/gh_mirrors/dow/DownGit 还在为下载GitHub上的单个文件而烦恼吗&#xff1f;每次都需要克隆整个仓库&#xff0c;占用大量磁盘空…...

编程新知 2026/5/22 10:44:40

2026最新测评：4款海外降英文文本AIGC工具实测

我用GPT写了一篇英文技术报告&#xff0c;然后分别扔进4个降AI工具。结果出乎意料。如果你经常用ChatGPT、Claude或Gemini写英文内容——无论是论文摘要、技术文档、公司报告还是博客文章——你一定遇到过这个尴尬&#xff1a;明明内容是自己构思、自己修改的&#xff0c;但Tur…...

编程新知 2026/5/22 6:54:14

别再傻傻只用insmod了！Linux驱动加载，用modprobe才是真省心（附依赖问题解决全流程）

别再傻傻只用insmod了&#xff01;Linux驱动加载&#xff0c;用modprobe才是真省心&#xff08;附依赖问题解决全流程&#xff09; 你是否曾在深夜调试Linux驱动时&#xff0c;被insmod报出的"Unknown symbol"错误折磨到崩溃&#xff1f;明明已经编译好了驱动模块&am…...

编程新知 2026/5/22 6:07:55

BurpBounty入门指南：如何快速提升Burp Suite扫描能力

BurpBounty入门指南&#xff1a;如何快速提升Burp Suite扫描能力 【免费下载链接】BurpBounty Burp Bounty (Scan Check Builder in BApp Store) is a extension of Burp Suite that allows you, in a quick and simple way, to improve the active and passive scanner by mea…...

编程新知 2026/5/22 5:02:14