海域使用

src/views/cockpit/tdsy.vue

@@ -8,75 +8,42 @@
         </div>
 
         <div class="selectTab left_tab">
-          <el-select
-            v-model="left_value"
-            placeholder="请选择"
-            :popper-append-to-body="false"
-            @change="changeChartsLeft"
-          >
-            <el-option
-              v-for="item in left_options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
+          <el-select v-model="left_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
+            <el-option v-for="item in left_options" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
         <div class="selectTab right_tab">
-          <el-select
-            v-model="right_value"
-            placeholder="请选择"
-            :popper-append-to-body="false"
-            @change="changeChartsRight"
-          >
-            <el-option
-              v-for="item in right_options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
+          <el-select v-model="right_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsRight">
+            <el-option v-for="item in right_options" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
       </div>
-      <div
-        style="position: absolute"
-        v-show="
-          left_value == left_options[1].value &&
-          right_value == right_options[0].value
-        "
-      >
+      <div style="position: absolute" v-show="left_value == left_options[1].value &&
+        right_value == right_options[0].value
+        ">
         <div class="dial_watch_legend">
           <div class="item_tdgy">
             <div class="icon_tdgy"></div>
             <div class="text">
               计划已入市面积
-              <span>{{ store.state.cockpit_tdgy.jt_gy.jh }}</span
-              >公顷
+              <span>{{ store.state.cockpit_tdgy.jt_gy.jh }}</span>公顷
             </div>
           </div>
           <div class="item_tdgy">
             <div class="icon_tdgy"></div>
             <div class="text">
               已入市面积
-              <span>{{ store.state.cockpit_tdgy.jt_gy.wc }}</span
-              >公顷
+              <span>{{ store.state.cockpit_tdgy.jt_gy.wc }}</span>公顷
             </div>
           </div>
         </div>
         <div id="dial_watch"></div>
         <div class="content">
           <div class="infoLIst" v-if="jiDataInfo.length">
-            <div
-              class="infoItem"
-              v-for="(item, index) in jiDataInfo"
-              :key="index"
-            >
-              <div
-                :class="item.geom != '' ? 'itemIcon' : 'itemIcon2'"
-                @click="flyDetails(item)"
-              ></div>
+            <div class="infoItem" v-for="(item, index) in jiDataInfo" :key="index">
+              <div :class="item.geom != '' ? 'itemIcon' : 'itemIcon2'" @click="flyDetails(item)"></div>
               <div class="itemCon">
                 <p>{{ item["项目名称"] }}</p>
                 <p>
@@ -85,50 +52,28 @@
                   <span>{{ item["出让面积(公顷)"] }}公顷</span>
                 </p>
               </div>
-              <div
-                :class="
-                  item['用地类型'] == '已出让' ? 'itemStatus1' : 'itemStatus2'
-                "
-              ></div>
+              <div :class="item['用地类型'] == '已出让' ? 'itemStatus1' : 'itemStatus2'
+                "></div>
             </div>
           </div>
         </div>
       </div>
-      <div
-        v-show="
-          left_value == left_options[0].value &&
-          right_value == right_options[0].value
-        "
-      >
-        <DialWatch
-          class="tdgy_gyjd"
-          :dial_watch_info="dial_watch_info"
-          ref="tdgy_gyjd"
-          @draw_vector="switch_vector_tdgy_gy_jd"
-        />
-
-        <pie3d
-          id="tdgy_echart_gyjd"
-          unit="公顷"
-          :legendFlag="true"
-          ref="tdgy_echart_gyjd"
-        ></pie3d>
+      <div v-show="left_value == left_options[0].value &&
+        right_value == right_options[0].value
+        ">
+        <DialWatch class="tdgy_gyjd" :dial_watch_info="dial_watch_info" ref="tdgy_gyjd"
+          @draw_vector="switch_vector_tdgy_gy_jd" />
+
+        <pie3d id="tdgy_echart_gyjd" unit="公顷" :legendFlag="true" ref="tdgy_echart_gyjd"></pie3d>
       </div>
-      <div
-        v-show="
-          left_value == left_options[0].value &&
-          right_value == right_options[1].value
-        "
-      >
+      <div v-show="left_value == left_options[0].value &&
+        right_value == right_options[1].value
+        ">
         <div id="gy_jg_echart"></div>
       </div>
