【组件模板】单分类进度条
效果代码
// 横向图
option.xAxis.type = 'value';
option.yAxis.type = 'category';
option.yAxis.data = option.xAxis.data;
option.xAxis.data = null
// 新加对比背景色
option.series.barGap = '-100%';
option.series.z = 1;
return option使用步骤：
方式1：
在Wyn管理后台的【导入】功能，导入以下Zip包，然后在仪表板设计器的左侧工具箱的【组件模板分类中】可以找到。
方式2：
在仪表板设计器中添加【柱状图(ECharts)】，然后将以上代码粘贴到【自定义属性】中：
本组件出了需要添加自定义 代码之外，分类轴，数值轴，数值标签都可以使用 组件本身右侧的配置关闭开启。另外，由于进度条需要两个值来做对比，所以需要在柱状图的数值区域绑定两个度量值，后者为背景进度数据。
样式更新升级
// 系列边框颜色
let borderColor1 = "#3EF1FE";
let borderColor2 = "#3481CD";
// 系列边框宽度
let borderWidth = 2;
// 横向图
option.xAxis.type = 'value';
option.yAxis.type = 'category';
option.yAxis.data = option.xAxis.data;
option.xAxis.data = null
// 新加对比背景色
option.series.barGap = '-100%';
option.series.z = 1;
let decal ={
symbol: 'diamond',
dashArrayX: ,
dashArrayY: ,
rotation: Math.PI / 6
}
option.series.itemStyle.decal = decal;
option.series.itemStyle.borderColor = borderColor2;
option.series.itemStyle.borderColor = borderColor1;
option.series.itemStyle.borderWidth = borderWidth;
option.series.itemStyle.borderWidth = borderWidth;
return option
页:
[1]