echarts双层（多层）环形图实现

悠悠：）

于 2024-09-02 15:59:43 发布

阅读量50

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_66549669/article/details/141822123

版权

双层环形就是两个环形饼图叠加。

<template>
<div id="smoke-pie">
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';

var smokeOption = {
  tooltip: {
    // trigger: 'item'
    trigger: 'none',
  },
  series: [
    {
      name: '智能烟感报警数据',
      type: 'pie',
      hoverAnimation: false, //鼠标移入变大
      color: ["#53f1f2", "#082c5f"],
      radius: [67, 77], //内外半径
      label: {
        show: false, //去除标签
      },
      itemStyle: {
        borderRadius: 10
      },
      data: [
        {
          value: 75, name: '状态正常',
        },
        {
          value: 25, name: '状态异常',
        },
      ],
    },
    {
      name: '智能烟感报警数据',
      type: 'pie',
      hoverAnimation: false, //鼠标移入变大
      color: ["#FFCA29", "#082c5f"],
      itemStyle: {
        borderRadius: 10
      },
      radius: [42, 52],
      label: {
        show: false,
      },
      data: [
        {
          value: 25, name: '状态异常',
          itemStyle: {
            color: "#FFCA29",
          },
        },
        {
          value: 75, name: '状态正常',
          itemStyle: {
            color: "#082c5f",
          },
        },
      ]
    }
  ],
};

onMounted(() => {
  var chartPie: any = document.getElementById('smoke-pie');
  var smokeChart = echarts.init(chartPie);
  smokeOption && smokeChart.setOption(smokeOption);
});
</script>
<style lang="less" scoped>
#smoke-pie{            
   width: 160px;
   height: 160px;
}
</style>