type
status
date
slug
summary
tags
category
icon
password
Edited
Nov 13, 2023 01:02 PM
Created
Nov 13, 2023 05:29 AM
记录一下在公司遇到的一些功能，以及相关实现
经过之前环形图需求，对ECharts的使用感觉已经非常熟练了，这次写柱状图的时候就快了很多。
在这里还是力推一下这个ECharts图表集，大部分的灵感都来自于这 ^_^
等会讲具体功能的时候，也会将一些具体的案例提供给大家
柱状样式
首先，我给大家提供一种柱状图样式，个人感觉不错，而且实现也很简单
看着很酷，实现也很简单，只需要改变一下柱状的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没有，但有一个这个水球图插件扩展
安装
引入
使用
其中文字的话，我是额外附加的，放到一个
div里面去处理的还有一个就是背景图片了，需要根据图表位置进行调整和偏移
最终将其抽离为一个组件，遍历3次即可得到该效果
最终实现效果
好了，今天的内容点就到这里啦🎉🎉🎉 ^_^
- 作者:JinSo
- 链接:https://jinso365.top/article/echarts-bar
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。