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

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

news 2026/4/4 6:20:55

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

gte-base-zh低成本方案：一张3090显卡跑通达摩院向量模型

gte-base-zh低成本方案&#xff1a;一张3090显卡跑通达摩院向量模型 1. 方案概述与优势 1.1 为什么选择gte-base-zh&#xff1f; gte-base-zh是阿里巴巴达摩院基于BERT框架训练的中文文本嵌入模型&#xff0c;具有以下特点&#xff1a; 通用性强&#xff1a;在大规模多领域…...

编程新知 2026/4/4 5:53:11

提升无线传输性能：手把手教你优化Si4463的Data Rate配置与SPI通信稳定性

突破Si4463无线传输瓶颈&#xff1a;从寄存器配置到SPI时序的全链路优化实战 当你的无线模块能够通信但性能不尽如人意时&#xff0c;就像驾驶一辆引擎未调校的跑车——它能跑&#xff0c;但永远达不到理想的极速。Si4463作为工业级无线收发芯片&#xff0c;其默认配置往往无法…...

编程新知 2026/4/4 5:21:01

Qwen2.5-72B大模型实战指南：GPTQ-Int4量化+128K上下文+Chainlit可视化交互全流程

Qwen2.5-72B大模型实战指南&#xff1a;GPTQ-Int4量化128K上下文Chainlit可视化交互全流程 1. 模型简介 Qwen2.5-72B-Instruct-GPTQ-Int4是Qwen大型语言模型系列的最新版本&#xff0c;代表了当前开源大模型领域的顶尖水平。这个72.7B参数的模型经过GPTQ 4-bit量化处理&#…...

编程新知 2026/4/4 5:14:59

OpenClaw多账户管理：千问3.5-9B自动切换社交平台身份

OpenClaw多账户管理&#xff1a;千问3.5-9B自动切换社交平台身份 1. 为什么需要自动化多账户管理 作为一个长期运营多个社交媒体账号的内容创作者&#xff0c;我每天需要切换不同平台的账号身份。手动登录不仅耗时&#xff0c;还经常遇到浏览器缓存混乱导致账号异常的问题。更…...

编程新知 2026/4/4 3:07:29

LibreCAD完全指南：零成本实现专业级2D设计的开源解决方案

LibreCAD完全指南&#xff1a;零成本实现专业级2D设计的开源解决方案 【免费下载链接】LibreCAD LibreCAD is a cross-platform 2D CAD program written in C17. It can read DXF/DWG files and can write DXF/PDF/SVG files. It supports point/line/circle/ellipse/parabola/…...

编程新知 2026/4/4 3:05:28

Go Routine 调度器的核心逻辑

Go语言凭借其轻量级线程——Goroutine&#xff0c;成为高并发编程的热门选择。而Goroutine的高效运行&#xff0c;离不开其底层调度器的精妙设计。本文将深入解析Goroutine调度器的核心逻辑&#xff0c;揭示其如何实现数万并发任务的流畅调度。调度模型&#xff1a;M-P-G三级协…...

编程新知 2026/4/4 2:05:08

c++编程：D进制的A+B（1022-PAT乙级）

1022. D进制的AB#include<bits/stdc.h> using namespace std; int main() { int A, B, D; // 定义三个整数变量 A、B 和进制 Dcin >> A >> B >> D; // 从标准输入读取 A、B、D 的值int sum A B; // 计算…...

编程新知 2026/4/4 2:03:02

前端组件库吐槽：别再用那些华而不实的组件了！

前端组件库吐槽&#xff1a;别再用那些华而不实的组件了&#xff01; 毒舌时刻 前端组件库就像超市里的预制菜——看起来方便&#xff0c;实际吃起来味同嚼蜡。Ant Design、Material UI、Element Plus... 一堆组件库让你挑花了眼&#xff0c;结果你的页面还是丑得像车祸现场。…...

编程新知 2026/4/4 1:58:54

基于STM32与华为云的粮仓环境监测系统设计

1. 项目概述粮仓环境监测系统是现代农业管理中不可或缺的重要环节。作为一名长期从事农业物联网开发的工程师&#xff0c;我深知传统人工巡检方式存在的诸多痛点&#xff1a;效率低下、数据记录不完整、响应不及时等问题常常导致粮食储存过程中出现不必要的损失。这套基于华为云…...

编程新知 2026/4/4 1:34:31

南京大学等联合发布开源语音大模型VITA-Qinyu，首发支持角色扮演+哼唱

在 AI 语音交互的赛道上&#xff0c;南京大学联合腾讯音乐研发的 VITA-Qinyu 正式亮相。这是业内首款兼具自然对话、高表现力角色扮演与歌唱能力的开源端到端语音语言模型&#xff08;SLM&#xff09;&#xff0c;一举打破了传统语音模型仅聚焦对话准确性、缺乏情感与场景表现力…...

编程新知 2026/4/4 0:38:07