echarts图表种类（Echarts图表显示不完全（多种图表解决方案））

前言

在使用Echarts画图的时候 
  
  
  
  
  
  
  
 ，有时候图表在固定大小的盒子模型（dom容器）中会显示不完全 
  
  
  
  
  
  
  
 ，因此我们需要对图表进行相关的调整使得图表内容显示完全 
  
  
  
  
  
  
  
 。结合最近遇到的情况

 


 


 


 


 


 


 


 
，提出一些解决方向

（比较片面 
 
 
 
 
 
 
 
，后续遇到新的情况会进行补充）

柱状图                、折线图

1
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  、grid配置项

对于柱状图















、折线图来说 
   
   
   
   
   
   
   
  ，可以通过grid配置项来调整图表在容器中的位置
 

 

 

 

 

 

 

 
，以折线图为例：

折线图中横轴的刻度标签显示不完全：

grid配置项

grid是直角坐标系内绘图网格
 

 

 

 

 

 

 

 
，单个 grid 内最多可以放置上下两个 X 轴                ，左右两个 Y 轴 
  
  
  
  
  
  
  
 。可以在网格上绘制折线图 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，柱状图















，散点图（气泡图）

left  
  
  
  
  
  
  
  
、top 
  
  
  
  
  
  
  
 、right


 


 


 


 


 


 


 


 、bottom属性

（1）可以通过left 
 
 
 
 
 
 
 
、top  
   
   
   
   
   
   
   
 、right 

 

 

 

 

 

 

 

 、bottom属性来调整图表在网格中的位置                        ，比如left属性调整的是图表组件离容器左侧的距离

（2）这些属性的值可以是像 20 这样的具体像素值 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，可以是像 ‘20%’ 这样相对于容器高宽的百分比

举例:

（1）代码

通过grid配置项























，调整right属性                ，让图表离网格的右边远一点使得图表显示完全：

(2)结果

2
 

 

 

 

 

 

 

 
、横轴刻度标签

有时候会因为横轴刻度标签的内容太长而不能显示完全 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，此时我们可以对横轴刻度标签进行处理 















，包括对横轴刻度标签的字体大小                、标签之间的间隔
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 、旋转的角度等来进行调整

官网文档：

举例：

对横轴刻度标签进行处理 
  
  
  
  
  
  
  
 ，包括标签间隔















、旋转角度                        、刻度标签与轴线之间的距离

（1）代码

（2）结果

嵌套环形图

1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 、问题

在使用嵌套环形图的时候 
  
  
  
  
  
  
  
 ，外层圆环的标签内容不能完全显示,通过调整grid属性























、2个圆环的大小

 


 


 


 


 


 


 


 
，问题还是存在：

2                、解决

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

官方文档：

视觉引导线分为2段：

第一段length(里边的线） 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  、第二段length2(外边的线）

在外层圆环的series参数设置中 
 
 
 
 
 
 
 
，通过labelLine属性进行相应的视觉引导线长度设置即可：

比如：第二段视觉引导线length2(外层）的长度为100：

我们尝试缩短第二段length2的长度 
   
   
   
   
   
   
   
  ，设置为15：

可以看到：原先看不到的标签内容已经可以显示一部分了：

进一步调整两段视觉引导线的长度（length















、length2)
 

 

 

 

 

 

 

 
，同时可以结合标签的字体大小,2个圆环的半径进行相应的调整
 

 

 

 

 

 

 

 
，即可让标签的内容完全显示

饼图

对于饼图来说                ，可以通过调节圆形半径的大小  
  
  
  
  
  
  
  
、圆心的位置 
  
  
  
  
  
  
  
 、刻度标签字体的大小 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，刻度标签的视觉引导线的长度等来调整图表使之显示完全