请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

nimotea
超级版主   /  发表于:2024-1-30 10:10  /   查看:175  /  回复:0
本帖最后由 nimotea 于 2024-1-30 10:22 编辑

效果

image.png896975707.png

代码
  1. const circleSize = 4; // 顶部圆环中心圆点大小比例
  2. const gapSize = 6; // 顶部圆环中心镂空区域大小比例
  3. const borderWidth = 1; // 顶部圆环边框环宽度
  4. const circleBgColor = 'rgba(8, 151, 246, 0.2)'; // 顶部圆环镂空区域背景色,建议使用 柱体渐变色后景色 透明度调整为 0.2
  5. const distance = -1; // 圆环整体到柱体距离
  6. const barWidth = '10px'; // 柱体宽度

  7. option.series.map( item => {
  8.     let color = item.itemStyle.color.type && item.itemStyle.color.type == "linear" && item.itemStyle.color.colorStops[0]['color'] || item.itemStyle.color;
  9.   item.label.show = true;
  10.   item.label.formatter = '{a|}';
  11.   item.label.backgroundColor = circleBgColor;
  12.   item.label.borderRadius = 15;
  13.   item.label.borderWidth =  borderWidth;
  14.   item.label.borderColor = color;
  15.   item.label.padding = gapSize;
  16.   item.label.distance = distance;
  17.   item.barWidth = barWidth;
  18.   item.label .rich = {
  19.     a: {
  20.       width: circleSize,
  21.       height: circleSize,
  22.       borderRadius: circleSize,
  23.       lineHeight: circleSize,
  24.       backgroundColor: color,
  25.     },
  26.   };
  27. })

  28. return option;
复制代码
使用步骤:
方式1:
在Wyn管理后台的【导入】功能,导入以下Zip包,然后在仪表板设计器的左侧工具箱的【组件模板分类中】可以找到。
echarts组件模板-圆环柱状图.zip (426.18 KB, 下载次数: 10)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部