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

<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>