排版

src/views/home/components/pieChart.vue

@@ -135,7 +135,7 @@ export default {
 
                 },
                 alignTo: 'edge',  //aa 居左的
-                formatter: "{b}:{c}\n",
+                formatter: "{b}:（{c}）\n",
               },
               // emphasis: {
               //   show: true,

src/views/home/components/triangleChart copy.vue

@@ -0,0 +1,109 @@
+<template>
+  <div ref="triangleChart" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: ["frtAnalogData"],
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      // console.log(1111111111);
+      // console.log(this.frtAnalogData);
+      // console.log(1111111111);
+      this.initChart();
+      // console.log("this.arr");
+      // console.log(this.arr);
+      // console.log("this.arr");
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.triangleChart);
+      var option;
+
+      var arr = [
+        { name: "重载运行", reaVal: (this.frtAnalogData.heavyLoad*100).toFixed(2)+'%' },
+        { name: "轻载运行", reaVal: (this.frtAnalogData.easyLoad*100).toFixed(2)+'%' },
+        { name: "正常运行", reaVal: (this.frtAnalogData.norMalLoad*100).toFixed(2)+'%' },
+      ];
+
+      arr.sort((a, b) => a.reaVal - b.reaVal);
+
+      arr[0].value = 10;
+      arr[1].value = 20;
+      arr[2].value = 30;
+
+      option = {
+        calculable: true,
+        color: ["#FF5656", "#FFAF38", "#00F4FD"],
+        series: [
+          {
+            name: "漏斗图",
+            type: "funnel",
+            left: "10%",
+            right: "30%",
+            width: "50%",
+            top: "0%",
+            bottom: "0%",
+            minSize: "0%",
+            maxSize: "70%",
+            sort: "ascending",
+            gap: 10,
+            label: {
+              show: true,
+              // formatter: " {b|{b}}    {a|{c}} ",
+              formatter: function (params) {
+                let a = params.data.name + "   ";
+                let b = params.data.reaVal;
+                return "{a|" + a + "}" + "{b|" + b + "}";
+              },
+              rich: {
+                a: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+                b: {
+                  color: "rgba(101,166,196,1)",
+                  fontSize: 20,
+                  marginLeft: "10",
+                  fontFamily: "impact",
+                },
+              },
+            },
+            labelLine: {
+              length: 60,
+              lineStyle: {
+                width: 1,
+                type: "solid",
+              },
+            },
+            itemStyle: {
+              //去掉默认白色边框线
+              borderWidth: 0,
+              borderColor: "#fff",
+            },
+            data: arr,
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

src/views/home/components/triangleChart.vue

@@ -32,70 +32,134 @@ export default {
       var chart = echarts.init(this.$refs.triangleChart);
       var option;
 
-      var arr = [
-        { name: "重载运行", reaVal: (this.frtAnalogData.heavyLoad*100).toFixed(2)+'%' },
-        { name: "轻载运行", reaVal: (this.frtAnalogData.easyLoad*100).toFixed(2)+'%' },
-        { name: "正常运行", reaVal: (this.frtAnalogData.norMalLoad*100).toFixed(2)+'%' },
+      var data = [
+        { name: "重载运行", value: (this.frtAnalogData.heavyLoad*100).toFixed(2) },
+        { name: "轻载运行", value: (this.frtAnalogData.easyLoad*100).toFixed(2) },
+        { name: "正常运行", value: (this.frtAnalogData.norMalLoad*100).toFixed(2) },
       ];
+console.log('data')
+      console.log(data)
 
-      arr.sort((a, b) => a.reaVal - b.reaVal);
+      // var data = [
+      //   {
+      //     name: "正常运行",
+      //     value: 54, //aa百分比
+      //   },
+      //   {
+      //     name: "轻载运行",
+      //     value: 44,
+      //   },
+      //   {
+      //     name: "重载运行",
+      //     value: 35,
+      //   },
+      // ];
 
-      arr[0].value = 10;
-      arr[1].value = 20;
-      arr[2].value = 30;
+      var titleArr = [];
+      var seriesArr = [];
+      var colors = [
+        ["#31E9FF", "rgba(49,233,255,.1)"],
+        ["#2FA4EE", "rgba(47,164,238,.1)"],
+        ["#F66167", "rgba(246,97,103,.1)"],
+      ];
+      data.forEach(function (item, index) {
+        titleArr.push({
+          text: item.name,
+          left: index * 33 + 16 + "%",
+          top: "80%", //aa 下边标题的上下位置
+          textAlign: "center",
+          textStyle: {
+            fontWeight: "normal",
+            fontSize: "0.2125rem",
+            color: "#fff",
+            textAlign: "center",
+          },
+        });
+        seriesArr.push({
+          name: item.name,
+          type: "pie",
+          // clockWise: false,  //顺时针方向
+          radius: [40, 48], // aa 圈大小
+          itemStyle: {
+            normal: {
+              color: {
+                // 完成的圆环的颜色
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: colors[index][0], // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: colors[index][1], // 100% 处的颜色
+                  },
+                ],
+              },
+              shadowColor: colors[index][0],
+              shadowBlur: 0,
+              label: {   //aa这个导致白色圈出不来？？？？
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+            },
+          },
+          hoverAnimation: false,
+          center: [index * 33 + 17 + "%", "40%"], //aa饼图的中心位置
 
-      option = {
-        calculable: true,
-        color: ["#FF5656", "#FFAF38", "#00F4FD"],
-        series: [
-          {
-            name: "漏斗图",
-            type: "funnel",
-            left: "10%",
-            right: "30%",
-            width: "50%",
-            top: "0%",
-            bottom: "0%",
-            minSize: "0%",
-            maxSize: "70%",
-            sort: "ascending",
-            gap: 10,
-            label: {
-              show: true,
-              // formatter: " {b|{b}}    {a|{c}} ",
-              formatter: function (params) {
-                let a = params.data.name + "   ";
-                let b = params.data.reaVal;
-                return "{a|" + a + "}" + "{b|" + b + "}";
+          data: [
+            {
+              //画中间的图标
+              name: "",
+              value: 0 ,
+              label: {
+                position: "inside",
+                backgroundColor: colors[index][0],
+                borderRadius:50,
+                width: 15,
+                height: 15,
+                show:true,
               },
-              rich: {
-                a: {
-                  color: "#fff",
-                  fontSize: 12,
-                },
-                b: {
-                  color: "rgba(101,166,196,1)",
-                  fontSize: 20,
-                  marginLeft: "10",
-                  fontFamily: "impact",
+            },
+
+            {
+              value: item.value,
+              label: {
+                normal: {
+                  formatter: function (params) {
+                    return params.value + "%";
+                  },
+                  position: "center",
+                  show: true,
+                  textStyle: {
+                    fontSize: "20",
+                    fontWeight: "bold",
+                    color: colors[index][0],
+                  },
                 },
               },
             },
-            labelLine: {
-              length: 60,
-              lineStyle: {
-                width: 1,
-                type: "solid",
+            {
+              value: 100 - item.value,
+              name: "invisible",
+              itemStyle: {
+                normal: {
+                  color: colors[index][1],
+                },
+                emphasis: {
+                  color: colors[index][1],
+                },
               },
             },
-            itemStyle: {
-              //去掉默认白色边框线
-              borderWidth: 0,
-              borderColor: "#fff",
-            },
-            data: arr,
-          },
-        ],
+          ],
+        });
+      });
+
+      option = {
+        // backgroundColor: "#fff",
+        title: titleArr,
+        series: seriesArr,
       };
 
       chart.setOption(option);

src/views/index.vue

@@ -301,7 +301,7 @@ export default {
     }
   }
   .title {
-    font-size: .375rem;
+    font-size: .35rem;
     color: #fff;
     font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
     font-weight: 600;

src/views/site/components/Overview/histTrendChart.vue

@@ -100,7 +100,7 @@ export default {
       // console.log(JSON.stringify(data),JSON.stringify(dataAll));
 
       option = {
-        color: ["#FEB70D", "#50F335", "#0DC8FE"],
+        color: ["#F66167", "#35B8FC", "#32E6FC"],
         tooltip: {
           trigger: "axis",
         },

src/views/site/components/Overview/powerTop.vue

@@ -4,7 +4,7 @@
       <li>
         <div>
           <p>月度用电量</p>
-          <p>
+          <p style="color:#31e9ff">
             <span class="num static">{{ data.monthCount }}</span
             >kWh
           </p>
@@ -20,7 +20,7 @@
       <li>
         <div>
           <p>年度用电量</p>
-          <p>
+          <p style="color:#37a5eb">
             <span class="num static">{{ data.yearCount }}</span
             >kWh
           </p>