Echarts 5.6.0 Grid 坐标系中 Y 轴可视化的优化之路

目录

前言

一、问题重现

1、4.x环境下的效果展示

2、迁移到5.x版本后的问题

二、坐标系绘制中单Y轴优化

1、坐标轴线不展示

2、Y坐标轴展示位置不明显

3、坐标刻度不明显

4、坐标轴文字样式设置

三、多Y轴集成

1、左右布局设置

2、位置偏移

3、多Y轴数据集成

四、总结

---

前言

        在数据可视化领域，Echarts 作为一款功能强大且灵活的开源可视化库，被广泛应用于各种数据展示场景。其丰富的图表类型和高度可定制的配置选项，使得开发者能够轻松创建出符合需求的可视化效果。然而，随着数据复杂度的增加和用户对可视化效果要求的不断提高，同时Echarts的版本也在不断地更新迭代中，因此Echarts 在某些方面仍存在优化空间，以 Grid 坐标系中 Y 轴的可视化为例，在一些属性的设置上5.x的版本和4.x的版本就有许多不一致。

        Echarts 5.6.0 版本在性能和功能上都取得了显著进步，但在 Grid 坐标系中 Y 轴的可视化方面，仍存在一些问题亟待解决。这些问题可能包括：

1. 坐标轴轴线不展示：在5.6的版本，Y 轴的轴线在图表中不展示，导致数据展示不清晰，影响用户对数据的直观理解。

2. 坐标轴展示位置不明确：当数据范围较大或标签文本较长时，需要对Y轴进行设置居中展示，默认是放在结束位的地方展示的。

3. 坐标轴刻度展示不明显 ：在某些数据情况下，Y 轴的刻度分布可能过于密集或稀疏，导致数据展示不清晰，导致图表在不同设备上的显示效果不佳。

4. 多坐标轴集成展示 ：通常在一个图表中，我们可能需要实现多个Y轴的集成展示，因此需要能够展示多个Y轴。

        这些问题不仅影响了图表的美观度，更阻碍了用户对数据的准确理解和分析。为了提升 Echarts 5.6.0 在 Grid 坐标系中 Y 轴的可视化效果，我们开启了一场优化之旅。在这场旅程中，我们深入研究了 Echarts 的源代码和配置选项，结合实际应用场景中的常见问题，提出了一系列针对性的解决办法。

        在接下来的章节中，我们将详细阐述这些问题的成因、优化策略以及实际应用案例。我们将从基础配置调整讲起，逐步深入到高级自定义功能的实现，带领读者深入了解 Echarts 5.6.0 Grid 坐标系中 Y 轴可视化的优化之路。无论你是初学者还是资深开发者，本文都将为你提供实用的技巧和方法，助力你在数据可视化领域取得更大的进步。

一、问题重现

        为了对Echarts5.x版本和Echarts4.x的实现效果进行简单的对比，这里我们将使用同一的标准对同一个数据报表进行展示。在之前的一个基于Ruoyi的天气预报综合案例中，我们使用Echarts对温度、湿度、云量和降水量进行了报表展示，但是有朋友后来发私信，说在自己的环境中进行了实验，但是发现跟博主之前分享的效果不太一致。在明确了一些基本的环境信息之后，我们将问题的关键锁定在了Echarts的不同版本中。本节将分别介绍一下不同的Echarts中实现后的效果有何不同。

1、4.x环境下的效果展示

        在之前的ruoyi框架中集成天气服务接口中，我们实现了未来24小时的温度、湿度、云量和降水量的数据，并使用Echarts来进行了展示。效果如下图所示：

        大家可以看到页面页面还是比较可以的，能正常实现。来看一下当时我们使用的ruoyi中引用的Echarts的版本，代码如下：

        然后在include.html这个文件中，可以看到引用的echarts的版本信息，代码如下：

<!-- ECharts百度统计图表插件 -->
<div th:fragment="echarts-js"><script th:src="@{/ajax/libs/report/echarts/echarts-all.min.js?v=4.2.1}"></script>
</div>

        这里清晰的有echarts的版本，为4.2.1。

2、迁移到5.x版本后的问题

        看到这里后，一些小伙伴就想着使用5.x的版本来进行迁移，为了演示简单，这里我们首先使用单y轴的形式对数据进行展示。为了在Echarts.js上使用5.6的版本，这里使用官方的CDN的方式进行引入，代码如下：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js" ></script>

        引入基础的依赖之后，接下来我们创建数据，核心代码如下：

var colors = [ '#5793f3', '#d14a61', '#675bba', '#c04aab',  '#a6c30f'];
option = {tooltip : {trigger : 'axis'},grid : {right : '10%'},toolbox : {feature : {dataView : {show : false,readOnly : false},restore : {show : false},saveAsImage : {show : false}}},legend : {data : [ '新增旅客访问量' ]},xAxis : [ {type : 'category',axisTick : {alignWithLabel : false},data : [ '2024-01', '2024-02', '2024-03', '2024-04', '2024-05','2024-06', '2024-07', '2024-08', '2024-09', '2024-10','224-11', '2024-12' ]} ],yAxis : [ {type : 'value',name : '新增旅客访问量',min : 0,max : 1000,position : 'left',axisLabel : {formatter : '{value}'}} ],series : [ {name : '新增旅客访问量',type : 'bar',data : [ 100, 200, 106, 320, 630, 910, 800, 702, 380,503, 120, 290 ]} ]
};// 为echarts对象加载数据 
chart.setOption(option);

        然后我们来看一下实际的效果，如下所示：

        可以看到，两个图还是有很明显的差别的，尤其是Y轴的数据显示上。具体的差别我们会在后面的内容中进行详细的描述。

