<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: ["#1890ff", "#ff9800"]
      //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
            }))];
            this.initChart();
          }
        });
    },

    initChart() {
      const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
      let option = {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#000000', // 浅色主题使用黑色
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        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: '#ff9800', // 使用较暗的橙色边框
              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: '#666666', // 使用深灰色降低亮度
                  padding: [0, 0, 5, 0]
                },
                value: {
                  fontSize: 12,
                  color: '#ff9800', // 使用较暗的橙色
                  padding: [0, 5, 0, 0]
                },
                percent: {
                  fontSize: 12,
                  color: '#f57c00' // 使用更深的橙色
                }
              }
            },
            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: 800px;
}
</style>
