lanzhouYC/components/BatteryManagementEcharts.vue

<template>
  <div id="statisticsEchsrts"></div>
</template>

<script>
export default {
  name: "echarsDemo",
  props: {
    // id: {
    //   type: String,
    //   required: true,
    //   default: true,
    // },
    startTimeList: {
      default: () => false,
      type: [Array, Boolean],
      required: true,
    },
    endTimeList: {
      default: () => false,
      type: [Array, Boolean],
      required: true,
    },
    min: {
      default: () => false,
      type: [Array, Boolean],
      required: true,
    },
  },
  data() {
    return {};
  },
  watch: {
    id: {
      handler: function (newV) {
        console.log("newV", newV);
        this.getRuKuEcharts();
      },
    },
    startTimeList: {
      handler: function (newV) {
        console.log("newV", newV);
        this.getRuKuEcharts();
      },
    },
    endTimeList: {
      handler: function (newV1) {
        console.log("newV1", newV1);
        this.getRuKuEcharts();
      },
    },
    min: {
      handler: function (newV1) {
        console.log("newV1", newV1);
        this.getRuKuEcharts();
      },
    },
  },
  mounted() {
    this.getRuKuEcharts();
    // console.log("111",this.startTimeList);
    //  console.log("222",this.endTimeList);
    //  console.log("222",this.min);
  },
  methods: {
    getRuKuEcharts() {
      console.log(this.startTimeList, "startTimeList");
      var myChart = this.$echarts.init(
        document.getElementById("statisticsEchsrts")
      );
      //     let value = [5, 7, 8, 9, 10, 11, 13, 15, 16, 14, 13, 12, 8, 6, 5, 4, 5, 6, 7, 8, 10, 11, 10, 8,12,13,9,6];
      //    let min = Math.min(...value); //计算最小值
      //    let max = Math.max(...value); //计算最大值
      var option = {
        tooltip: {
          trigger: "axis",
        },
        color: ["#52F478"],
        icon: "circle",
        //   legend: {
        //     x:'580px',
        //     y: '30px',
        //     data: [{
        //       name: '月',
        //       icon:'none'
        //     },
        //       {
        //         name: '日',
        //          icon:'none'
        //       }],
        //     textStyle:{
        //       fontSize: 14,//字体大小
        //       color: '#BBF6FF',//字体颜色

        //     },
        //     selectedMode: 'single',
        //   },
        grid: {
          // top: "10px",
          left: "7%", //默认10%
          right: "4%", //默认10%
          bottom: "8%", //默认60
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "",
          // nameGap: "16",
          show: true,
          // boundaryGap: "1%",
          // offset: -18,
          axisLabel: {
            // padding: [0, 0, 0, 140],
            textStyle: {
              color: "#FFFFFF",
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#BBF6FF",
              width: 2,
            },
            symbol: ["none", "arrow"],
          },
          //   data: [{new:1,a:3},{new:2,a:8}],
          data: this.startTimeList,
        },
        yAxis: {
          type: "value",
          name: "单位:min",
          show: true,
          min: 0,
          offset: 10,
          nameTextStyle: {
            color: "#ffffff",
            padding: [0, -3, 15, 0],
            // verticalAlign: 'top'
            align: "right",
          },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgb(13,190,196)",
              width: 1,
              type: "dashed",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(8,99,116)",
              width: 1,
            },
            // symbol: ["none", "arrow"],
          },
        },
        series: [
          {
            name: "充电时间",
            type: "line",
            smooth: true,
            // symbol: "rect",
            // symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#4EEE79",
                width: 3,
              },
            },
            // areaStyle: {
            //   normal: {
            //     color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //       {
            //         offset: 0,
            //         color: "rgb(9,84,88)",
            //       },
            //       {
            //         offset: 1,
            //         color: "rgb(9,71,72)",
            //       },
            //     ]),
            //   },
            // },
            data: this.min,
            // markPoint: {
            //   data: [{ type: "max", name: "最大值" }],
            // },
            // symbol: function (value, params) {
            //   if (value == min || value == max) {
            //     return "circle"; //拐点类型
            //   } else {
            //     return "none"; //拐点不显示
            //   }
            // },
            markPoint: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#52F478",
                borderColor: "#52F478", //拐点边框颜色

                lineStyle: {
                  color: "#52F478", //折线颜色
                },
                label: { show: false, color: "#ffffff" },
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
#statisticsEchsrts {
  height: 93%;
  width: 100%;
}
</style>