kd-aiot-frontend-vis/src/views/bpm/vis-page/components/charts/ProcessPersonnelChart.vue

<template>
  <div ref="chartRef" class="process-personnel-chart chart-container"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'ProcessPersonnelChart',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartInstance: null
    };
  },
  watch: {
    data: {
      handler() {
        this.updateChart();
      },
      deep: true
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    this.destroyChart();
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartRef;
      if (!chartDom) return;
      this.chartInstance = echarts.init(chartDom);
      this.updateChart();
    },
    updateChart() {
      if (!this.chartInstance || !this.data) return;
      
      const totalPersonnel = this.data.reduce((sum, item) => sum + item.value, 0);
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: '{b}：{c}人',
          textStyle: { color: '#000', whiteSpace: 'normal', fontSize: 14 },
          backgroundColor: '#fff',
          borderColor: '#2068b8',
          borderWidth: 1,
          padding: 10
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 20,
          top: 'center',
          bottom: 20,
          textStyle: { color: '#e9ecef', fontSize: 12, padding: [0, 8] },
          itemWidth: 12,
          itemHeight: 10,
          itemGap: 10,
          formatter: '{name}',
          align: 'left',
          scrollDataIndex: 0,
          pageButtonItemGap: 5,
          pageButtonPosition: 'end',
          pageFormatter: '{current}/{total}',
          pageIconColor: '#e9ecef',
          pageIconInactiveColor: '#6c757d',
          pageIconSize: [15, 15],
          pageTextStyle: { color: '#e9ecef', fontSize: 12 }
        },
        series: [{
          name: '在岗人数',
          type: 'pie',
          radius: ['45%', '80%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            formatter: `{total|${totalPersonnel}}\n{unit|在岗人员数(位)}`,
            textStyle: {
              textAlign: 'center',
              lineHeight: 22,
              rich: {
                total: { fontSize: 18, fontWeight: 'bold', color: '#fff' },
                unit: { fontSize: 8, color: '#ccc', marginTop: 5 }
              }
            }
          },
          data: this.data,
          color: [
            '#1163fb', '#14cdc9', '#f9bb19', '#712ed2', '#ec4899', '#06b6d4', '#6b7280',
            '#e74c3c', '#f39c12', '#f1c40f', '#2ecc71', '#3498db', '#9b59b6',
            '#e67e22', '#e91e63', '#c0392b', '#d35400', '#16a085', '#f4d03f',
            '#1abc9c', '#4caf50', '#2980b9', '#8e44ad', '#ad1457', '#512da8',
            '#ff5722', '#d84315', '#ff9800', '#f57c00', '#388e3c', '#03a9f4',
            '#0277bd', '#673ab7', '#ff1744', '#795548', '#607d8b', '#3f51b5'
          ]
        }]
      };
      this.chartInstance.setOption(option);
    },
    destroyChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    }
  }
};
</script>

<style scoped>
.process-personnel-chart {
  width: 100%;
  height: 100%;
}
</style>