fiveFollowing-admin/src/views/powerQuality/harmonicReport/curveCom.vue

<template>
  <div shadow="never" class="homeBoxCard" v-loading="loading">
    <div style="text-align:center">A相电流（A）</div>
    <div class="height300" ref="worksChartRef" />
  </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 = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["平均值", "95%", "最大值"],
    // align: 'right',
    right: 60,
    textStyle: {},
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 35,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [
        "1次",
        "3次",
        "5次",
        "7次",
        "9次",
        "11次",
        "13次",
        "15次",
        "17次",
        "19次 ",
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "#444",
          width: 1,
          type: "solid",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#444",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "A",
      nameTextStyle: {
        color: "#444",
      },
      axisLabel: {
        formatter: "{value} ",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#444",
          width: 1,
          type: "solid",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#444",
        },
      },
    },
  ],
  series: [
    {
      name: "平均值",
      type: "bar",
      data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
      barWidth: 10, //柱子宽度
      barGap: 1, //柱子之间间距
      itemStyle: {
        normal: {
          color: "#5b82ee",
          opacity: 1,
        },
      },
    },
    {
      name: "95%",
      type: "bar",
      data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
      barWidth: 10,
      barGap: 1,
      itemStyle: {
        normal: {
          color: "#f2e251",
          opacity: 1,
        },
      },
    },
    {
      name: "最大值",
      type: "bar",
      data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
      barWidth: 10,
      barGap: 1,
      itemStyle: {
        normal: {
          color: "#fe8161",
          opacity: 1,
        },
      },
    },
  ],
};

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

export default defineComponent({
  name: "CurveCom",
  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 worksChartRef = ref<HTMLDivElement>();
    const echarts = useEcharts(worksChartRef, 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,
      worksChartRef,
      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;
  }
  .height300 {
    height: 300px;
  }
}
</style>