登录/注册

首页 › Wyn 商业智能专区 › 产品教程 › 查看内容

30 主题	106 帖子	632 积分

Rank: 8 Rank: 8

积分: 632

10415
金币
30
主题
106
帖子

最新发帖

【组件模板】单分类进度条

nimotea
超级版主 / 发表于：2024-1-30 10:20 / 查看：1796 / 回复：1

效果

image.png517387084.png

代码

// 横向图
option.xAxis.type = 'value';
option.yAxis.type = 'category';
option.yAxis.data = option.xAxis.data;
option.xAxis.data = null
// 新加对比背景色
option.series[1].barGap = '-100%';
option.series[1].z = 1;
return option

复制代码

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

echarts组件模板-进度条.zip (400.69 KB, 下载次数: 452)

收藏

回复

1 个回复

倒序浏览

nimotea
超级版主 / 发表于：2024-2-6 17:28:01 沙发

样式更新升级

image.png847729492.png

// 系列边框颜色
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[1].barGap = '-100%';
option.series[1].z = 1;
let decal = {
symbol: 'diamond',
dashArrayX: [5,5],
dashArrayY: [1, 0],
rotation: Math.PI / 6
}
option.series[1].itemStyle.decal = decal;
option.series[1].itemStyle.borderColor = borderColor2;
option.series[0].itemStyle.borderColor = borderColor1;
option.series[1].itemStyle.borderWidth = borderWidth;
option.series[0].itemStyle.borderWidth = borderWidth;
return option

复制代码

回复 使用道具举报