-      <div
-        style="position: absolute"
-        v-show="
-          left_value == left_options[1].value &&
-          right_value == right_options[1].value
-        "
-      >
+      <div style="position: absolute" v-show="left_value == left_options[1].value &&
+        right_value == right_options[1].value
+        ">
         <div class="legend_jtgy">
           <div class="legend_jtgy_left">
             商业商服
@@ -141,19 +86,9 @@
             完成率 <span class="legend_jtgy_unit">{{ accomplish_gyyd }}%</span>
           </div>
         </div>
-        <pie3d
-          id="tdgy_echart_sfyd"
-          unit="公顷"
-          :legendFlag="true"
-          ref="tdgy_echart_sfyd"
-        >
+        <pie3d id="tdgy_echart_sfyd" unit="公顷" :legendFlag="true" ref="tdgy_echart_sfyd">
         </pie3d>
-        <pie3d
-          id="tdgy_echart_gyyd"
-          unit="公顷"
-          :legendFlag="true"
-          ref="tdgy_echart_gyyd"
-        ></pie3d>
+        <pie3d id="tdgy_echart_gyyd" unit="公顷" :legendFlag="true" ref="tdgy_echart_gyyd"></pie3d>
       </div>
       <div v-show="left_value == left_options[2].value">
         <div class="conten_hy">
@@ -163,8 +98,7 @@
             </div>
             <div class="text_hy">
               <p class="p_hy">完成出让海域</p>
-              <span class="span_hy">{{ wccchy }}</span
-              >公顷
+              <span class="span_hy">{{ wccchy }}</span>公顷
             </div>
           </div>
           <div class="item">
@@ -173,8 +107,7 @@
             </div>
             <div class="text_hy">
               <p class="p_hy">完成出让项目</p>
-              <span class="span_hy">{{ wcccxm }}</span
-              >个
+              <span class="span_hy">{{ wcccxm }}</span>个
             </div>
           </div>
         </div>
@@ -291,9 +224,9 @@ export default {
   },
 
   //方法集合
-  beforeCreate() {}, //生命周期 - 创建之前
-  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
-  beforeMount() {}, //生命周期 - 挂载之前
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
   methods: {
     flyDetails(item) {
       this.drawWktPloygon(item.geom, "#ff0000", item.id);
@@ -521,217 +454,399 @@ export default {
         }
       });
     },
