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

<script>
import echarts from "echarts";
import { currentGET } from "api/modules";
export default {
  data() {
    return {
      showPercentage: true, // 默认显示数量
      chartData:[
    [
      { modelName: '冷藏', total: 190 },
      { modelName: '普货', total: 40 }
      // { name: '海格：20%', value: 160 },
      // { name: '宇通：20%', value: 260 },
      // { name: '其它：10%', value: 260 }
    ]
  ],
    colors: ["#00E5FF", "#FF5733"]
      //colors: ["#00E5FF", "#FF5733",  "#FFBF00", "#5CDB95"]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      currentGET("big5").then((res) => {
          if(res.code == 0){ // 确保接口返回的code正确
            // 转换数据结构为饼图需要的格式
            this.chartData = [res.data.map(item => ({
              name: item.modelName,
              value: item.total
            }))];
            console.log('车型分布')
            console.log(this.chartData)
            //未显示成功，没有用到，后台增加模拟数据
            //增加模拟数据
            // this.chartData.push([{name: '氢能集卡', value: 20}]);
            // this.chartData.push({name: '氢能叉车', value: 8});
            // this.chartData.push({name: '无人机', value: 5});
            // this.chartData.push({name: '装载机', value: 10});
            this.initChart();
          }
        });
    },

    initChart() {
      const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
      let option = {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#DDDDDD', // 将原来的 #999 改为更亮的灰色
            fontWeight: 'normal',
            fontSize: 12
          }
        },
        series: this.chartData.map(function (data, idx) {
          var top = idx * 33.3;
          return {
            type: 'pie',
            radius: [50, 90],
            top: top + '%',
            height: '33.33%',
            left: 'center',
            width: '600px',
            itemStyle: {
              borderColor: 'orange',
              borderWidth: 1
            },
            label: {
              alignTo: 'edge',
              formatter: ({ name, value, percent }) => 
                `{name|${name}}\n{value|${value}辆}  {percent|${percent}%}`,
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 20,
              rich: {
                name: {  // 新增 name 样式
                  fontSize: 14,
                  color: 'yellow', // 使用亮白色
                  padding: [0, 0, 5, 0]
                },
                value: {
                  fontSize: 12,
                  color: 'orange',
                  padding: [0, 5, 0, 0]
                },
                percent: {
                  fontSize: 12,
                  color: '#FF5733' // 保留原有橙色
                }
              }
            },
            labelLine: {
              length: 40,
              length2: 15,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            data: data
          };
        })
      };

      option && myChart.setOption(option);
      this.chart = myChart;
    },
     toggleMode() {
      this.showPercentage = !this.showPercentage;
      this.initChart(); // 重新渲染图表
    }
}
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 850px;
}
</style>
