|
@@ -0,0 +1,68 @@
|
|
|
+<template>
|
|
|
+ <div class="card-chart" ref="chartRef"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { galleryIndicatorLine } from "./chartSeting";
|
|
|
+import { deepClone } from "@/common/commonFun";
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ indexName: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+let myChart = null;
|
|
|
+const chartRef = ref();
|
|
|
+
|
|
|
+let chartDataArr = ref([
|
|
|
+ { date: "9/1", value: 40 },
|
|
|
+ { date: "9/7", value: 60 },
|
|
|
+ { date: "9/13", value: 63 },
|
|
|
+ { date: "9/19", value: 68 },
|
|
|
+ { date: "9/25", value: 80, feature: true },
|
|
|
+ { date: "10/1", value: 85, feature: true },
|
|
|
+ { date: "10/7", value: 88, feature: true },
|
|
|
+]);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ myChart = echarts.init(chartRef.value);
|
|
|
+ const options = deepClone(galleryIndicatorLine);
|
|
|
+
|
|
|
+ myChart.setOption(options);
|
|
|
+});
|
|
|
+
|
|
|
+const processData = () => {
|
|
|
+ const today = new Date();
|
|
|
+ const todayString = today.toISOString().split("T")[0]; // 获取今天的日期,格式为YYYY-MM-DD
|
|
|
+ const datePattern = /(\d+)\/(\d+)/; // 日期格式匹配,假设为MM/DD
|
|
|
+
|
|
|
+ props.chartData.forEach((item) => {
|
|
|
+ const match = item.date.match(datePattern);
|
|
|
+ if (match) {
|
|
|
+ const month = parseInt(match[1], 10);
|
|
|
+ const day = parseInt(match[2], 10);
|
|
|
+ const itemDate = new Date(today.getFullYear(), month - 1, day); // 月份从0开始,所以需要减1
|
|
|
+ if (itemDate > today) {
|
|
|
+ item.feature = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.card-chart {
|
|
|
+ padding: 8px 4px 0 4px;
|
|
|
+ width: 100%;
|
|
|
+ height: 170px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+</style>
|