-    init_gy_jg_echart() {
+    // init_gy_jg_echart() {
+    //   var dom = document.getElementById("gy_jg_echart");
+    //   var myChart = window.echarts.init(dom);
+    //   // Mock数据
+    //   const mockData = {
+    //     xdata: store.state.cockpit_tdgy.gy_jg.xdata,
+    //     result: store.state.cockpit_tdgy.gy_jg.result,
+    //   };
+
+    //   // const mockData1 = {
+    //   //   xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
+    //   //   result: [
+    //   //     { name: '计划收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
+    //   //     { name: '完成收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
+    //   //   ]
+    //   // }
+
+    //   const color = [
+    //     [
+    //       { offset: 0, color: "rgba(183, 117, 12, 0.8)" },
+    //       { offset: 0.5, color: "rgba(183, 117, 12, 0.8)" },
+    //       { offset: 0.5, color: "rgba(249, 180, 71, 0.8)" },
+    //       { offset: 1, color: "rgba(249, 180, 71, 0.8)" },
+    //     ],
+
+    //     [
+    //       { offset: 0, color: "rgba(34, 129, 209, 0.8)" },
+    //       { offset: 0.5, color: "rgba(34, 129, 209, 0.8)" },
+    //       { offset: 0.5, color: "rgba(97, 173, 237, 0.8)" },
+    //       { offset: 1, color: "rgba(97, 173, 237, 0.8)" },
+    //     ],
+    //   ];
+    //   const color2 = ["rgba(34, 129, 209, 0.8)", "rgba(34, 129, 209, 0.8)"];
+
+    //   // tooltip
+    //   const tooltip = {
+    //     trigger: "axis",
+    //     textStyle: { fontSize: "100%" },
+    //     formatter: (params) => {
+    //       let rander = params
+    //         .map((item) => `<div>${item.seriesName}: ${item.value}</div>公顷`)
+    //         .join("");
+    //       return rander;
+    //     },
+    //   };
+
+    //   const legend = {
+    //     data: ["计划收储", "完成收储"], //图例名称
+
+    //     textStyle: { fontSize: 12, color: "#fff" },
+    //     itemWidth: 24,
+    //     itemHeight: 15,
+    //     itemGap: 15,
+    //     top: "0%",
+    //     right: "2%",
+    //     selectedMode: false,
+    //   };
+    //   const grid = { top: "20%", left: "12%", right: "2%", bottom: "10%" };
+    //   // xAxis
+    //   const xAxis = {
+    //     axisTick: { show: false },
+    //     axisLine: { lineStyle: { color: "#BCD3E5" } },
+    //     axisLabel: {
+    //       textStyle: { fontSize: 12, color: "#BCD3E5" },
+    //     },
+    //     axisLabel: {
+    //       interval: 0,
+    //       formatter: function (value) {
+    //         // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
+    //         if (value.length > 4) {
+    //           return `${value.slice(0, 4)}...`;
+    //         } else {
+    //           return value;
+    //         }
+    //       },
+    //     },
+    //     data: mockData.xdata,
+    //   };
+
+    //   // yAxis
+    //   const yAxis = [
+    //     {
+    //       min: 0,
+    //       name: "公顷",
+    //       type: "value",
+    //       axisLine: {
+    //         show: false,
+    //         lineStyle: {
+    //           color: "#BCD3E5",
+    //         },
+    //       },
+    //       splitLine: {
+    //         show: true,
+    //         lineStyle: {
+    //           type: "dashed",
+    //           color: "rgba(255,255,255,0.1)",
+    //         },
+    //       },
+    //       axisTick: {
+    //         show: false,
+    //       },
+    //       axisLabel: {
+    //         show: true,
+    //         fontSize: 12,
+    //       },
+    //       boundaryGap: ["20%", "20%"],
+    //     },
+    //   ];
+    //   // const yAxis = [{
+    //   //   axisTick: { show: false },
+    //   //   axisLine: { show: false },
+    //   //   splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+    //   //   axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
+    //   // }, {
+    //   //   show: false,
+    //   //   splitLine: { show: false },
+    //   //   axisLine: { show: false },
+    //   //   axisTick: { show: false },
+    //   // }]
+    //   const diamondData = mockData.result.reduce((pre, cur, index) => {
+    //     pre[index] = cur.data.map(
+    //       (el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0)
+    //     );
+    //     return pre;
+    //   }, []);
+
+    //   let series = mockData.result.reduce((p, c, i, array) => {
+    //     p.push(
+    //       {
+    //         z: i + 1,
+    //         stack: "总量",
+    //         type: "bar",
+    //         name: c.name,
+    //         barGap: 18,
+    //         barWidth: 18,
+    //         data: c.data,
+    //         itemStyle: {
+    //           color: {
+    //             type: "linear",
+    //             x: 0,
+    //             x2: 1,
+    //             y: 0,
+    //             y2: 0,
+    //             colorStops: color[i],
+    //           },
+    //         },
+    //       },
+    //       {
+    //         z: i + 10,
+    //         type: "pictorialBar",
+    //         symbolPosition: "end",
+    //         symbol: "diamond",
+    //         symbolOffset: [0, "-50%"],
+    //         symbolSize: [18, 12],
+    //         data: diamondData[i],
+    //         itemStyle: { color: color2[i] },
+    //         tooltip: { show: false },
+    //       }
+    //     );
+
+    //     // 是否最后一个了？
+    //     if (p.length === array.length * 2) {
+    //       p.push({
+    //         z: array.length * 2,
+    //         type: "pictorialBar",
+    //         symbolPosition: "start",
+    //         data: mockData.result[0].data,
+    //         symbol: "diamond",
+    //         symbolOffset: ["0%", "50%"],
+    //         symbolSize: [18, 10],
+    //         itemStyle: {
+    //           color: {
+    //             type: "linear",
+    //             x: 0,
+    //             x2: 1,
+    //             y: 0,
+    //             y2: 0,
+    //             colorStops: color[0],
+    //           },
+    //         },
+    //         tooltip: { show: false },
+    //       });
+    //       return p;
+    //     }
+
+    //     return p;
+    //   }, []);
+
+    //   const dataZoom = [
+    //     {
+    //       show: false,
+    //       type: "slider",
+    //       startValue: 0,
+    //       endValue: 7,
+    //       moveOnMouseWheel: true,
+    //       moveOnMouseMove: true,
+    //       zoomOnMouseWheel: false,
+    //     },
+    //   ];
+
+    //   let option = {
+    //     tooltip,
+    //     legend,
+    //     xAxis,
+    //     yAxis,
+    //     series,
+    //     grid,
+    //     dataZoom,
+    //     backgroundColor: "rgba(0, 0, 0, 0)",
+    //   };
+
+    //   myChart.setOption(option);
+    // },
+    init_gy_jg_echart(xdata, result) {
       var dom = document.getElementById("gy_jg_echart");
       var myChart = window.echarts.init(dom);
-      // Mock数据
-      const mockData = {
-        xdata: store.state.cockpit_tdgy.gy_jg.xdata,
-        result: store.state.cockpit_tdgy.gy_jg.result,
-      };
-
-      // const mockData1 = {
-      //   xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
-      //   result: [
-      //     { name: '计划收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
-      //     { name: '完成收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
-      //   ]
-      // }
 
-      const color = [
-        [
-          { offset: 0, color: "rgba(183, 117, 12, 0.8)" },
-          { offset: 0.5, color: "rgba(183, 117, 12, 0.8)" },
-          { offset: 0.5, color: "rgba(249, 180, 71, 0.8)" },
-          { offset: 1, color: "rgba(249, 180, 71, 0.8)" },
-        ],
-
-        [
-          { offset: 0, color: "rgba(34, 129, 209, 0.8)" },
-          { offset: 0.5, color: "rgba(34, 129, 209, 0.8)" },
-          { offset: 0.5, color: "rgba(97, 173, 237, 0.8)" },
-          { offset: 1, color: "rgba(97, 173, 237, 0.8)" },
-        ],
-      ];
-      const color2 = ["rgba(34, 129, 209, 0.8)", "rgba(34, 129, 209, 0.8)"];
-
-      // tooltip
-      const tooltip = {
-        trigger: "axis",
-        textStyle: { fontSize: "100%" },
-        formatter: (params) => {
-          let rander = params
-            .map((item) => `<div>${item.seriesName}: ${item.value}</div>公顷`)
-            .join("");
-          return rander;
+      var option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        tooltip: {
+          backgroundColor: 'RGBA(20, 106, 178, 0.4)',
+          trigger: "axis",
+          textStyle: { fontSize: '100%' },
+          formatter: params => {
+            console.log('params: ', params);
+            let rander = params.map(item =>
+              `
+                        
+                    <div style='
+                        border:none;
+                        border-radius:3px;
+                        color:#FFF;
+                        font-size:12px
+                        '>
+                            ${item.seriesName}: ${item.value}
+                    </div>`).join('')
+            return rander
+          }
         },
-      };
-
-      const legend = {
-        data: ["计划收储", "完成收储"], //图例名称
-
-        textStyle: { fontSize: 12, color: "#fff" },
-        itemWidth: 24,
-        itemHeight: 15,
-        itemGap: 15,
-        top: "0%",
-        right: "2%",
-        selectedMode: false,
-      };
-      const grid = { top: "20%", left: "12%", right: "2%", bottom: "10%" };
-      // xAxis
-      const xAxis = {
-        axisTick: { show: false },
-        axisLine: { lineStyle: { color: "#BCD3E5" } },
-        axisLabel: {
-          textStyle: { fontSize: 12, color: "#BCD3E5" },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '15%',
+          top: '20%',
+          containLabel: true
         },
-        axisLabel: {
-          interval: 0,
-          formatter: function (value) {
-            // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
-            if (value.length > 4) {
-              return `${value.slice(0, 4)}...`;
-            } else {
-              return value;
-            }
+        legend: {
+          data: ['完成收储', '计划收储'],
+          left: '7%',
+          top: '5%',
+          textStyle: {
+            color: "#666666"
           },
+          itemWidth: 15,
+          itemHeight: 10,
+          itemGap: 25
         },
-        data: mockData.xdata,
-      };
-
-      // yAxis
-      const yAxis = [
-        {
-          min: 0,
-          name: "公顷",
-          type: "value",
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: "#BCD3E5",
+        xAxis: {
+          axisTick: { show: false },
+          axisLine: { lineStyle: { color: "#BCD3E5" } },
+          axisLabel: {
+            textStyle: { fontSize: 12, color: "#BCD3E5" },
+          },
+          axisLabel: {
+            interval: 0,
+            formatter: function (value) {
+              // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
+              if (value.length > 4) {
+                return `${value.slice(0, 4)}...`;
+              } else {
+                return value;
+              }
             },
           },
+          data: xdata,
+        },
+        yAxis: [{
+          type: 'value',
           splitLine: {
             show: true,
             lineStyle: {
-              type: "dashed",
-              color: "rgba(255,255,255,0.1)",
+              color: 'rgba(163, 163, 163, 0.5)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            color: '#A0A4AA'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(65, 97, 128, 0.5)',
             },
           },
-          axisTick: {
+        },
+        {
+          type: "value",
+          name: "",
+          nameTextStyle: {
+            color: "#666666"
+          },
+          position: "right",
+          axisLine: {
+            lineStyle: {
+              color: '#cdd5e2'
+            }
+          },
+          splitLine: {
             show: false,
           },
           axisLabel: {
-            show: true,
-            fontSize: 12,
+            show: false,
+            formatter: "{value} %", //右侧Y轴文字显示
+            textStyle: {
+              color: "#666666"
+            }
+          }
+        }
+        ],
+        dataZoom: [{
+          "show": true,
+          "height": 12,
+          "xAxisIndex": [
+            0
+          ],
+          top: '92%',
+          "start": 0,
+          "end": 8,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '110%',
+          handleStyle: {
+            color: "#d3dee5",
+
           },
-          boundaryGap: ["20%", "20%"],
-        },
-      ];
-      // const yAxis = [{
-      //   axisTick: { show: false },
-      //   axisLine: { show: false },
-      //   splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
-      //   axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
-      // }, {
-      //   show: false,
-      //   splitLine: { show: false },
-      //   axisLine: { show: false },
-      //   axisTick: { show: false },
-      // }]
-      const diamondData = mockData.result.reduce((pre, cur, index) => {
-        pre[index] = cur.data.map(
-          (el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0)
-        );
-        return pre;
-      }, []);
-
-      let series = mockData.result.reduce((p, c, i, array) => {
-        p.push(
-          {
-            z: i + 1,
-            stack: "总量",
-            type: "bar",
-            name: c.name,
-            barGap: 18,
-            barWidth: 18,
-            data: c.data,
-            itemStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: color[i],
-              },
+          textStyle: {
+            color: "#333"
+          },
+          borderColor: "#90979c"
+        }, {
+          "type": "inside",
+          "show": true,
+          "height": 15,
+          "start": 1,
+          "end": 35
+        }],
+        series: [{
+          name: '完成收储',
+          type: 'bar',
+          barWidth: '12px',
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#12BDDF'
+              }, {
+                offset: 1,
+                color: 'rgba(24, 253, 255, 0)'
+              }]),
             },
           },
-          {
-            z: i + 10,
-            type: "pictorialBar",
-            symbolPosition: "end",
-            symbol: "diamond",
-            symbolOffset: [0, "-50%"],
-            symbolSize: [18, 12],
-            data: diamondData[i],
-            itemStyle: { color: color2[i] },
-            tooltip: { show: false },
-          }
-        );
-
-        // 是否最后一个了？
-        if (p.length === array.length * 2) {
-          p.push({
-            z: array.length * 2,
-            type: "pictorialBar",
-            symbolPosition: "start",
-            data: mockData.result[0].data,
-            symbol: "diamond",
-            symbolOffset: ["0%", "50%"],
-            symbolSize: [18, 10],
-            itemStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                x2: 1,
-                y: 0,
-                y2: 0,
-                colorStops: color[0],
+          data: result[0].data
+        }
+          , {
+          name: "计划收储",
+          type: "line",
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          smooth: true, //平滑曲线显示
+
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 0, //标记的大小
+          itemStyle: {
+            normal: {
+              color: '#0AF37A',
+              borderColor: '#0AF37A',  //圆点透明 边框
+              borderWidth: 0,
+              lineStyle: {
+                color: "#0AF37A"
+              },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#46C118'
+                }, {
+                  offset: 1,
+                  color: 'rgba(12, 162, 13, 0)'
+                }])
               },
             },
-            tooltip: { show: false },
-          });
-          return p;
+          },
+          data: result[1].data
         }
-
-        return p;
-      }, []);
-
-      const dataZoom = [
-        {
-          show: false,
-          type: "slider",
-          startValue: 0,
-          endValue: 7,
-          moveOnMouseWheel: true,
-          moveOnMouseMove: true,
-          zoomOnMouseWheel: false,
-        },
-      ];
-
-      let option = {
-        tooltip,
-        legend,
-        xAxis,
-        yAxis,
-        series,
-        grid,
-        dataZoom,
-        backgroundColor: "rgba(0, 0, 0, 0)",
+        ]
       };
