【组件模板】圆环渐变柱状图

收藏

本帖最后由 nimotea 于 2024-1-30 10:22 编辑

效果

image.png896975707.png

代码

const circleSize = 4; // 顶部圆环中心圆点大小比例
const gapSize = 6; // 顶部圆环中心镂空区域大小比例
const borderWidth = 1; // 顶部圆环边框环宽度
const circleBgColor = 'rgba(8, 151, 246, 0.2)'; // 顶部圆环镂空区域背景色，建议使用柱体渐变色后景色透明度调整为 0.2
const distance = -1; // 圆环整体到柱体距离
const barWidth = '10px'; // 柱体宽度
option.series.map( item => {
let color = item.itemStyle.color.type && item.itemStyle.color.type == "linear" && item.itemStyle.color.colorStops[0]['color'] || item.itemStyle.color;
item.label.show = true;
item.label.formatter = '{a|}';
item.label.backgroundColor = circleBgColor;
item.label.borderRadius = 15;
item.label.borderWidth = borderWidth;
item.label.borderColor = color;
item.label.padding = gapSize;
item.label.distance = distance;
item.barWidth = barWidth;
item.label .rich = {
a: {
width: circleSize,
height: circleSize,
borderRadius: circleSize,
lineHeight: circleSize,
backgroundColor: color,
},
};
})
return option;

复制代码

使用步骤：
方式1：
在Wyn管理后台的【导入】功能，导入以下Zip包，然后在仪表板设计器的左侧工具箱的【组件模板分类中】可以找到。

		自动登录	找回密码
密码			立即注册

0 个回复