init

2026-01-06 10:06:01 +08:00
parent 907e68c68f
commit c2e7fc1f20
138 changed files with 118829 additions and 0 deletions
--- a/src/views/indexs/center-bottom.vue
+++ b/src/views/indexs/center-bottom.vue
@@ -0,0 +1,130 @@
+<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
+            }))];
+            this.initChart();
+          }
+        });
+    },
+
+    initChart() {
+      const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
+      let option = {
+        title: {
+          text: '',
+          left: 'center',
+          textStyle: {
+            color: '#DDDDDD', // 将原来的 #999 改为更亮的灰色
+            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: '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: 800px;
+}
+</style>