Echarts使用问题--Y轴文字被遮住的解决办法

超、凢脫俗 2023-07-13 03:04 49阅读 0赞

笔者近期会出一系列的Echarts的使用问题以及解决办法，会单独弄一个分类，这是第一篇。如果有什么笔者还没写出来的问题请指出，笔者会尽快更新博客。

今天要解决的是Y轴文字被遮住的问题。

被遮住的样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]  
这种情况肯定不是我们所能接收的。接下来是解决办法：

使用grid的left与right解决：

options: { 
    	grid: { 
    		 left: '1%',
    		 right: '1%',
    		 bottom: '10%',
    		 containLabel: true,
    	},
    }

解决后的样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200309175113894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200309175418239.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts使用问题--Y轴文字被遮住的解决办法

笔者近期会出一系列的Echarts的使用问题以及解决办法，会单独弄一个分类，这是第一篇。如果有什么笔者还没写出来的问题请指出，笔者会尽快更新博客。今天要解决的是Y轴文字被遮

超、凢脫俗/ 2023年07月13日 03:04/ 0 赞/ 50 阅读

相关 echarts x/y轴坐标文字过长解决办法-换行

/ Created by HanSon on 2016/1/24. / function newline(option, number,

柔情只为你懂/ 2022年12月10日 07:20/ 0 赞/ 338 阅读

相关 echarts 隐藏y轴x轴刻度

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

以你之姓@/ 2022年12月09日 01:54/ 0 赞/ 429 阅读

相关 Vue echarts 修改 X轴、Y轴样式以及文字样式

前言：做数据统计图的时候总结了一下修改样式的东西 x轴 ------xAxis y轴 ------yAxis 数据 -----series 先来样式对

淡淡的烟草味﹌/ 2022年11月12日 14:52/ 0 赞/ 1189 阅读

相关双Y轴echarts

[https://www.makeapie.com/editor.html?c=xE1oQek3jr][https_www.makeapie.com_editor.html_c

待我称王封你为后i/ 2022年11月10日 14:17/ 0 赞/ 333 阅读

相关 echarts统计图Y轴（或X轴）文字过长问题解决

echarts 统计图Y轴文字过长在使用echarts时，出现数值非常大，Y轴又显示不下的情况就需要压缩Y轴数值刻度。 ![744482-20190227182035

不念不忘少年蓝@/ 2022年10月02日 14:43/ 0 赞/ 339 阅读

相关 echarts双y轴对齐

import as echarts from 'echarts'; var chartDom = document.getElementById('

「爱情、让人受尽委屈。」/ 2022年09月03日 00:10/ 0 赞/ 373 阅读

相关 ECharts Y轴倒置+DataSet

参考资料： 1. [https://blog.csdn.net/u013402515/article/details/49149265][https_blog.csdn.

待我称王封你为后i/ 2022年05月20日 09:10/ 0 赞/ 323 阅读

相关 Echarts实现双y轴

转载自：[https://blog.csdn.net/njueyupeng/article/details/77839897?fps=1&locationNum=1][htt

浅浅的花香味﹌/ 2022年05月13日 05:46/ 0 赞/ 993 阅读

相关 echarts统计图Y轴（或X轴）文字过长问题解决

echarts 统计图Y轴文字过长在使用echarts时，出现数值非常大，Y轴又显示不下的情况就需要压缩Y轴数值刻度。 ![744482-20190227182035

深藏阁楼爱情的钟/ 2022年01月06日 12:55/ 0 赞/ 863 阅读