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

长剑浣花咻咻咻

已于 2024-07-14 16:37:28 修改

阅读量4.5k

点赞数 15

分类专栏：前端文章标签： echarts javascript react.js

于 2024-07-12 08:26:34 首次发布

本文链接：https://blog.csdn.net/sinat_28071063/article/details/140368308

版权

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

最低0.47元/天解锁文章