-
       myChart.setOption(option);
     },
     changeChartsLeft() {
@@ -745,7 +860,7 @@ export default {
         ];
       }
     },
-    changeChartsRight() {},
+    changeChartsRight() { },
     async getInfo(params) {
       let res = await QueryList({
         jscType: "jsc_tdgy_jt_xx",
@@ -970,16 +1085,16 @@ export default {
           data: [],
         },
       ];
-
+      console.log(result, "dasdas");
       data.data.forEach((res) => {
         xdata.push(res.tdyt);
         result[0].data.push(res.jh_crmj);
         result[1].data.push(res.sj_crmj);
       });
 
-      store.state.cockpit_tdgy.gy_jg.xdata = xdata;
-      store.state.cockpit_tdgy.gy_jg.result = result;
-      that.init_gy_jg_echart();
+      // store.state.cockpit_tdgy.gy_jg.xdata = xdata;
+      // store.state.cockpit_tdgy.gy_jg.result = result;
+      that.init_gy_jg_echart(xdata, result);
     },
     async init_tdgy_jt_jd(params) {
       const that = this;
@@ -1088,14 +1203,14 @@ export default {
       // tdsy.init(viewer);
     });
   },
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
   beforeDestroy() {
     // 清楚定时器
   }, //生命周期 - 销毁之前
