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

前言

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

柱状图、折线图

1、grid配置项

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

  • 折线图中横轴的刻度标签显示不完全:
    Echarts图表显示不完全(多种图表解决方案)_第1张图片

  • grid配置项
    grid是直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)

  • left、top、right 、bottom属性
    (1)可以通过left、top、right 、bottom属性来调整图表在网格中的位置,比如left属性调整的是图表组件离容器左侧的距离
    (2)这些属性的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比

  • 举例:
    (1)代码
    通过grid配置项,调整right属性,让图表离网格的右边远一点使得图表显示完全:
    Echarts图表显示不完全(多种图表解决方案)_第2张图片

(2)结果
Echarts图表显示不完全(多种图表解决方案)_第3张图片

2、横轴刻度标签

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

  • 官网文档:
    Echarts图表显示不完全(多种图表解决方案)_第4张图片
    Echarts图表显示不完全(多种图表解决方案)_第5张图片

Echarts图表显示不完全(多种图表解决方案)_第6张图片

  • 举例:
    对横轴刻度标签进行处理,包括标签间隔、旋转角度、刻度标签与轴线之间的距离
    (1)代码
    Echarts图表显示不完全(多种图表解决方案)_第7张图片
    (2)结果
    Echarts图表显示不完全(多种图表解决方案)_第8张图片

嵌套环形图

1、问题

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

2、解决

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

  • 官方文档:
    Echarts图表显示不完全(多种图表解决方案)_第10张图片

  • 视觉引导线分为2段:
    第一段length(里边的线) 、第二段length2(外边的线)

  • 在外层圆环的series参数设置中,通过labelLine属性进行相应的视觉引导线长度设置即可:
    Echarts图表显示不完全(多种图表解决方案)_第11张图片

  • 比如:第二段视觉引导线length2(外层)的长度为100:
    Echarts图表显示不完全(多种图表解决方案)_第12张图片

  • 我们尝试缩短第二段length2的长度,设置为15:
    Echarts图表显示不完全(多种图表解决方案)_第13张图片

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

  • 进一步调整两段视觉引导线的长度(length、length2),同时可以结合标签的字体大小,2个圆环的半径进行相应的调整,即可让标签的内容完全显示

饼图

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

你可能感兴趣的:(Echarts,echarts,前端,javascript)