Echarts 类似进度条样式 Label 设置在柱状图的顶端外侧

最近项目中写一个大屏演示，里面多数是Echars 图表，因为大多数都需要自己设置一些特性，才能达到效果，因此好好读了Echarts  的文档，尤其是配置项。

效果图

思路

左图

其中左侧是看到的一篇文章 https://blog.csdn.net/qq_41619796/article/details/88661612，类似进度条的样式，思路是echars 两个部分叠加，但时看了我们项目的效果图不太可以，因为项目效果图整个有效数据和背景部分都是有圆角的，这样两部分的连接处就会有问题。

右图

在项目实现完成后，写的demo 样式，和实际项目类似，只是实际项目是横向的，代码效果是官方案例数据，具体思路是，只需要一个坐标系，只是给柱状图设置背景及圆角，关于设置背景图在较高版本已经有现成的API，较低版本也可以实现，代码中就是，设置完成背景，因为背景的值都是最大值满格的，所以核心思路是 将有效数据的数值 设置为背景柱图的label 值，这样样式等都比较灵活方便。其中最核心的API是 label 的formatter 

代码

实际项目实现的横向效果如下：

 

在看了echarts 的一些API 和 配置项之后 发现，他原来可以自定义那么多样式，开心于新发现和新收获。

除非付诸行动，否则空口无凭