【组件模板】圆环渐变柱状图
本帖最后由 nimotea 于 2024-1-30 10:22 编辑效果
代码
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['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包，然后在仪表板设计器的左侧工具箱的【组件模板分类中】可以找到。
方式2：
在仪表板设计器中添加【柱状图(ECharts)】，然后将以上代码粘贴到【自定义属性】中：
其中柱状图顶部的圆环属性需要手动配置代码变量，可以根据需求自行调整。
页:
[1]