yyky_web/src/views/equBigData/LeftChart2.vue

<template>
  <div class="left-chart-2">
    <dv-charts class="lc2-chart" :option="option" />
  </div>
</template>

<script>
import { addDevice } from "@/api/system/equdata";

export default {
  name: "LeftChart2",
  props:{
   xlist:{
    type:Array,
    default:[],
   },
   ylist:{
    type:Array,
    default:[],
   }
  },
  data() {
    return {
      option: {
        title: {
          show: false,
        },
        grid: {
          top: 30,
          bottom: 20,
        },
        xAxis: {
          name: "",
          data: this.xlist,
          boundaryGap: false,
          // data: ['周一', '周二', '周三'],
          axisLine: {
            style: {
              stroke: "#324686",
              lineWidth: 1,
            },
          },
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
              rotate: 0,
            },
          },
          axisTick:{
            show: false,
          },
        },
        yAxis: {
          name: "",
          data: "value",
          min:0,
          splitLine: {
            // show:false,
            style: {
              stroke: "#09111e",
              lineWidth: 1,
            },
          },
          nameTextStyle:{
            fill: '#09111e',
            fontSize: 10
          },
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
              rotate: 0,
            },
          },
          axisLine: {
            style: {
              stroke: "#324686",
              lineWidth: 1,
            },
          },
          axisTick:{
            show: false,
          }
        },
        series: [
          {
            data: this.ylist,
            type: "line",
            label:{
              show:true,
            },
            // animationCurve:'easeOutCubic',
            lineArea: {
              show: true,
              gradient: ["rgba(55, 162, 218, 0.6)", "rgba(55, 162, 218, 0)"],
            },
          },
        ],
      },
    };
  },
  created() {
    this.getEquData();
  },
  methods: {
    getEquData() {
      addDevice().then(res=>{
        let xlist=res.data.map(item=>item.month)
        let ylist=res.data.map(item=>item.count)
        this.option.xAxis.data=xlist
        this.option.series[0].data=ylist
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.left-chart-2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .lc2-chart {
    height: calc(100% - 80px);
    position: relative;
  }
}
</style>