agriculture-one-map/src/views/warningHome/components/indicatorChart.vue

<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: "",
    },
    chartData: {
        type: Array,
        default: () => [],
    },
    isDark: {
        type: Boolean,
        default: false
    },
});

let myChart = null;
const chartRef = ref();

onMounted(() => {
    myChart = echarts.init(chartRef.value);
    const options = deepClone(galleryIndicatorLine);
    // options.yAxis.name = props.indexName;
    options.xAxis.data = props.chartData.dates
    options.series[0].name = props.chartData.disease_risk_name
    options.series[0].data = props.chartData.disease_risk
    options.series[1].name = props.chartData.growth_risk_name
    options.series[1].data = props.chartData.growth_risk
    options.series[2].name = props.chartData.pheno_param1_name
    options.series[2].data = props.chartData.pheno_param1
    options.series[3].name = props.chartData.pheno_param2_name
    options.series[3].data = props.chartData.pheno_param2
    options.series[4].name = props.chartData.pheno_param3_name
    options.series[4].data = props.chartData.pheno_param3
    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: 160px;
    box-sizing: border-box;
}
</style>