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

<script>
export default {
  name: 'LineIndex',
  data() {
    return {
      myChart: null,
    };
  },
  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 = {
        color: ['#159AFF', '#76FAB3', '#65DFDD', '#FCC779'], // 对应 icon1 ~ icon4
        tooltip: {
          trigger: 'item',
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: [
            'rose1',
            'rose2',
            'rose3',
            'rose4'
          ]
        },
        series: [
          {
            name: '金融产品发布情况',
            type: 'pie',
            radius: [15, 100],
            center: ['55%', '50%'],
            roseType: 'radius',
            startAngle: 270,
            label: {
              normal: {
                show: false, // 直接隐藏标签
              }
            },
            labelLine: {
              normal: {
                show: false
              },
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              {value: 40, name: 'rose 1'},
              {value: 33, name: 'rose 2'},
              {value: 28, name: 'rose 3'},
              {value: 22, name: 'rose 4'}
            ]
          },
          {
            name: '透明圆圈',
            type: 'pie',
            radius: [15, 30],
            center: ['55%', '50%'],
            itemStyle: {
              color: 'rgba(250, 250, 250, 0.3)',
            },
            data: [
              {value: 10, name: ''}
            ]
          },
          {
            name: '透明圆圈',
            type: 'pie',
            radius: [30, 31],
            center: ['55%', '50%'],
            itemStyle: {
              color: 'rgba(250, 250, 250)',
            },
            data: [
              {value: 10, name: ''}
            ]
          }
        ]
      };
      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>