二、坐标系绘制中单Y轴优化

        下面我们将围绕出现的几个问题来详细说明如何进行单Y轴的展示优化，分别包括以下三个部分：第一部分是坐标轴线不展示，第二部分是坐标轴展示位置不明显，第三是坐标刻度不明显。

1、坐标轴线不展示

        刚开始在页面中看到的效果，我还以为是自己的程序设计的问题，比如代码有问题。因此排查问题的方向存在着问题。坐标轴线不展示的效果如下：

        带着疑问，我们打开Echarts的apache官网，然后找到了关于坐标轴的展示说明：

        到这里问题的所在就比较简单了，可以明显的看到这句说明，5.0.0开始设为了不展示，因此展示的话需要自己更改设置。这种修复的问题比较简单，直接修改如下：

axisLine : {show: true,lineStyle : { color: '#5793f3'}
}

        修改完成后，在此访问网页效果如下：

2、Y坐标轴展示位置不明显

        第二个问题便是坐标轴的展示位置不明显，可以从图上看出，Y轴的展示文字“新增旅客访问量”，这几个字的展示位置是坐标轴的顶端，那么如果我需要调整为居中该怎么处理呢？我们继续到官网上去查找：

        这里发现了坐标轴的信息，可以设置名称的信息。增加配置如下：

nameLocation:"middle",

        输入完成后可以查看以下信息：

        可以看到，这里的Y轴信息已经居中了。如果想让文字置于起始和结束位置，设置为start和end即可。大家可以进行尝试。

3、坐标刻度不明显

        到了这里，我们发现，Y轴的坐标轴的坐标刻度不是很明显，比如在不同的刻度值附件200,400,600等刻度处如果有一个对应的刻度标志位就更好，那么怎么显示呢？我们依然选择去官网看一下文档。

        可以看到这里有一个关于坐标轴刻度相关设置的配置项，根据文档进行以下设置：

axisTick: {show: true,length: 8,lineStyle: {color: '#5793f3'}
}

        以上表示，设置坐标轴刻度展示，坐标轴刻度长度为8，刻度线的样式颜色等信息，保存网页后可以看到以下效果：

        可以看到，我们需要的刻度线就已经出来了。

4、坐标轴文字样式设置

除了将坐标轴的刻度线展示出来以外，如果我们还想针对坐标轴的文字样式进行设置，比如设置字体的大小，颜色还有距离的效果。我们就可以选择对文字样式进行设置，在图上可以看到，Y轴的文字与坐标相隔很近，因此需要调整距离。在Echarts中设置文字样式的属性为：

        设置代码如下：

nameTextStyle:{fontSize:"15",padding : [0,0,30,0]
}

        设置完成后，可以看到以下效果：

        通过文字样式的设置，效果看起来就好多了。

三、多Y轴集成

        上一节我们详细的介绍了如何进行单Y轴的展示优化，在一些业务场景中，以天气信息为例，我们需要同时展示气温、云量、降水量、湿度等多维度信息，因此肯定需要引入多Y轴信息，因此如何进行多Y轴集成也是展示的关键。

1、左右布局设置

        在多坐标轴的展示中，我们需要设置多个坐标，比如设置Y轴是放置在左边还是右边，设置的样式属性为：

        下面是一个实例：

position : 'right',

        这个设置表示，将该坐标轴置于右边展示。可以根据需要将位置放于左边，即left。

2、位置偏移

        与坐标轴的文字样式设置不同，如果在多Y轴集成展示中，有多个Y轴都会放置在左边，这种情况下，我们就会发现Y坐标轴都重叠到了一起，如下图所示：

        因此在多坐标轴展示时，还是需要设置偏移，直接加上offset属性即可：

offset : 55,

        再来看经过设置后的效果如下：

        这样基本就把放置在同一侧的Y轴的距离给间隔开了，效果也更加立体。

3、多Y轴数据集成

        如果图表需要多Y轴数据集成的话，一定要记得在进行数据初始化的时候有三个地方要进行设置，不然图表可能就无法展示。第一个点就是如果需要图例筛选，增加多图例。代码如下：

legend : {data : [ '设备新增数量', '产品新增数量', '厂商新增数量' , '注册用户新增数量' ,'XXXXXX']
}

        第二个点就是每个不同的坐标轴都要进行配置，与上面的图例集合需要一一对应：

        第三个是设置具体的值，同理也需要将值进行对应的设置，代码如下图所示:

        经过这么设置后，多Y轴集成的样式就基本完成了，如果还有其他的展示问题，可以在评论区留言，一起交流。

四、总结

        以上就是本文的主要内容，本文以Echarts5.6.0为例，详细介绍在在Grid坐标系展示时，遇到坐标轴轴线不展示、坐标轴展示位置不明确、刻度展示不明显的问题，最后简单介绍了如何实现多Y轴的集成。通过这个案例的讲解，可以帮助大家了解在Echarts5.6.0中如何进行坐标系的数据可视化，虽然在开发过程中会遇到一些问题，但是需要我们学会利用官网文档，通过官网来学习相关教程，了解不同的版本的差异和实现细节。行文仓促，定有许多的不足之处，欢迎各位朋友在评论区批评指正，不胜感激。