-  destroy() {}, //生命周期 - 销毁完成
-  activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+  destroy() { }, //生命周期 - 销毁完成
+  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
 
@@ -1179,17 +1294,12 @@ export default {
 
       /deep/ .el-select-dropdown__list {
         color: #bcd3e5 !important;
-        background: linear-gradient(
-          180deg,
-          rgba(3, 115, 177, 0) 11%,
-          rgba(3, 115, 177, 0.48) 100%
-        );
-        border-image: linear-gradient(
-            360deg,
+        background: linear-gradient(180deg,
+            rgba(3, 115, 177, 0) 11%,
+            rgba(3, 115, 177, 0.48) 100%);
+        border-image: linear-gradient(360deg,
             rgba(75, 185, 250, 0.2),
-            rgba(75, 185, 250, 0.05)
-          )
-          1 1 !important;
+            rgba(75, 185, 250, 0.05)) 1 1 !important;
         border: none;
       }
 
@@ -1275,6 +1385,7 @@ export default {
     }
 
     .itemCon {
+
       // width: 13.5rem;
       // height: 1.55rem;
       // background-color: #faa012;
@@ -1338,11 +1449,9 @@ export default {
     .icon_tdgy {
       width: 10px;
       height: 10px;
-      background: linear-gradient(
-        180deg,
-        rgba(37, 177, 255, 0.6) 0%,
-        rgba(0, 48, 83, 0.48) 100%
-      );
+      background: linear-gradient(180deg,
+          rgba(37, 177, 255, 0.6) 0%,
+          rgba(0, 48, 83, 0.48) 100%);
       box-shadow: inset 0px 0 5px 0px #002b6c;
       border-radius: 5px 5px 5px 5px;
       border: 1px solid rgba(100, 218, 255, 0.5);
@@ -1402,11 +1511,10 @@ export default {
 }
 
 #gy_jg_echart {
-  //z-index: 1;
-  left: -2rem;
+  left: 0rem;
   top: 0.1rem;
-  width: 30rem;
-  height: 13rem;
+  width: 26rem;
+  height: 14rem;
 }
 
 .legend_jtgy {
@@ -1418,8 +1526,7 @@ export default {
   font-size: 14px;
   color: #ecf6ff;
 
-  .legend_jtgy_left {
-  }
+  .legend_jtgy_left {}
 
   .legend_jtgy_right {
     margin-top: 4rem;