<template>
  <div class="chartsT">
      应用使用分析(帕累托图)
      <div ref="chart" style="width:100%;flex: 1;"></div>
  </div>
</template>

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

export default {
  name: "ParetoChart",
  props: {
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      rawData: [],
      chart: null
    }
  },

  computed: {
    
    // 按 form_count 降序排列
    sortedData() {
      return this.rawData.slice().sort((a, b) => b.form_count - a.form_count);
    },
    xData() {
      return this.sortedData.map(item => item.name);
    },
    barData() {
      return this.sortedData.map(item => item.form_count);
    },
    lineData() {
      // 计算累计百分比
      let total = this.barData.reduce((sum, v) => sum + v, 0);
      let acc = 0;
      return this.barData.map(v => {
        acc += v;
        return +(acc / total * 100).toFixed(2);
      });
    }
  },
  watch: {
    chartData:{
        handler(val) {                
            if (val.length) {
                this.rawData = JSON.parse(JSON.stringify(val))                
                this.initChart();
            }
        },
        deep:true,
        immediate: true  // 组件创建时立即执行
    }
  },
  mounted() {
    // this.rawData = JSON.parse(JSON.stringify(this.chartData))
    // this.initChart();
    window.addEventListener('resize', this.handleResize);
    
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    this.chart && this.chart.dispose();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const option ={
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: { left: 60, right: 60, bottom: 60, top: 60 },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLabel: {
              rotate: 30,
              interval: 0,
              margin: 20,  // 增加标签与轴线的间距
               formatter: function(value) {
                  return value.replace(/(.{6})/g, '$1\n');  // 每6字符换行
                }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '数量',
            minInterval: 1
          },
          {
            type: 'value',
            // name: '累计百分比',
            min: 0,
            max: 100,
            axisLabel: { formatter: '{value}%' }
          }
        ],
        series: [
          {
            name: '使用数量',
            type: 'bar',
            data: this.barData,
            itemStyle: {
              color: '#5470c6'
            }
          },
          {
              name: '复制数量',
              type: 'line',
              yAxisIndex: 1,
              data: this.rawData.map(e=> e.copy_count),
              lineStyle: {
                  color: '#ff0000' // 也可以在这里设置线条颜色
              }
          },
          {
            name: '累计百分比',
              type: 'line',
              yAxisIndex: 1,
              data: this.lineData,
              symbol: 'circle',
              markLine: {
                  symbol:'none',//去掉箭头
                  data: [
                      {
                          name: '80%线',
                          yAxis: 80,  // 80%的位置
                          lineStyle: {
                              color: 'red',  // 将该线设置为红色
                              type: 'solid'  // 设置为实线
                          },
                          symbol: 'none', // 使用内置的箭头图标
                          label: {
                              show: false  // 不显示标签
                          },
                          // 这里可以添加其他样式配置
                      }
                  ]
              },
              symbolSize: 8,
              lineStyle: {
                  color: '#91cc75'
              },
              itemStyle: {
                  color: '#91cc75'
              },
              label: {
                  show: true,
                  formatter: '{c}%',
                  position: 'top'
              }
          }
        ]
      };
      this.chart.setOption(option)
      window.removeEventListener("resize", this.chart.resize);
    },
    handleResize() {
      this.chart && this.chart.resize();
    },
  }
};
</script>

<style scoped>
.chartsT{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
