更改echar

screen-demo/src/views/templateInstance.vue

@@ -146,7 +146,7 @@
     </div>
 
 
-    <div class="table-containers">
+    <div class="table-container">
       <div class="schedule ">
         <div style="display: inline-block; background-color: rgba(215,202,135,0.34); padding: 20px; border-radius: 20px;">
           <div class="span-left">告警数量</div>
@@ -155,14 +155,11 @@
           <div class="span-right">完成率</div>
         </div>
       </div>
-      <div id="chart" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 400px; height: 100px;">
+      <div id="chart" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 300px; height: 100px;">
       </div>
     </div>
-    <div class="echarts-containers">
 
-      <div id="echarts-container" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 300px; height: 100px;"></div>
-    </div>
-    <div class="table-container">
+    <div class="table-containers">
       <div class="schedule" style="width: 300px; margin: auto;">
         <div class="schedule">
           <div style="display: inline-block; background-color: rgba(232,219,129,0.26); padding: 20px; border-radius: 20px;">
@@ -173,7 +170,7 @@
           </div>
         </div>
       </div>
-      <div id="twochart" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 300px; height: 100px;"></div>
+      <div id="twochart" style="position: fixed; bottom: 0; left: 0; background-color: rgba(97, 132, 219, 0.4); width: 400px; height: 100px;"></div>
     </div>
     <!-- echarts 图表容器 -->
 
@@ -276,7 +273,7 @@ export default {
     };
   },
   mounted() {
-    this.initEcharts();
+
     this.oneEchart();
     this.twochart();
     this.echarts1q()
@@ -1443,216 +1440,7 @@ export default {
       };
       _doc.setOption(option)
     },
-    initEcharts() {
-      let param = {"queryStartTime":"2023-08-04 00:00:00","queryEndTime":"2023-08-09 23:59:59","warningSourceList":["1","2"],"warningTypeList":["1212102"],"deviceCodeIndustryList":["11010800831327000008","10210010010000"],"orderStatusList":[]}
-      this.$requestSDK(
-          "/jilin-devloper/jilin/getEvenAreaCompletion",
-          param,
-          {},
-          "post"
-      )
-      let _doc = echarts.init(document.getElementById('echarts-container'));
-      var getName = [
-        "四川省",
-        "长春市",
-        "北京市",
-        "湖南市",
-        "辽宁省",
-        "湖北省",
-
-      ];
-      var getValue = [219, 241, 174, 44, 435, 617];
-      var max = Math.max.apply(null, getValue);
-      var getMax = [];
-      for (let i = 0; i < getName.length; i++) {
-        getMax.push(max);
-      }
-      let option = {
-        backgroundColor: "#003366",
-        grid: {
-          left: "8%", // Adjusted to 2%
-          right: "2%", // Adjusted to 1%
-          bottom: "1%", // Adjusted to 1%
-          top: "1%", // Adjusted to 1%
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "none",
-          },
-          formatter: function (params) {
-            return params[0].name + " : " + params[0].value;
-          },
-        },
-        xAxis: {
-          show: false,
-          type: "value",
-        },
-        yAxis: [
-          {
-            type: "category",
-            inverse: true,
-            offset: 100,
 
-            axisLabel: {
-              show: true,
-              align: "left",
-              // textStyle: {
-              color: "#66cc00",
-              // },
-              formatter: function (value, index) {
-                var num = "";
-                var str = "";
-                let no = "NO.";
-                num = index + 1;
-                if (index === 0) {
-                  str = "{no1|" + no + "} {num1|" + num + "} {title1|" + value + "}";
-                } else if (index === 1) {
-                  str = "{no2|" + no + "} {num2|" + num + "} {title2|" + value + "}";
-                } else if (index === 2) {
-                  str = "{no3|" + no + "} {num3|" + num + "} {title3|" + value + "}";
-                } else {
-                  str = "{no|" + no + "} {num|" + num + "} {title|" + value + "}";
-                }
-                return str;
-              },
-              rich: {
-                no: {
-                  color: "#ffcccc",
-                  fontSize: 14,
-                },
-                no1: {
-                  color: "#ff4d4d",
-                  fontSize: 14,
-                },
-                no2: {
-                  color: "#4dd2ff",
-                  fontSize: 14,
-                },
-                no3: {
-                  color: "#ffff00",
-                  fontSize: 14,
-                },
-                num: {
-                  color: "#fff",
-                  backgroundColor: "#ffcccc",
-                  width: 20,
-                  height: 20,
-                  fontSize: 14,
-                  align: "center",
-                  borderRadius: 100,
-                },
-                num1: {
-                  color: "#fff",
-                  backgroundColor: "#ff4d4d",
-                  width: 20,
-                  height: 20,
-                  fontSize: 14,
-                  align: "center",
-                  borderRadius: 100,
-                },
-                num2: {
-                  color: "#fff",
-                  backgroundColor: "#4dd2ff",
-                  width: 20,
-                  height: 20,
-                  fontSize: 14,
-                  align: "center",
-                  borderRadius: 100,
-                },
-                num3: {
-                  color: "#fff",
-                  backgroundColor: "#ffff00",
-                  width: 20,
-                  height: 20,
-                  fontSize: 14,
-                  align: "center",
-                  borderRadius: 100,
-                },
-                title: {
-                  color: "#ffcccc",
-                },
-                title1: {
-                  color: "#ff4d4d",
-                },
-                title2: {
-                  color: "#4dd2ff",
-                },
-                title3: {
-                  color: "#ffff00",
-                },
-              },
-            },
-            splitLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
-            data: getName,
-          },
-          {
-            type: "category",
-            inverse: true,
-            offset: -25,
-            axisTick: "none",
-            axisLine: "none",
-            show: true,
-            axisLabel: {
-              // textStyle: {
-              color: "#ffffff",
-              fontSize: "12",
-              // },
-            },
-            data: getValue,
-          },
-        ],
-        series: [
-          {
-            name: "告警数量",
-            type: "bar",
-            zlevel: 1,
-            itemStyle: {
-              // normal: {
-              //   barBorderRadius: 5, // Adjusted to 5
-              borderRadius: 5, // Adjusted to 5
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                {
-                  offset: 0,
-                  color: "rgb(128,204,255,1)",
-                },
-                {
-                  offset: 1,
-                  color: "rgb(46,200,207,1)",
-                },
-              ]),
-              // },
-            },
-            barWidth: 5, // Adjusted to 5
-            data: getValue,
-          },
-          {
-            name: "完结率",
-            type: "bar",
-            barWidth: 5, // Adjusted to 5
-            barGap: "-50%", // Adjusted to "-50%"
-            data: getMax,
-            itemStyle: {
-              // normal: {
-              color: "rgba(24,31,68,1)",
-              // barBorderRadius: 5, // Adjusted to 5
-              borderRadius: 5, // Adjusted to 5
-              // },
-            },
-          },
-        ],
-      };
-      _doc.setOption(option)
-    },
     /**
      * 3D地图打点
      * @param mapDom 地图实例