newcpms/ui/src/views/monitor/elec/echart/bottom/bottomRightChart.vue

<template>
  <div>
    <div id="bottomRightChart" style="width:100%;height:3.5rem;top: -20px"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  props:['weekData'],
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.draw();
    this.charTimg();
  },
  mixins: [echartMixins],
  methods: {
    charTimg() {
      setInterval(() => {
        this.draw();
      }, 6000);
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById("bottomRightChart"));
      //  ----------------------------------------------------------------
      // 数据
      let dateBase = new Date();
      let year = dateBase.getFullYear();
      let dottedBase = +dateBase + 1000 * 3600 * 24;
      let weekCategory = [];

      let maxData = 12000;
      let weekMaxData = [];
      let weekLineData = [];

      // 周数据
      for (let i = 0; i < 7; i++) {
        // 日期
        var date = new Date((dottedBase -= 1000 * 3600 * 24));
        weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));

        // 折线图数据
        weekMaxData.push(maxData);
        var distance = Math.round(Math.random() * 11000 + 500);
        weekLineData.push(distance);
      };
      const dateNum = [];
      for (let i = 0; i < this.weekData.length; i++) {
        dateNum[i] = this.weekData[i].evconsume;
      }

      // // 颜色设置
      // let color = {
      //   linearYtoG: {
      //     type: "linear",
      //     x: 0,
      //     y: 0,
      //     x2: 1,
      //     y2: 1,
      //     colorStops: [
      //       {
      //         offset: 0,
      //         color: "#f5b44d"
      //       },
      //       {
      //         offset: 1,
      //         color: "#28f8de"
      //       }
      //     ]
      //   },
      //   linearGtoB: {
      //     type: "linear",
      //     x: 0,
      //     y: 0,
      //     x2: 1,
      //     y2: 0,
      //     colorStops: [
      //       {
      //         offset: 0,
      //         color: "#43dfa2"
      //       },
      //       {
      //         offset: 1,
      //         color: "#28f8de"
      //       }
      //     ]
      //   },
      //   linearBtoG: {
      //     type: "linear",
      //     x: 0,
      //     y: 0,
      //     x2: 1,
      //     y2: 0,
      //     colorStops: [
      //       {
      //         offset: 0,
      //         color: "#1c98e8"
      //       },
      //       {
      //         offset: 1,
      //         color: "#28f8de"
      //       }
      //     ]
      //   },
      //   areaBtoG: {
      //     type: "linear",
      //     x: 0,
      //     y: 0,
      //     x2: 0,
      //     y2: 1,
      //     colorStops: [
      //       {
      //         offset: 0,
      //         color: "rgba(35,184,210,.2)"
      //       },
      //       {
      //         offset: 1,
      //         color: "rgba(35,184,210,0)"
      //       }
      //     ]
      //   }
      // };
      // let option = {
      //   tooltip: {
      //     trigger: "item"
      //   },
      //   grid: {
      //     left: 90,
      //     right: 80,
      //     bottom: 40,
      //     top: "30%"
      //   },
      //   xAxis: {
      //     type: "category",
      //     position: "bottom",
      //     axisLine: true,
      //     axisLabel: {
      //       color: "rgba(255,255,255,.8)",
      //       fontSize: 12
      //     },
      //     data: weekCategory
      //   },
      //   // 下方Y轴
      //   yAxis: {
      //     name: "消耗",
      //     nameLocation: "end",
      //     nameGap: 24,
      //     nameTextStyle: {
      //       color: "rgba(255,255,255,.5)",
      //       fontSize: 14
      //     },
      //     max: maxData,
      //     splitNumber: 4,
      //
      //     axisLine: {
      //       lineStyle: {
      //         opacity: 0
      //       }
      //     },
      //     splitLine: {
      //       show: true,
      //       lineStyle: {
      //         color: "#fff",
      //         opacity: 0.1
      //       }
      //     },
      //     axisLabel: {
      //       color: "rgba(255,255,255,.8)",
      //       fontSize: 12
      //     }
      //   },
      //   series: [
      //     {
      //       name: "",
      //       type: "line",
      //       smooth: true,
      //       symbol: "emptyCircle",
      //       symbolSize: 8,
      //       itemStyle: {
      //         normal: {
      //           color: "#fff"
      //         }
      //       },
      //       lineStyle: {
      //         normal: {
      //           color: "rgba(248,211,81,.7)",
      //           width: 3
      //         }
      //       },
      //       areaStyle: {
      //         normal: {
      //           color: color.areaBtoG
      //         }
      //       },
      //       data: weekLineData,
      //       lineSmooth: true,
      //       markLine: {
      //         silent: true,
      //         data: [
      //           {
      //             type: "average",
      //             name: "平均值"
      //           }
      //         ],
      //         precision: 0,
      //         label: {
      //           normal: {
      //             formatter: "平均值: \n {c}"
      //           }
      //         },
      //         lineStyle: {
      //           normal: {
      //             color: "rgba(248,211,81,.7)"
      //           }
      //         }
      //       },
      //       tooltip: {
      //         position: "top",
      //         formatter: "{c} m",
      //         backgroundColor: "rgba(28,152,232,.2)",
      //         padding: 6
      //       }
      //     },
      //     {
      //       name: "占位背景",
      //       type: "bar",
      //       itemStyle: {
      //         normal: {
      //           show: true,
      //           color: "#000",
      //           opacity: 0
      //         }
      //       },
      //       silent: true,
      //       barWidth: "50%",
      //       data: weekMaxData,
      //       animation: false
      //     }
      //   ]
      // };
      let option = {
        tooltip: {
          trigger: "item"
        },
          grid: {
          left: 90,
          right: 80,
          bottom: 40,
          top: "30%"
          },
          xAxis: {
            type: "category",
            position: "bottom",
            axisLine: true,
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12
            },
            data: ['08:00' ,'11:00' ,'14:00' ,'17:00' ,'20:00' ,'23:00' ,'02:00' ,'05:00' ]
            // data: weekCategory
          },

        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [99, 180, 200, 310, 459, 601, 800 ,933],
            // data:dateNum,
            type: 'line',
            smooth: true,
            symbolSize: 15,
            color:"#28f8de",
            lineStyle: {
              width: 6
            },
            markLine: {
              silent: true,
              data: [
                {
                  type: "average",
                  name: "额定值",
                  yAxis: 900
                }
              ],
              precision: 0,
              label: {
                normal: {
                  formatter: "额定值: \n {c}"
                }
              },
              lineStyle: {
                normal: {
                  width: 3,
                  color: "rgba(248,211,81,.7)"
                }
              }
            },
          }
        ]

      };

      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};

</script>

<style lang="scss" scoped>
</style>