vue3饼状图三圈圆环

import { onMounted, ref, reactive, toRefs, computed, watch } from 'vue'
import type { Ref } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({
  colorList: {
    type: Array,
    default: ['#00eefe', '#eb8323', '#fdd453', '#1edb4a', '#1fdf49', '#34b4fd']
  },
  totalNum: {
    type: Number,
    default: 0
  },
  seriesData: {
    type: Array,
    default: []
  }
})

const { colorList, seriesData } = toRefs(props)

const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>, 'dark')

const option = computed(() => {
  return {
    color: colorList.value,
    polar: {
      radius: ['100%', '90%'],
      center: ['50%', '50%']
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      containLabel: false //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    angleAxis: {
      max: 100,
      clockwise: false, //刻度增长是否按顺时针，默认顺时针(true)。
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '中间文字',
        z: 100,
        type: 'gauge',
        radius: '-50%',
        center: ['50%', '50%'], // 需和type: 'pie'中的center一致
        // 配置中间的数字的样式
        detail: {
          // 调节数字位置
          offsetCenter: [-1, -10],
          fontSize: 28,
          color: '#00F0FF',
          fontFamily: 'electronicFont2'
        },
        pointer: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        // 中间的字和数字 数据
        data: [
          {
            value: props.totalNum,
            name: '合计',
            title: {
              // 配置“万kW·h”的样式
              show: true,
              fontSize: 14,
              color: '#ffffff',
              offsetCenter: ['0%', '-40%']
            }
          }
        ]
      },

      {
        center: ['50%', '50%'], //仪表的位置
        name: '刻度', //仪表的名字
        type: 'gauge', //统计图类型为仪表
        radius: '90%', //统计图的半径大小
        min: 0, //最小刻度
        max: 360, //最大刻度
        splitNumber: 60, //刻度数量
        startAngle: 0, //开始刻度的角度
        endAngle: 360, //结束刻度的角度
        axisLine: {
          //设置默认刻度盘上的刻度不显示，重新定义刻度盘
          show: false,
          lineStyle: {
            width: 1,
            color: [[1, 'rgba(255,255,255,0)']]
          }
        }, //仪表盘轴线
        axisLabel: {
          //仪表盘上的数据
          show: false,
          color: '#e3e3e3', //仪表盘上的轴线颜色
          distance: 2 //图形与刻度的间距
        }, //刻度标签。
        axisTick: {
          show: false,
          splitNumber: 30, //刻度的段落数
          lineStyle: {
            color: '#e3e3e3',
            width: 1, //刻度的宽度
            shadowColor: '#e3e3e3',
            shadowBlur: 1
          },
          length: 8 //刻度的长度
        }, //刻度样式
        pointer: {
          //表盘上的指针
          show: false
        },
        itemStyle: {
          // color: "rgba(146,26,10,0.24)",
          normal: {}
        },

        splitLine: {
          //文字和刻度的偏移量
          show: true,
          length: 6, //便宜的长度
          lineStyle: {
            color: 'rgba(57,208,229,1)',
            width: 1,
            shadowColor: 'rgba(57,208,229,1)',
            shadowBlur: 1
          }
        }, //分隔线样式
        z: 2
      },

      {
        name: '第二圈',
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['75%', '85%'],
        clockwise: false, //饼图的扇区是否是顺时针排布
        avoidLabelOverlap: false,
        data: seriesData.value,
        label: {
          show: false
        },
        z: 9,

        itemStyle: {
          normal: {
            borderWidth: 8,
            borderRadius: 40
          }
        }
      },

      {
        name: '进度条',
        type: 'bar',
        radius: '50%',
        center: ['90%', '100%'],
        roundCap: true,
        z: 3,
        showBackground: true,
        barWidth: 1,
        backgroundStyle: {
          color: '#e3e3e3'
        },
        data: [100],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: '#0e8bc1',
            borderWidth: 8,
            borderRadius: 40
          }
        }
      }
    ]
  }
})

watch(props.seriesData, () => {
  setOptions(option.value, true)
})

onMounted(() => {
  setOptions(option.value)
})

<template>
  <div class="w-full h-full" ref="chartRef"></div>
</template>