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

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

pic1.png

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

pic2.png

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。