虚拟电厂图表页

src/views/xndc/index.vue

@@ -19,6 +19,7 @@
           <div class="barTitle">
             风电发电功率
           </div>
+          <RightTop/>
         </div>
       </div>
       <div class="main-card">
@@ -26,6 +27,7 @@
           <div class="barTitle">
             负荷用电功率
           </div>
+          <LeftMiddle/>
         </div>
         <div class="barBox">
           <div class="barTitle">
@@ -36,6 +38,7 @@
           <div class="barTitle">
             光伏发电功率
           </div>
+          <RightMiddle/>
         </div>
       </div>
       <div class="main-card">
@@ -43,6 +46,7 @@
           <div class="barTitle">
             储能发电/用电功率
           </div>
+          <LeftBottom/>
         </div>
         <div class="barBox">
           <div class="barTitle">
@@ -53,6 +57,7 @@
           <div class="barTitle">
             火电发电功率
           </div>
+          <RightBottom/>
         </div>
       </div>
     </div>
@@ -60,7 +65,20 @@
 </template>
 
 <script>
+import LeftMiddle from "./modules/left-middle"
+import LeftBottom from "./modules/left-bottom"
+import RightTop from "./modules/right-top"
+import RightMiddle from "./modules/right-middle"
+import RightBottom from "./modules/right-bottom"
+
 export default {
+  components: {
+    LeftMiddle,
+    LeftBottom,
+    RightTop,
+    RightMiddle,
+    RightBottom
+  }
 }
 </script>
 

src/views/xndc/modules/left-bottom.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="left_bottom">
+    <Echart
+        :options="options"
+        id="leftBottomChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1180,
+          1190,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "sfData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "实发值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#2ff042",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#2ff042"
+              },
+              formatter: (params) => {
+                if (newData.sfData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.sfData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(9,243,13,0.74)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.sfData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          // {
+          //   name: "预测值",
+          //   type: "line",
+          //   smooth: true,
+          //   // showAllSymbol: true,
+          //   // symbol: "emptyCircle",
+          //   symbolSize: 0,
+          //   lineStyle: {
+          //     color: "#f0692f",
+          //     type: 'dashed'
+          //   },
+          //   data: newData.ycData,
+          // },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left_bottom {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xndc/modules/left-middle.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="left_middle">
+    <Echart
+        :options="options"
+        id="leftMiddleChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1180,
+          1190,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "sfData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "实测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#2ff042",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#2ff042"
+              },
+              formatter: (params) => {
+                if (newData.sfData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.sfData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(9,243,13,0.74)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.sfData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "预测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            lineStyle: {
+              color: "#f0692f",
+              type: 'dashed'
+            },
+            data: newData.ycData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left_middle {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xndc/modules/right-bottom.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="right_bottom">
+    <Echart
+        :options="options"
+        id="rightMiddleChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1180,
+          1190,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "sfData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "实发值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0692f",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#f0862f"
+              },
+              formatter: (params) => {
+                if (newData.sfData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.sfData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(249,128,58,0.9)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.sfData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right_bottom {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xndc/modules/right-middle.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="right_middle">
+    <Echart
+        :options="options"
+        id="rightMiddleChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1200,
+          1160,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "sfData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "实发值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#2ff1e7",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#2ff0bd"
+              },
+              formatter: (params) => {
+                if (newData.sfData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.sfData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(58,249,224,0.85)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.sfData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "预测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            lineStyle: {
+              color: "#f0692f",
+              type: 'dashed'
+            },
+            data: newData.ycData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right_middle {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xndc/modules/right-top.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="right_top">
+    <Echart
+        :options="options"
+        id="rightTopChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1180,
+          1190,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "scData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData,
+          },
+          {
+            name: "实测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#2ff042",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#2ff042"
+              },
+              formatter: (params) => {
+                if (newData.scData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.scData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(9,243,13,0.74)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.scData,
+          },
+          {
+            name: "预测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            lineStyle: {
+              color: "#f0692f",
+              type: 'dashed'
+            },
+            data: newData.ycData,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right_top {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>