fiveFollowing-admin/src/views/powerQuality/unbalanceAnalysis/electricChart.vue

<template>
  <div shadow="never" class="homeBoxCard" v-loading="loading">
    <div class="height400" ref="lineChartBanlance" />
  </div>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  Ref,
  ref,
  watch,
  ComputedRef,
} from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { EChartOption } from "echarts";
import useEcharts from "@/composables/useEcharts";
import { StateType as HomeStateType } from "../../home/store";
// import { ChartDataType } from "../../data";

const worksChartOption: EChartOption = {
  // backgroundColor: "pink",
  color: ["#f2e251", "#48C964", "#fe8161"],

  legend: {
    bottom: "0",
    data: ["A相电流", "B相电流", "C相电流"],
  },
  // toolbox: {
  //   show: false,
  // },
  tooltip: {
    // show: true
    trigger: "axis",
    axisPointer: { type: "cross" },
  },
  grid: {
    left: "20",
    right: "40",
    top: "40",
    bottom: "30",
    containLabel: true,
  },
  xAxis: {
    axisLabel: {
      color: "#444", fontSize: 14 ,
    },
    /*改变xy轴颜色*/
    axisLine: {
      lineStyle: {
        color: "#444",
        width: 1, //这里是为了突出显示加上的
      },
    },
    boundaryGap: false,
    data: ["0:00", "2:00", "4:00", "6:00", "8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00",],
  },
  yAxis: {
    name: "A",
    nameTextStyle: {
      color: "#707070",
      fontSize: 14,
    },
    axisLabel: {
       color: "#444", fontSize: 14 ,
    },

    axisLine: {
      symbolOffset: [0, 4],
      lineStyle: { color: "#444" },
    },
    splitArea: {
      show: false,
    },
  },

  series: [
    {
      name: "A相电流",
      type: "line",
      symbolSize: 7,
      smooth: false,
      data: [10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,],
      
    },
    {
      name: "B相电流",
      type: "line",
      symbolSize: 7,
      smooth: false,
      data: [10, 2, 12, 0,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,],
    },
    {
      name: "C相电流",
      type: "line",
      symbolSize: 7,
      smooth: false,
      data: [5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14],
    },
  ],

};

interface WorksChartCardSetupData {
  t: (key: string | number) => string;
  loading: Ref<boolean>;
  lineChartBanlance: Ref;
  total: ComputedRef<number>;
  num: ComputedRef<number>;
}

export default defineComponent({
  name: "ElectricChart",
  setup(): WorksChartCardSetupData {
    const store = useStore<{ Home: HomeStateType }>();
    const { t } = useI18n();

    // 总数
    const total = computed<number>(() => store.state.Home.worksChartData.total);
    // num
    const num = computed<number>(() => store.state.Home.worksChartData.num);
    // chart Data
    // const chartData = computed<ChartDataType>(
    //   () => store.state.Home.worksChartData.chart
    // );

    // echarts 图表
    const lineChartBanlance = ref<HTMLDivElement>();
    const echarts = useEcharts(lineChartBanlance, worksChartOption);
    // watch([echarts, chartData], () => {
    //   if (echarts.value) {
    //     const option: EChartOption = {
    //       xAxis: {
    //         // data: ["03-01", "03-01", "03-01", "03-01", "03-01", "03-01", "03-01"]
    //         data: chartData.value.day,
    //       },
    //       series: [
    //         {
    //           name: "新增",
    //           // data: [3, 1, 1, 2, 2, 2, 2]
    //           data: chartData.value.num,
    //         },
    //       ],
    //     };
    //     echarts.value.setOption(option);
    //   }
    // });

    // 读取数据 func
    const loading = ref<boolean>(true);
    const getData = async () => {
      loading.value = true;
      await store.dispatch("Home/queryWorksChartData");
      loading.value = false;
    };

    onMounted(() => {
      getData();
    });

    return {
      t,
      loading,
      lineChartBanlance,
      total,
      num,
    };
  },
});
</script>
<style lang="scss" scoped>
.homeBoxCard {
  margin-bottom: 24px;
  ::v-deep(.el-card__header) {
    padding-left: 12px;
    padding-right: 12px;
  }
  ::v-deep(.el-card__body) {
    padding: 12px;
    font-size: 14px;
    line-height: 1.5715;
  }
  ::v-deep(.el-divider) {
    margin: 8px 0;
  }
  .num {
    font-size: 30px;
    color: #515a6e;
  }
  .height400 {
    height: 400px;
  }
}
</style>