echarts分割柱形图实现渐变电量效果柱状图

echarts分割柱形图实现渐变电量效果柱状图_第1张图片

先看下效果图是这个样子的 ,和普通的柱状图最明显的区别就是需要做成类似于电池格电量显示效果。

目录

1、官网找例子

 2、改造示例

3、全部代码

4、初始效果和完成效果对比


1、官网找例子

首先到Echarts官网找到基础的柱状图

官网初始option

 我们将option复制到代码中,

得到了基础效果如下图:

 2、改造示例

【注】:这里为了避免泄露项目信息而达到演示效果,数据沿用官网示例,不再做类似效果图中的数据更改。

为了实现想要的效果,首先需要有象形柱图的基础或者说概念,可以先看下我写的这个例子↓

echarts象形柱图实现电量效果柱状图这个例子实现的效果图下图↓

如果你保证看完了上述代码,并理解了,接下来我们就开始实现多了渐变效果的样式。

 思路简单来说就是——两层效果叠加,底层是渐变柱状图(bar),上层小分割层则是象形柱(pictorialBar)

先设置第一层底层,关键代码如下↓

echarts分割柱形图实现渐变电量效果柱状图_第2张图片

对应效果如图→echarts分割柱形图实现渐变电量效果柱状图_第3张图片

 再设置第二层分割效果,关键代码如下↓

echarts分割柱形图实现渐变电量效果柱状图_第4张图片

 两层叠加之后,效果如图→echarts分割柱形图实现渐变电量效果柱状图_第5张图片

 为了更好说明,我做了一张图,这样看实现思路就比较清晰!

echarts分割柱形图实现渐变电量效果柱状图_第6张图片

3、全部代码




为了防止歧义,补充一下以上代码中的版本信息 

echarts分割柱形图实现渐变电量效果柱状图_第7张图片

4、初始效果和完成效果对比

echarts分割柱形图实现渐变电量效果柱状图_第8张图片


最后,说点题外话吧,这也是我第一次感受到了互联网深深的恶意,别人很随便的一句话,就抹杀掉了你所谓的付出和分享的好意,

echarts分割柱形图实现渐变电量效果柱状图_第9张图片

虽然知道不应该太在意这些,但是看到难听的话,还是忍不住失落确切说是伤心吧……但是但是,就这样吧,有些人值得,有些人不值得,何必纠结呢……

继续做自己认为对的事情吧,加油!!!!!!!!!!!!!

你可能感兴趣的:(扣出效果图,eCharts,echarts,柱状图,象形柱,pictorialBar)