PowerAnalysis_blue/src/views/Home/components/windChartCom.vue

<template>
  <div class="home_card" >
    <!-- <div class="header"> <img src="@/../public/img/home/arrows.png"> {{CurveTitle}}曲线</div> -->
    <div class="windChart" >
       <div :id="chartId" :style="{ width: width, height: height }"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import dayjs from "dayjs";
export default {
  name:'windChartCom',
  props:{
    width:{
      type:String,
      default:'100%',
    },
    height:{
      type:String,
      default:'70vh',
    },
    CurveTitle:{
      type:String,
      required:true,
    },
    chartShow:{
      type:Boolean,
      required:true,
      default:false,
    },
    windCurveValues: {
      type: Array,
      required: true,
    },
    chartId:{
      type:String,
      required:true,
    }
  },
 async created() {
  },
  mounted() {
    this.$nextTick(()=>{
      this.getChart();
    })
  },
  data(){
    return{
      emptyData:[],
    }
  },
  methods:{
    getChart(){
      var chartDom = document.getElementById(this.chartId);
      var myChart = echarts.init(chartDom);        // 绘制图表
      var options= {
        title: {},
        tooltip: {
          trigger: 'axis',
          "backgroundColor": "rgba(0, 0, 0, 0.3)",
          textStyle: {
            color: "white" //设置文字颜色
          },
        },
        legend: {
          top: '6%',
          right: '2%',
          textStyle: {
            fontSize: '12',
            color: '#A4A4A5'
          },
          orient: 'vertical',
          icon: 'roundRect',
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 7
        },
        xAxis: {
          // type: 'category',
          // name: 'x',
          axisLabel:{
            interval:11,
            showMinLabel: true,
            showMaxLabel: true,
            textStyle: {
              color: '#606769',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#606769', //x轴的颜色
              width: 1, //轴线的宽度
            },
          },
          splitLine: { show: false },
          data: this.getTimeStanp,

        },
        yAxis: {
          type: 'value',
          splitNumber:3,
          splitLine: {
            show: false,
            textStyle: {
              color: '#606769',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#606769', // y轴的颜色
              width: 1, //y轴线的宽度
            },
          },
        },
        grid: [
          {
            left: 40,
            right: 40,
            top: 20,
            bottom: 30
          }
        ],
        series: [
          {
            name:this.CurveTitle,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.7,
              color: new echarts.graphic.LinearGradient(0, 0, 2, 1, [
                {
                  offset: 0,
                  color: 'rgba(53, 150, 235, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(18, 32, 50, 0.2)'
                }
              ])
            },
            lineStyle: {
              width: 1
            },
            color:'#3596EB',
            data: this.getData(this.windCurveValues[0]),
          }
        ]
      }
      myChart.setOption(options);
    },
    //处理数据
    getData(datas){
      let data=[];
      //查询的测点没有数据情况
      if(datas && datas.length>0){
        datas.forEach(item=>{
          let result;
          if(item.value){
            result=item.value.toFixed(2);
          }else {
            result=item.value;
          }
          data.push(result);
        })
        return data;
      }else {
        return this.emptyData;
      }
    },
  },
  computed:{
    getTimeStanp(){
      // 当日0点时间
      var timeStamp=[];
      let stamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
      for(let i=0;i<96;i++){
        timeStamp.push( dayjs(stamp).format("HH:mm"));
        this.emptyData.push('0');
        stamp = parseInt(stamp)+(15 * 60 * 1000);
      }
      timeStamp.push('24:00');
      return timeStamp;
    },
  },
  watch:{
    'windCurveValues':{
      handler() {
        this.getChart();
      },
    }
  }

}

</script>

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