fiveFollowing-admin/src/views/powerQuality/unbalanceAnalysis/electricChart2.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 = {
  color: ["#1187FF"],
  legend: {
    bottom: "0",
    data: ["电流不平衡度"],
  },

  tooltip: {
    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: "%",
    nameTextStyle: {
      color: "#707070",
      fontSize: 14,
    },
    axisLabel: {
      color: "#444", fontSize: 14 ,
    },
    axisLine: {
      symbolOffset: [0, 4],
      lineStyle: { color: "#444" },
    },
    splitArea: {
      show: false,
    },
  },

  series: [
    {
      name: "电流不平衡度",
      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,
      ],
      markLine: {
        //最大值和最小值
        data: [
          {
            yAxis: 10,
            label: {
              position: "middle",
              formatter: "严重三项不平衡",
            },
            lineStyle: {
              width: 2,
              color: "#FF5D1D",
            },
          },
          {
            yAxis: 8,
            label: {
              position: "middle",
              formatter: "不平衡度",
            },
            lineStyle: {
              width: 2,
              color: "#f2e251",
            },
          },
        ],
      },
    },
  ],
};

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

export default defineComponent({
  name: "ElectricChart2",
  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>