本帖最后由 君茗 于 2023-10-23 08:42 编辑
V11版本优化了很多内容,目前柱状图想做的好看已经是很简单的事情了
本次尝试使用V11版本交互式仪表盘实现一些想要的柱状图效果
效果如图

开始制作
1.组件选择:横条图
因为进度图目前无法添加自定义属性,所以此处选择了横条图
2.选取数据
3.调整样式
颜色:改为渐变,无需在颜色标记中拖入字段,只需要点击齿轮按钮进行设置即可,若加入字段,会按照这个字段进行分组显示颜色

调整圆角:基础-圆角,统一设置为5

隐藏x、y轴相关内容,只显示y轴的刻度

调整柱子宽度,这一步可以在基础-柱间距中设置,不过只能设置百分比间距,此处在自定义属性中添加柱子宽度为10即:barWidth: 10
[小技巧]圆角角度=柱子宽度的一半 这样看起来比较好看
自定义属性中:显示柱子背景,并设置圆角
整体option如下:
option = {
series: [{
barWidth: 10,
showBackground: true,
backgroundStyle: {
borderRadius: 5
}
}]
}
ok,一个看起来不错的横条图就出来了 |