ECharts — 柱状图相关功能点（柱状样式、顶部装饰、提示框及动画） ^_^

type

status

date

slug

summary

柱状样式

首先，我给大家提供一种柱状图样式，个人感觉不错，而且实现也很简单

看着很酷，实现也很简单，只需要改变一下柱状的color即可，改为渐变色

我取巧，弄了种很简单的方式

可以看到，在颜色后面加00即可，也就是透明度大小，换成另一种形式，大家可能看着更熟悉，

#21B8FA → rgb(33,184,250)，而加00就是，#21B8FA00 → rgba(33,184,250, 0)

接下来我们来看具体功能点吧

柱状类型

有个配置项，是设置柱状类型的，有两个选项

方形

子弹头

效果如下

这个很容易实现，通过配置项即可

属性为：seriesitemStyle.borderRadius

所以方向很明确了，直接设置为[9999, 9999, 0, 0]即可

最终实现效果

顶部装饰

效果如下

也是有两种实现方式，一种是通过再加一个series去实现，把所有的点换成图片即可

使用的是散点图，我的理解是没有折线的折线图

然后利用symbolSize和symbolOffset来控制大小和偏移去实现的

另一种方式是通过label的rich属性去实现的，也就是给label添加一个样式，样式里添加背景图片，并控制大小和偏移，具体代码如下

为了性能上的取舍，最终选中了用label的rich去实现的

最终实现效果

提示框

效果如下

这边的话，主要就是去自定义tooltip的formatter，去自己重新写一个提示框来满足该效果，然后注意系列颜色啥的就好了，其他没啥

我把其中的HTML内容抽离出来

item HTML

return HTML

最终内容

里面包括了设置背景图片、宽高、偏移等功能

最终实现效果

去除提示框自带的阴影效果

首先给tooltip提供一个className

然后用CSS样式设置一下即可

提示框动画

效果如下

如果看过我之前那篇文字的同学，可能会对这里很熟悉，实现的方式是一样的，只是同时多了个显示提示框的功能

这里我就直接附上代码了，有兴趣的可以去看我的上一篇文章

这边的实现会比环形图简单不少，少了一些功能

最终实现效果

水球图

这次的内容比较少，所以我就把刚做的这个需求也添加到这次的文章里了 ^_^

实现效果

参考案例

echarts图表集

ECharts图表集,EChartsDemo集,echarts gallery,Make A Pie,分享你的可视化作品isqqw.com

https://www.isqqw.com/viewer?id=14501

看着确实非常酷炫，实现其实也很简单，echarts没有，但有一个这个水球图插件扩展

安装

引入

使用

其中文字的话，我是额外附加的，放到一个div里面去处理的

还有一个就是背景图片了，需要根据图表位置进行调整和偏移

最终将其抽离为一个组件，遍历3次即可得到该效果

最终实现效果

好了，今天的内容点就到这里啦🎉🎉🎉 ^_^

柱状样式

柱状类型

顶部装饰

提示框

去除提示框自带的阴影效果

提示框动画

水球图

JinSo

交流频道

加入我们的社群讨论分享