sgxt_web/src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkjbtj.vue

<template>
  <div class="echartsBox" ref="chartRef"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { ref, onMounted } from 'vue';
const chartRef = ref()
const initChart = () => {
  const myChart = echarts.init(chartRef.value);
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderColor: '#0C2E5A',
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      top: 'middle',
      right: '5%',
      orient: 'vertical',
      itemGap: 20,
      textStyle: {
        color: '#fff',
        fontSize: 14
      },
      itemWidth: 15,
      itemHeight: 15,
      icon: 'roundRect',
      formatter: function(name) {
        const data = option.series[0].data;
        const target = data.find(item => item.name === name);
        if (target) {
          return `${name}  ${target.value}  ${(target.value / 50 * 100).toFixed(0)}%`;
        }
        return name;
      }
    },
    series: [
      {
        name: '情报反馈统计',
        type: 'pie',
        radius: ['40%', '75%'],
        center: ['30%', '50%'],
        startAngle: 90,
        zlevel: 10,
        itemStyle: {
          borderRadius: 10,
          borderWidth: 2,
          borderColor: '#0C2E5A'
        },
        selectedMode: 'single',
        selectedOffset: 30,
        animation: true,
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#0C2E5A',
          opacity: 0.8,
          shadowBlur: 20,
          shadowColor: 'rgba(0,0,0,0.5)'
        },
        data: [
          { 
            value: 18, 
            name: '实反馈', 
            itemStyle: { 
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FF6B9A' },
                { offset: 1, color: '#FF4B7A' }
              ])
            } 
          },
          { 
            value: 13, 
            name: '超时反馈', 
            itemStyle: { 
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FFAA33' },
                { offset: 1, color: '#FF8A00' }
              ])
            } 
          },
          { 
            value: 17, 
            name: '处置下发', 
            itemStyle: { 
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FFE699' },
                { offset: 1, color: '#FFD666' }
              ])
            } 
          },
          { 
            value: 2, 
            name: '未反馈', 
            itemStyle: { 
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#66B5FF' },
                { offset: 1, color: '#3AA1FF' }
              ])
            } 
          }
        ],
        zlevel: 10,
        emphasis: {
          scale: true,
          scaleSize: 10,
          itemStyle: {
            shadowBlur: 30,
            shadowColor: 'rgba(0,0,0,0.6)'
          }
        }
      }
    ],
    
  };

  option && myChart.setOption(option);

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};

onMounted(() => {
  initChart();
});
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
  background: rgba(0,29,75,0.6);
  border-radius: 0 0 4px 4px;
}
</style>