发布时间:2023-05-22 文章分类:WEB开发, 电脑百科 投稿人:李佳 字号: 默认 | | 超大 打印

前言

在使用Echarts画图的时候,有时候图表在固定大小的盒子模型(dom容器)中会显示不完全,因此我们需要对图表进行相关的调整使得图表内容显示完全。结合最近遇到的情况,提出一些解决方向
(比较片面,后续遇到新的情况会进行补充)

柱状图、折线图

1、grid配置项

对于柱状图、折线图来说,可以通过grid配置项来调整图表在容器中的位置,以折线图为例:

(2)结果
Echarts图表显示不完全(多种图表解决方案)

2、横轴刻度标签

有时候会因为横轴刻度标签的内容太长而不能显示完全,此时我们可以对横轴刻度标签进行处理 ,包括对横轴刻度标签的字体大小、标签之间的间隔、旋转的角度等来进行调整

Echarts图表显示不完全(多种图表解决方案)

嵌套环形图

1、问题

在使用嵌套环形图的时候,外层圆环的标签内容不能完全显示,通过调整grid属性、2个圆环的大小,问题还是存在:
Echarts图表显示不完全(多种图表解决方案)

2、解决

可以通过修改标签的视觉引导线的长度来为标签内容腾出位置

可以看到:原先看不到的标签内容已经可以显示一部分了:
Echarts图表显示不完全(多种图表解决方案)

饼图

对于饼图来说,可以通过调节圆形半径的大小、圆心的位置、刻度标签字体的大小,刻度标签的视觉引导线的长度等来调整图表使之显示完全
Echarts图表显示不完全(多种图表解决方案)
Echarts图表显示不完全(多种图表解决方案)