st-comp 0.0.44 → 0.0.46

package/src/pages/KlineNew/components/KlineAction/components/YearChart/index.vue

@@ -0,0 +1,532 @@
+<!-- 价差周期性图 -->
+<script setup name="YearChart">
+import * as echarts from "echarts";
+import { ref, onMounted, onUnmounted, watch } from "vue";
+
+const props = defineProps({
+  // 接口数据
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const chartRef = ref(null);
+const chartOption = ref({});
+let chart = null;
+let chartObserver = null;
+
+// 颜色配置
+const colorList = [
+  "#FFFFFF",
+  "#FFDD00",
+  "#FF00FF",
+  "#00FF00",
+  "#FF6000",
+  "#1677FF",
+  "#7C3CC9",
+  "#FF0000",
+  "#FB9A0E",
+  "#00B7FF",
+];
+
+// 格式化图表配置项
+const handleOption = () => {
+  // 图例数据
+  const legendData = props.data.map((item) => item.year + "");
+  // X轴数据
+  const xAxisData = [
+    "01-01",
+    "01-02",
+    "01-03",
+    "01-04",
+    "01-05",
+    "01-06",
+    "01-07",
+    "01-08",
+    "01-09",
+    "01-10",
+    "01-11",
+    "01-12",
+    "01-13",
+    "01-14",
+    "01-15",
+    "01-16",
+    "01-17",
+    "01-18",
+    "01-19",
+    "01-20",
+    "01-21",
+    "01-22",
+    "01-23",
+    "01-24",
+    "01-25",
+    "01-26",
+    "01-27",
+    "01-28",
+    "01-29",
+    "01-30",
+    "01-31",
+    "02-01",
+    "02-02",
+    "02-03",
+    "02-04",
+    "02-05",
+    "02-06",
+    "02-07",
+    "02-08",
+    "02-09",
+    "02-10",
+    "02-11",
+    "02-12",
+    "02-13",
+    "02-14",
+    "02-15",
+    "02-16",
+    "02-17",
+    "02-18",
+    "02-19",
+    "02-20",
+    "02-21",
+    "02-22",
+    "02-23",
+    "02-24",
+    "02-25",
+    "02-26",
+    "02-27",
+    "02-28",
+    "02-29",
+    "03-01",
+    "03-02",
+    "03-03",
+    "03-04",
+    "03-05",
+    "03-06",
+    "03-07",
+    "03-08",
+    "03-09",
+    "03-10",
+    "03-11",
+    "03-12",
+    "03-13",
+    "03-14",
+    "03-15",
+    "03-16",
+    "03-17",
+    "03-18",
+    "03-19",
+    "03-20",
+    "03-21",
+    "03-22",
+    "03-23",
+    "03-24",
+    "03-25",
+    "03-26",
+    "03-27",
+    "03-28",
+    "03-29",
+    "03-30",
+    "03-31",
+    "04-01",
+    "04-02",
+    "04-03",
+    "04-04",
+    "04-05",
+    "04-06",
+    "04-07",
+    "04-08",
+    "04-09",
+    "04-10",
+    "04-11",
+    "04-12",
+    "04-13",
+    "04-14",
+    "04-15",
+    "04-16",
+    "04-17",
+    "04-18",
+    "04-19",
+    "04-20",
+    "04-21",
+    "04-22",
+    "04-23",
+    "04-24",
+    "04-25",
+    "04-26",
+    "04-27",
+    "04-28",
+    "04-29",
+    "04-30",
+    "05-01",
+    "05-02",
+    "05-03",
+    "05-04",
+    "05-05",
+    "05-06",
+    "05-07",
+    "05-08",
+    "05-09",
+    "05-10",
+    "05-11",
+    "05-12",
+    "05-13",
+    "05-14",
+    "05-15",
+    "05-16",
+    "05-17",
+    "05-18",
+    "05-19",
+    "05-20",
+    "05-21",
+    "05-22",
+    "05-23",
+    "05-24",
+    "05-25",
+    "05-26",
+    "05-27",
+    "05-28",
+    "05-29",
+    "05-30",
+    "05-31",
+    "06-01",
+    "06-02",
+    "06-03",
+    "06-04",
+    "06-05",
+    "06-06",
+    "06-07",
+    "06-08",
+    "06-09",
+    "06-10",
+    "06-11",
+    "06-12",
+    "06-13",
+    "06-14",
+    "06-15",
+    "06-16",
+    "06-17",
+    "06-18",
+    "06-19",
+    "06-20",
+    "06-21",
+    "06-22",
+    "06-23",
+    "06-24",
+    "06-25",
+    "06-26",
+    "06-27",
+    "06-28",
+    "06-29",
+    "06-30",
+    "07-01",
+    "07-02",
+    "07-03",
+    "07-04",
+    "07-05",
+    "07-06",
+    "07-07",
+    "07-08",
+    "07-09",
+    "07-10",
+    "07-11",
+    "07-12",
+    "07-13",
+    "07-14",
+    "07-15",
+    "07-16",
+    "07-17",
+    "07-18",
+    "07-19",
+    "07-20",
+    "07-21",
+    "07-22",
+    "07-23",
+    "07-24",
+    "07-25",
+    "07-26",
+    "07-27",
+    "07-28",
+    "07-29",
+    "07-30",
+    "07-31",
+    "08-01",
+    "08-02",
+    "08-03",
+    "08-04",
+    "08-05",
+    "08-06",
+    "08-07",
+    "08-08",
+    "08-09",
+    "08-10",
+    "08-11",
+    "08-12",
+    "08-13",
+    "08-14",
+    "08-15",
+    "08-16",
+    "08-17",
+    "08-18",
+    "08-19",
+    "08-20",
+    "08-21",
+    "08-22",
+    "08-23",
+    "08-24",
+    "08-25",
+    "08-26",
+    "08-27",
+    "08-28",
+    "08-29",
+    "08-30",
+    "08-31",
+    "09-01",
+    "09-02",
+    "09-03",
+    "09-04",
+    "09-05",
+    "09-06",
+    "09-07",
+    "09-08",
+    "09-09",
+    "09-10",
+    "09-11",
+    "09-12",
+    "09-13",
+    "09-14",
+    "09-15",
+    "09-16",
+    "09-17",
+    "09-18",
+    "09-19",
+    "09-20",
+    "09-21",
+    "09-22",
+    "09-23",
+    "09-24",
+    "09-25",
+    "09-26",
+    "09-27",
+    "09-28",
+    "09-29",
+    "09-30",
+    "10-01",
+    "10-02",
+    "10-03",
+    "10-04",
+    "10-05",
+    "10-06",
+    "10-07",
+    "10-08",
+    "10-09",
+    "10-10",
+    "10-11",
+    "10-12",
+    "10-13",
+    "10-14",
+    "10-15",
+    "10-16",
+    "10-17",
+    "10-18",
+    "10-19",
+    "10-20",
+    "10-21",
+    "10-22",
+    "10-23",
+    "10-24",
+    "10-25",
+    "10-26",
+    "10-27",
+    "10-28",
+    "10-29",
+    "10-30",
+    "10-31",
+    "11-01",
+    "11-02",
+    "11-03",
+    "11-04",
+    "11-05",
+    "11-06",
+    "11-07",
+    "11-08",
+    "11-09",
+    "11-10",
+    "11-11",
+    "11-12",
+    "11-13",
+    "11-14",
+    "11-15",
+    "11-16",
+    "11-17",
+    "11-18",
+    "11-19",
+    "11-20",
+    "11-21",
+    "11-22",
+    "11-23",
+    "11-24",
+    "11-25",
+    "11-26",
+    "11-27",
+    "11-28",
+    "11-29",
+    "11-30",
+    "12-01",
+    "12-02",
+    "12-03",
+    "12-04",
+    "12-05",
+    "12-06",
+    "12-07",
+    "12-08",
+    "12-09",
+    "12-10",
+    "12-11",
+    "12-12",
+    "12-13",
+    "12-14",
+    "12-15",
+    "12-16",
+    "12-17",
+    "12-18",
+    "12-19",
+    "12-20",
+    "12-21",
+    "12-22",
+    "12-23",
+    "12-24",
+    "12-25",
+    "12-26",
+    "12-27",
+    "12-28",
+    "12-29",
+    "12-30",
+    "12-31",
+  ];
+  // 线条数据
+  const series = props.data.map((item, index) => {
+    return {
+      name: item.year,
+      type: "line",
+      data: item.infos.map((info) => {
+        return [info.genTime, info.close];
+      }),
+      symbol: "none",
+      itemStyle: {
+        color: colorList[index],
+      },
+      lineStyle: {
+        width: 1,
+      },
+      connectNulls: false,
+    };
+  });
+  chartOption.value = {
+    legend: {
+      right: "60px",
+      itemWidth: 14,
+      itemHeight: 14,
+      textStyle: {
+        color: "#FFF",
+        padding: [2, 0, 0, 0],
+        rich: {},
+      },
+      icon: "roundRect",
+      align: "right",
+      data: legendData,
+    },
+    tooltip: {
+      show: false,
+      trigger: "axis",
+      textStyle: {
+        color: "#fff",
+      },
+      formatter: (params) => {
+        const title = `<span style="font-size: 12px;">${params[0].axisValueLabel}</span>`;
+        const content = params.reduce((result, item) => {
+          const icon = `<span style="background-color:${item.color};width: 10px;height: 10px;margin-right: 5px;display: inline-block;"></span>`;
+          const name = `<span style="margin-right: 10px;display: inline-block;font-size: 12px;">${item.seriesName}:</span>`;
+          const value = `<span style="font-size: 12px;">${item.value}</span>`;
+          return result + icon + name + value + "<br/>";
+        }, "");
+        return title + "<br/>" + content;
+      },
+      backgroundColor: "rgb(0,0,0,0.5)",
+    },
+    grid: {
+      left: "60px",
+      top: "0px",
+      right: "60px",
+      bottom: "30px",
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: xAxisData,
+      axisLabel: {
+        interval: (index, value) => {
+          if (value.split("-")[1] === "01") {
+            return true;
+          } else {
+            return false;
+          }
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dotted",
+          color: "#333",
+        },
+      },
+      axisLine: {
+        show: true,
+      },
+      axisLabel: {
+        formatter: (value) => value,
+        showMaxLabel: false,
+      },
+    },
+    series,
+  };
+};
+
+onMounted(async () => {
+  chart = echarts.init(chartRef.value);
+  handleOption();
+  chart.setOption(chartOption.value, true);
+  chartObserver = new ResizeObserver(() => {
+    chart.resize();
+  });
+  chartObserver.observe(chartRef.value);
+});
+
+watch(
+  () => props.data,
+  async () => {
+    handleOption();
+    chart.setOption(chartOption.value, true);
+  }
+);
+
+onUnmounted(() => {
+  chart.dispose();
+  chartObserver.disconnect();
+  chartObserver = null;
+});
+</script>
+
+<template>
+  <div id="yearChart" ref="chartRef"></div>
+</template>
+
+<style lang="scss" scoped>
+#yearChart {
+  height: 100px;
+  width: 100%;
+  overflow-x: hidden;
+}
+</style>