bxztApp/packages/screen/src/views/RiskWarning/component/ringChart.vue

<template>
  <div class="ring-chart" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  chartData: {
    type: Array,
    default: () => [
      { name: '蓝色', value: 13, color: '#40a9ff' },
      { name: '橙色', value: 40.2, color: '#ff7a45' },
      { name: '黄色', value: 22, color: '#ffc53d' },
      { name: '红色', value: 8, color: '#ff4d4f' }
    ]
  },
  centerText: {
    type: String,
    default: '风险\n状况'
  }
})

const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
  if (!chartRef.value) return

  chartInstance = echarts.init(chartRef.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}%'
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: 'center',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      data: props.chartData.map(item => ({
        name: item.name,
        icon: 'circle'
      }))
    },
    series: [
      {
        name: '风险状况',
        type: 'pie',
        radius: ['45%', '65%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{c}%',
          color: '#fff',
          fontSize: 12
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 10,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        data: props.chartData.map(item => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: item.color
          }
        }))
      },
      {
        type: 'pie',
        radius: ['0%', '35%'],
        center: ['40%', '50%'],
        silent: true,
        label: {
          show: true,
          position: 'center',
          formatter: props.centerText,
          color: '#fff',
          fontSize: 16,
          fontWeight: 'bold',
          lineHeight: 24
        },
        data: [{ value: 1, name: '', itemStyle: { color: 'transparent' } }]
      }
    ]
  }

  chartInstance.setOption(option)
}

const updateChart = () => {
  if (!chartInstance) return

  const option = {
    legend: {
      data: props.chartData.map(item => ({
        name: item.name,
        icon: 'circle'
      }))
    },
    series: [
      {
        data: props.chartData.map(item => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: item.color
          }
        }))
      },
      {
        label: {
          formatter: props.centerText
        }
      }
    ]
  }

  chartInstance.setOption(option)
}

const handleResize = () => {
  chartInstance?.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chartInstance?.dispose()
})

watch(() => props.chartData, updateChart, { deep: true })
watch(() => props.centerText, updateChart)
</script>

<style lang="scss" scoped>
.ring-chart {
  width: 100%;
  height: 100%;
}
</style>