zyh

src/views/Zhou/FHGL.vue

@@ -162,7 +162,18 @@ export default {
         xAxis: {
           type: "category",
           // boundaryGap: false,
-          data: ["","02:30","", "03:30","", "04:30","", "05:30", "","06:30"],
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
           axisLine: {
             show: true,
           },
@@ -226,7 +237,7 @@ export default {
             type: "line",
             symbol: "circle",
             symbolSize: 20,
-            data: [450, 120, 450, 428, 540, 100, 520,325,370,90],
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
             lineStyle: {
               width: 5,
               color: "#3FFF5A",
@@ -241,7 +252,7 @@ export default {
             // stack: 'Total',
             symbol: "circle",
             symbolSize: 20,
-            data: [180, 420, 90, 470, 500, 90, 280,367,287,360],
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
             lineStyle: {
               width: 5,
               color: "#43FFF4",
@@ -303,6 +314,7 @@ export default {
         },
       ];
       const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
       const gap = (1 * sum) / 100;
       const pieData1 = [];
       const gapData = {
@@ -322,16 +334,25 @@ export default {
       let option = {
         title: {
           show: true,
-          text: "1694kW",
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
           subtext: "总负荷",
           x: "39.5%",
           y: "43%",
           itemGap: 6,
           textStyle: {
-            color: "#fff",
+            color: "#DAFFF8",
-            fontSize: 30,
+            fontSize: 50,
             fontWeight: "400",
             lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
           },
           subtextStyle: {
             color: "#fff",
@@ -355,23 +376,53 @@ export default {
               formatter: function (params) {
                 console.log(params.dataIndex);
                 if (params.name) {
-                  // const col = color[params.dataIndex];
+                  console.log(params.name);
-                  // 样式可以根据需要进行调整
+                  if (params.name == "一级") {
-                  // return '<div style="color: ' + color + '; font-weight: bold; font-size: 14px;">' + params.value + '</div>';
+                    return (
-                  return (
+                      "{name|" +
-                    "{name|" +
+                      params.name +
-                    params.name +
+                      "}" +
-                    "}" +
+                      `\n` +
-                    `\n` +
+                      "\n" +
-                    "\n" +
+                      "{myStyle1|" +
-                    "{myStyle|" +
+                      params.value +
-                    params.value +
+                      "}" +
-                    "}" +
+                      "\t" +
-                    "\t" +
+                      "{name|" +
-                    "{name|" +
+                      "kw" +
-                    "kw" +
+                      "}"
-                    "}"
+                    );
-                  );
+                  }else if(params.name=="二级"){
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }else{
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
                 }
               },
               rich: {
@@ -379,11 +430,21 @@ export default {
                   color: "#fff",
                   fontSize: 28,
                 },
-                myStyle: {
+                myStyle1: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
                   color: color[0],
                   fontWeight: "bold",
                   fontSize: 40,
                 },
+                myStyle3: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
               },
             },
             labelLine: {
@@ -410,7 +471,7 @@ export default {
               // 这里需要进行修改
               // formatter: function (params) {
               //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
-              // } 
+              // }
             },
             labelLine: {
               //label线的长度
@@ -729,7 +790,8 @@ export default {
 .box {
   width: 100%;
   height: 100%;
-   background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
   //   background-color: transparent;
   padding-top: 400px;
   box-sizing: border-box;

src/views/Zhou/NXGLNH.vue

@@ -385,7 +385,7 @@ export default {
                         },
                         labelLine: {
                             length: 30,
-                            length2: 100,
+                            length2: 80,
                             show: true,
                             color: '#00ffff'
                         }
@@ -457,7 +457,16 @@ export default {
                         console.log(item);
                         percent = ((item.value / total) * 100).toFixed(2);
                         if (name !== '') {
-                            return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
                             // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
                         } else {
                             return '';
@@ -473,9 +482,21 @@ export default {
                                 fontSize: 24,
                                 color: "#fff",
                             },
-                            num: {
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
                                 fontSize: 28,
                                 color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
                             }
                         },
                     },

src/views/Zhou/TZCGL.vue

@@ -269,7 +269,11 @@ export default {
             "15:20",
           ],
           axisTick: {
-            interval: false, // 设置刻度点连续显示
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+          axisLine:{
+            show:false,
           },
           axisLabel: {
             show: true,
@@ -333,7 +337,7 @@ export default {
               },
             },
             markPoint: {
-              data: [{ type: "max", name: "Max" }],
+              // data: [{ type: "max", name: "Max" }],
               label: {
                 textStyle: {
                   color: "#fff",
@@ -641,10 +645,6 @@ export default {
         "#7EFAB7",
         "#55A9CE",
         "#53DCF1",
-        "#ffe000",
-        "#ffa800",
-        "#ff5b00",
-        "#ff3000",
       ];
       trafficWay.forEach((item, index) => {
         data.push(
@@ -662,7 +662,7 @@ export default {
             },
           },
           {
-            value: 40,
+            value: 15,
             name: "",
             itemStyle: {
               normal: {
@@ -691,8 +691,9 @@ export default {
             }
             percent = ((params.value / total) * 100).toFixed(0);
             if (params.name !== "") {
+              if(params.name=="原煤"){
               return (
-                "{colors|" +
+                "{colors1|" +
                 percent +
                 "%" +
                 "}" +
@@ -702,12 +703,47 @@ export default {
                 params.name +
                 "}"
               );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
             } else {
               return "";
             }
           },
           rich: {
-            colors: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
               color: color[1],
               fontSize: 40,
               align: "left",
@@ -799,10 +835,23 @@ export default {
           align: "left",
           formatter: (name) => {
             const item = trafficWay.filter((item) => item.name === name)[0];
-            return (
+            if(name=="原煤"){
+              return (
               `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
-              `{num|${item.value}}{num|t}`
+              `{num1|${item.value}t}`
             );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
             // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
           },
           textStyle: {
@@ -812,7 +861,15 @@ export default {
                 fontSize: 24,
                 color: "#fff",
               },
-              num: {
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
                 fontSize: 28,
                 color: color[1],
               },
@@ -901,7 +958,7 @@ export default {
       let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
       let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
       //拿到最大值
-      const maxValue = Math.max(...seriesData);
+      // const maxValue = Math.max(...seriesData);
 
       let colorArr = [
         ["#0A67FF"],

src/views/Zhou/TZCGLSL.vue

@@ -582,7 +582,7 @@ export default {
                 value: 171.49
             }];
             var data = [];
-            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
             for (var i = 0; i < trafficWay.length; i++) {
                 data.push({
                     value: trafficWay[i].value,
@@ -634,13 +634,29 @@ export default {
                                 }
                                 percent = ((params.value / total) * 100).toFixed(0);
                                 if (params.name !== '') {
-                                    return "{colors|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                    if(params.name=="1号生产线"){
-                                } else {
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
                                     return '';
                                 }
                             },
                             rich: {
-                                colors: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
                                     color: color[1],
                                     fontSize: 40,
                                     align: "left",
@@ -712,29 +728,37 @@ export default {
                             name: '3号生产线',
                             value: "13.68"
                         }],
-        //                 selected: {
-        //     '1号生产线': {x: 760, y: 10},
-        //     '2号生产线': {x: 760, y: 70},
-        //     '3号生产线': {x: 760, y: 110},
-        // },
                     left: 760,
                     bottom: 120,
                     align: 'left',
                     formatter: ((name) => {
                         const item = trafficWay.filter((item) => item.name === name)[0];
-                        return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num|${item.value}}\t\t{name|tCO2}`;
+                        if(name=="1号生产线"){
-                        // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
                     }),
                     textStyle: {
-                        color: "#",
+                        color: "#fff",
                         rich: {
                             name: {
                                 fontSize: 28,
                                 // color: "#fff",
                             },
-                            num: {
+                            num1: {
                                 fontSize: 32,
-                                // color: color[1],
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
                             }
                         },
                     },