<template>
  <div ref="chartContainer" :style="{width: '100%', height: chartHeight}"
  ></div>
</template>

<script>
export default {
  name: 'LineIndex',
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    chartHeight: {
      type: String,
      default: '260px', // 默认值
    }
  },
  watch: {
    chartHeight() {
      if (this.myChart) {
        this.myChart.resize(); // 让 ECharts 重新适应新高度
      }
    }
  },
  mounted() {
    console.log('->>>>')
    this.initChart();
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.chartContainer);

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `${params.name}: ${params.value}`;
          }
        },
        graphic: [
          {
            type: 'group',
            left: 'center',
            top: '45%',
            children: [
              {
                id: 'text-name',
                type: 'text',
                left: 'center',
                top: '0', // 调整位置
                style: {
                  text: '', // 初始为空，鼠标移入时更新
                  textAlign: 'center',
                  fontSize: 12,
                  fill: '#fff' // 字体颜色
                }
              },
              {
                id: 'text-value',
                type: 'text',
                left: 'center',
                top: '10', // 调整位置
                style: {
                  text: '',
                  textAlign: 'center',
                  fontSize: 18,
                  fontWeight: 'bold',
                  fill: '#fff' // 字体颜色
                }
              }
            ]
          }
        ],
        series: [
          {
            name: '人员类型',
            type: 'pie',
            zlevel: 1,
            colorMappingBy: 'id',
            center: ['50%', '50%'],
            radius: ['40%', '55%'],
            label: {
              normal: {
                show: false, // 直接隐藏标签
              }
            },
            labelLine: {
              normal: {
                show: false
              },
            },
            tooltip: {
              show: false,
            },
            color: ['#18755B', '#0D618E', '#168990', '#738353', '#7c5b24'],
            data: [
              {value: 500, name: '信息技术', itemStyle: {color: '#18755B'}},
              {value: 150, name: '生物医药', itemStyle: {color: '#0D618E'}},
              {value: 100, name: '能源环境', itemStyle: {color: '#168990'}},
              {value: 50, name: '工业制造', itemStyle: {color: '#738353'}},
              {value: 300, name: '食品工业', itemStyle: {color: '#7c5b24'}}
            ]
          },
          {
            name: '人员类型',
            type: 'pie',
            zlevel: 2,
            colorMappingBy: 'id',
            center: ['50%', '50%'],
            radius: ['55%', '70%'],
            label: {
              normal: {
                show: false,
              }
            },
            labelLine: {
              normal: {
                show: false
              },
            },
            tooltip: {
              show: false,
            },
            color: ['#229d7c', '#0f6fbf', '#1badc2', '#adb066', '#b8681e'],
            data: [
              {value: 500, name: '信息技术', itemStyle: {color: '#229d7c'}},
              {value: 150, name: '生物医药', itemStyle: {color: '#0f6fbf'}},
              {value: 100, name: '能源环境', itemStyle: {color: '#1badc2'}},
              {value: 50, name: '工业制造', itemStyle: {color: '#adb066'}},
              {value: 300, name: '食品工业', itemStyle: {color: '#b8681e'}}
            ]
          },
          {
            name: '人员类型',
            type: 'pie',
            zlevel: 3,
            colorMappingBy: 'id',
            center: ['50%', '50%'],
            radius: ['70%', '90%'],
            label: {
              normal: {
                show: false,
              }
            },
            labelLine: {
              normal: {
                show: false
              },
            },
            tooltip: {
              show: false,
            },
            color: ['#37FFC9', '#0084FF', '#19D6FF', '#FFE777', '#FF7908'],
            data: [
              {value: 500, name: '信息技术', itemStyle: {color: '#37FFC9'}},
              {value: 150, name: '生物医药', itemStyle: {color: '#0084FF'}},
              {value: 100, name: '能源环境', itemStyle: {color: '#19D6FF'}},
              {value: 50, name: '工业制造', itemStyle: {color: '#FFE777'}},
              {value: 300, name: '食品工业', itemStyle: {color: '#FF7908'}}
            ]
          }
        ]
      };
      this.myChart.setOption(option);

      // 监听鼠标事件，动态更新中心文本
      this.myChart.on('mouseover', (params) => {
        this.myChart.setOption({
          graphic: [
            {id: 'text-name', style: {text: params.name}},
            {id: 'text-value', style: {text: params.value + '个'}}
          ]
        });
      });

      // 鼠标移出时清空中心文本
      this.myChart.on('mouseout', () => {
        this.myChart.setOption({
          graphic: [
            {id: 'text-name', style: {text: ''}},
            {id: 'text-value', style: {text: ''}}
          ]
        });
      });
    },
  }
};
</script>
