echarts现存与容量、柱状图与折线图结合时每根折线与柱状图中心对应关系图

最近对echarts的使用过分的多，需求很多，很多地方都需要自定义重写，本文主要分享两个案例：温度计类型的现存与容量；柱状图与折线结合时，折线拐点需要在每根柱状图顶端中心位置。多说不易，直接上效果图并且附上链接：

• 现存与容量 https://gallery.echartsjs.com/editor.html?c=xD4w6iuJl5&v=7

pic1.png

这个图的个人难点在于，自行添加提示时，需要显示容量与现存。在xAxis和yAxis中的data都需要给数据，才能在tooltip的formatter中才能拿到值。

• 折线图与饼状图结合 https://gallery.echartsjs.com/editor.html?c=xD4w6iuJl5&v=12

pic2.png

这个图是在容量与现存基础之上改造的（业务需求），如果只需要单根柱子，去掉叠加的就行。实现思路是添加了一根隐藏的x轴，通过调整每根折现图的偏移量实现

以上两个图例可以直接拿来使用，所给链接中有实现的全部代码，实现过程就不做详细描述，以后会出一篇文章对echarts各个属性分析/修改。数据、颜色稍加修改便可。如有不知，可以留言。（一定尽力解答）