chenzhou/src/components/datapage/LatestWeekYield.vue

<script setup>
import { ref, watch, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import Container from "../Base/Container.vue";
import { useWsStore } from "../../store";
import chartSetup, { loadData } from "./LatestWeekYieldOptions";

const store = useWsStore();
const chartContainer = ref(null);
const chartInstance = ref(null);
const show = ref(false);

onMounted(() => {
  chartContainer.value.classList.add("h-full");
  const d = loadData(store.data2.lineSevenDayLogList);
  // const d = loadData([
  //   {
  //     data: [
  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
  //     ],
  //     name: "钢一线",
  //   },
  //   {
  //     data: [
  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
  //     ],
  //     name: "钢二线",
  //   },
  //   {
  //     data: [
  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
  //     ],
  //     name: "钢三线",
  //   },
  // ]);
  if (!d) {
    show.value = false;
    if (chartInstance.value) {
      chartInstance.value.dispose();
      chartInstance.value = null;
    }
  } else {
    if (!chartInstance.value)
      chartInstance.value = echarts.init(chartContainer.value);
    chartSetup(chartInstance.value, d);
    show.value = true;
  }
});

// 订阅
store.$subscribe((mutation, state) => {
  const d = loadData(state.data2.lineSevenDayLogList);
  // const d = loadData([
  //   {
  //     data: [
  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
  //     ],
  //     name: "钢一线",
  //   },
  //   {
  //     data: [
  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
  //     ],
  //     name: "钢二线",
  //   },
  //   {
  //     data: [
  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
  //     ],
  //     name: "钢三线",
  //   },
  // ]);
  if (!d) {
    show.value = false;
    if (chartInstance.value) {
      chartInstance.value.dispose();
      chartInstance.value = null;
    }
  } else {
    if (!chartInstance.value)
      chartInstance.value = echarts.init(chartContainer.value);
    chartSetup(chartInstance.value, d);
    show.value = true;
  }
});
</script>

<template>
  <Container class="chart" title="近7日产量" icon="cube">
    <div
      ref="chartContainer"
      class="chart-chart"
      :style="{ opacity: show ? 1 : 0 }"
    ></div>
    <p v-show="!show" class="empty-data-hint">暂无数据</p>
  </Container>
</template>

<style scoped>
.chart {
  /* height: 300px; */
  height: auto;
}

.chart-chart {
  height: 100%;
}
</style>

<style>
.empty-data-hint {
  color: #c5c5c5;
  letter-spacing: 1px;
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: 200px;
  height: 32px;
  user-select: none;
}
</style>