Echarts 圆环 一类数据对应一环

最新推荐文章于 2024-09-07 09:00:00 发布
最新推荐文章于 2024-09-07 09:00:00 发布
阅读量257 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ewl0116/article/details/115615299
这篇博客详细介绍了如何使用Vue.js和ECharts库创建一个展示风险等级分布的饼图。代码中展示了如何配置不同等级的颜色、阴影和透明度，并通过多个重叠的饼图层次来呈现各等级的占比，以及整体的百分比显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

new Vue({
  el: "#app",
  data() {
    return {
      riskLegendList: [1, 2, 3, 4], // 各等级预警数量
      riskColor: ['#24d29b', '#69cde1', '#fdd27b', '#ff8c53'],
      riskColorOpacity: ['rgba(36, 210, 155,0.2)', 'rgba(105, 205, 225,0.2)', 'rgba(253, 210, 123,0.2)','rgba(255, 140, 83,0.2)'],
    }
  },
  created() {

  },
  mounted() {
    this.initChart(this.riskLegendList[0], this.riskLegendList[1], this.riskLegendList[2], this.riskLegendList[3], this.riskLegendList.reduce((previousValue, currentItem) => previousValue + currentItem, 0));
  },
  methods: {


    initChart(level4Count, level5Count, level6Count, level7Count, levelTotalCount) {
      levelTotalCount = levelTotalCount === 0 ? 1 : levelTotalCount;
      let dataStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
        }
      };

      let option = {
        title: {
          show: false,
        },
        legend: {
          show: false
        },
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: "{b} : <br/>{d}% {c}",

          padding: [8, 10], //内边距
          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);', //添加阴影
        },
        backgroundColor: 'rgb(255,255,255,0)',
        series: [{
          name: 'Level7',
          type: 'pie',
          clockWise: false,
          radius: [116, 130],
          center: ['50%', '50%'],
          itemStyle: dataStyle,
          hoverAnimation: false,
          startAngle: 90,
          label: {
            borderRadius: '10',
          },
          data: [{
            value: level7Count,
            name: '7级',
            itemStyle: {
              normal: {
                color: this.riskColor[0]
              }
            }
          },
            {
              value: levelTotalCount - level7Count,
              name: '',
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: this.riskColorOpacity[0],
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                },
                emphasis: {
                  color: this.riskColorOpacity[0]
                }
              }
            },
          ]
        }, {
          name: 'Level7',
          type: 'pie',
          clockWise: false,
          radius: [116, 130],
          center: ['50%', '50%'],
          itemStyle: dataStyle,
          hoverAnimation: false,
          startAngle: 90,
          label: {
            borderRadius: '10',
          },
          data: [{
            value: level7Count,
            name: '7级',
            itemStyle: {
              normal: {
                color: this.riskColor[0]
              }
            }
          },
            {
              value: levelTotalCount - level7Count,
              name: '',
              tooltip: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: 'transparent',
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                },
                emphasis: {
                  color: this.riskColorOpacity[0]
                }
              }
            },
          ]
        },
          {
            name: 'Level6',
            type: 'pie',
            clockWise: false,
            radius: [86, 100], // 灰色线弧度
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [{
              value: level6Count,
              name: '6级',
              itemStyle: {
                normal: {
                  color: this.riskColor[1]
                }
              }
            },
              {
                value: levelTotalCount - level6Count,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: this.riskColorOpacity[1],
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: this.riskColorOpacity[1]
                  }
                }
              },
            ]
          },
          {
            name: 'Level6',
            type: 'pie',
            clockWise: false,
            radius: [86, 100],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [{
              value: level6Count,
              name: '6级',
              itemStyle: {
                normal: {
                  color: this.riskColor[1]
                }
              }
            },
              {
                value: levelTotalCount - level6Count,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: 'transparent',
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: this.riskColorOpacity[1]
                  }
                }
              },
            ]
          },
          {
            name: 'Level5',
            type: 'pie',
            clockWise: false,
            radius: [56, 70],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [{
              value: level5Count,
              name: '5级',
              itemStyle: {
                normal: {
                  color: this.riskColor[2]
                }
              }
            },
              {
                value: levelTotalCount - level5Count,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: this.riskColorOpacity[2],
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: this.riskColorOpacity[2]
                  }
                }
              },
            ]
          },
          {
            name: 'Level5',
            type: 'pie',
            clockWise: false,
            radius: [56, 70],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [{
              value: level5Count,
              name: '5级',
              itemStyle: {
                normal: {
                  color: this.riskColor[2]
                }
              }
            },
              {
                value: levelTotalCount - level5Count,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: 'transparent',
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: this.riskColorOpacity[2]
                  }
                }
              },
            ]
          },
          {
            name: 'Level4',
            type: 'pie',
            clockWise: false,
            radius: [26, 40],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [{
              value: level4Count,
              name: '4级及以上',
              itemStyle: {
                normal: {
                  color: this.riskColor[3]
                }
              }
            },
              {
                value: levelTotalCount - level4Count,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: this.riskColorOpacity[3],
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: this.riskColorOpacity[3]
                  }
                }
              },
            ]
          },
          {
            name: 'Level4',
            type: 'pie',
            clockWise: false,
            radius: [26, 40],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [{
              value: level4Count,
              name: '4级及以上',
              itemStyle: {
                normal: {
                  color: this.riskColor[3]
                }
              }
            },
              {
                value: levelTotalCount - level4Count,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: 'transparent',
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: this.riskColorOpacity[3]
                  }
                }
              },
            ]
          }
        ]
      };
      let chart = document.getElementById("chart");
      echarts.init(chart).setOption(option);
    }

  }
})
echarts 外环内圈效果图、堆叠柱状图
smile2333的博客
05-14 940
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; const startAlpha = 1; const endAlpha = 0; const color = [ {r:55, g: 196, b: 255, }, {r:126, g: 90, b: 187,},
echarts实现多圆环嵌套
qq_37942884的博客
06-28 4348
这里写自定义目录标题echarts实现多圆环嵌套基本思路代码结尾 echarts实现多圆环嵌套 先贴效果图，或许有些初用echarts的小伙伴用得到，分享一下实现方法 基本思路 实现多圆形嵌套的基本思路就是利用echarts的环形图“pie”，在series配置多个圆环，圆环的大小百分比不一样从而实现圆环嵌套效果，多的不说，直接上代码 代码 let data1 = [ { value: 1000, name: '全部工单' }, { value: 500, name: '服
Vue中使用Echart图表插件之圆环套圈
流星宇
11-04 1784
Echart是一个很好的图表绘制插件，里面有各种各样的图表供我们选择，最近用echart做图表比较多，在接到一个在圆环里面套一个圈的需求时，刚开始我是真的无从下手，毕竟自己用echart的时间也不长，直接看echart官网也看不出个所以然来，最后抱着试一试的态度玩玩看，最后玩出了。 效果图如下： 主要注意的点： 1、创建的画1、创建的画布必须给定大小，不然无法显示，即.chart-...
echarts关于内嵌饼状图的内外两图的颜色和结果相对应的问题
weixin_34268843的博客
08-26 2325
2019独角兽企业重金招聘Python工程师标准>>> ...
Echarts 饼图 内饼图和外环图联动效果
成长的笨熊
04-02 3660
// 饼图容器样式定义 <style> #echartsPieRing{ height: 500px; width: 800px; } </style> <template> <div id='echartsPieRing'></div> </template> <script> ...
Excel饼图圆环图模板-多分类圆角圆环图
11-24
1. **数据准备**：首先，你需要有一份包含类别和对应值的数据。数据应组织成两列，一列是类别名，另一列是对应的数值。 2. **插入饼图**：在Excel中，选择你的数据，然后在顶部菜单栏点击“插入”，在图表区域选择...
echarts圆环图 圆环颜色错乱的问题
10-12
ECharts是一个强大的JavaScript图表库，用于创建交互式的数据可视化。在制作圆环图（pie chart）时，如果颜色错乱，这可能是由于以下几个原因： 1. 配置错误：检查series的颜色配置，确保每个级别的color属性对应...
echarts圆环展示百分比
最新发布
02-18
在 ECharts 中，通过 `formatter` 函数可以自定义数据显示的方式，在圆环图中显示数据项所占比例的百分比。下面是一个具体的例子说明如何配置这一功能。 #### 配置项设置 为了使圆环图能够显示出每个扇区对应的...
Excel饼图圆环图模板-百分比圆环图
11-24
饼图是数据可视化的基本元素之一，它以圆形为基底，将每个分类或部分占据的圆心角与总体的比例对应，从而直观地展示各部分所占的相对大小。而圆环图则是在饼图的基础上进行了一定的改良，将中心空出，使图形更为美观...
echarts使圆形分割
10-29
例如，`series`数组中包含一个或多个饼图系列，每个系列对应一个数据项。我们可以设定`type`为`'pie'`来创建饼图，同时可以通过`label`、`labelLine`等属性控制标签的显示方式。 2. **点击事件**：ECharts提供了...
echarts实现圆环嵌套（多重环形图，连接处倒圆角！！！）
Jiaberrr的博客
09-07 1271
【代码】echarts实现圆环嵌套（多重环形图，连接处倒圆角！！！
echarts实现多层环图（复制粘贴即可）
蜗牛~~
07-31 3613
【代码】echarts实现多层环图（复制粘贴即可）
echarts 嵌套饼图 内外圈图例联动
qq_33518042的博客
09-21 6735
最近在使用echarts 发现其功能真心不错。 但是在使用嵌套饼图时，发现内外圈无法联动，尤其将图例设置为内圈时，点击图例取消内圈饼图，外圈没有办法联动。 为了实现内外圈同时变化，这里发现一个echarts的小技巧，就是其控制都是通过控制series中data的name，那么将内外圈需要同事控制的部分设置为一样的名字，就可以实现内外圈联动。 但是在name相同时，会使默认分配颜色时相同，使颜
Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
z1076233241的博客
05-12 1万+
其次，html中建立盒子，存放这个图标，记住一定要为这个盒子设置长宽。js中按照以下格式进行使用，其中的import根据需求会有不一样之处。如果显示报错，那么使用管理员身份运行cmd。首先要进行下载，打开cmd，输入。这里展示代码，在代码中标注位置。对于环形图的操作，全部存放在。
echarts实践总结(常用三)：圆环(特点：圆环、多层嵌套的间隙、标题问题解决)
qq_45796592的博客
03-24 4147
实现单层圆环、多层圆环嵌套的间隙、标题问题解决案例
实现echarts内外圈联动
weixin_34304013的博客
12-06 332
　//控制都是通过控制series中data的name，那么将内外圈需要同事控制的部分设置为一样的名字，就可以实现内外圈联动。 　//但是在name相同时，会使默认分配颜色时相同，使颜色不好看，这里就需要给data自己分配颜色。 app.title = '嵌套环形图'; var colors=[ '#6EB6F2','#71F16F','#FFC...
echarts使用笔记总结3：series使用方法
君莫笑
01-12 1万+
Echarts 环形图 自定义配置
不同场景下的水平居中
08-30 1万+
业务需求实现一个圆环图，看着简单，做起来卡卡的…… 效果图： 步骤： 1、从echarts官网上复制一个最基本的饼图 2、在series中设置饼图的半径 和 饼图的中心(圆心)坐标 形成圆环 3、设置圆环渐变色 color 、径向渐变 4、图例说明与图表呈横向排列，设置：legend 细节点： （1）图例的图标改为圆形 （2）图例的图标在左，文字在右 （3）右边图例与圆环图位置水平居中 （4）自定义图例文字样式，文字之间有间隔，文字颜色尺寸等，使用 rich 实现： 5、图表的标题始终与圆环图保
echarts之环形图
热门推荐
zhangdui2016的博客
10-13 2万+
echarts中环形图就是饼图，区别在于是否定义了图形内部镂空的半径而已，就像下图： 那么现在有了一个圆环，中间如果空着的话就太难看了，所以给了如下的样式： 就是要给圆环中心添加内容。如果是单纯的添加内容的话，有以下三种方式： 1、graphic，是原生图形元素组件。优点是支持多种图形元素，但是如果要实现上图不太合适。因为圆环中心的字体有两种样式，面对多种样式，我能想到的只有富文本。 2、label，支持富文本，实现上图完全没问题，但是人家貌似不是干这个的。。。 如果使用了珍贵的lab
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值