foster-pc-vue/src/components/charts/options/oneLineOption.js

import * as echarts from "echarts";

function formatDateToMMDD(date) {
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1，并确保是两位数
    const day = String(date.getDate()).padStart(2, "0"); // 确保日期是两位数
    return `${month}/${day}`;
}

function getCurrentDateAndNextSixDaysMMDD() {
    const currentDate = new Date();
    const dates = [];

    for (let i = 0; i <= 6; i++) {
        const newDate = new Date(currentDate);
        newDate.setDate(currentDate.getDate() + i);
        const formattedDate = formatDateToMMDD(newDate);
        dates.push(formattedDate);
    }

    return dates;
}

const list = getCurrentDateAndNextSixDaysMMDD();

export const oneLine = {
    // tooltip: {
    //     trigger: "axis",
    // },
    grid: {
        top: 14,
        left: 6,
        right: 6,
        bottom: 6,
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        // 分割线
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            // interval: 8,
            rotate: 15,
            margin: 14,
            color: "#9F9F9F",
            fontSize: 10
        },
        axisLine: {
            lineStyle: {
                color: "rgba(185, 185, 185, 0.12)",
            }
        },
        data: list
    },
    yAxis: [{
        type: 'value',
        offset: 10,
        interval: 10,
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            align: "center",
            formatter: '{value} °',
            color: "#fff",
            fontSize: 10
        },
        // 分割线
        splitLine: {
            lineStyle: {
                type: [4, 3],
                dashOffset: 5,
                color: "#333333",
            },
        },
        splitNumber: 4, // 设置5个分割段
    }],
    series: [
        {
            name: "温度",
            data: [],
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: { color: "#FF7219" },
            lineStyle: {
                color: "#FF7219", // 折线颜色为红色
                width: 2, // 线条宽度
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#F0AC37" }, // 渐变起始颜色
                    { offset: 1, color: "rgba(35, 35, 35, 0)" }, // 渐变结束颜色
                ]),
            },
            markPoint: {
                // symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
                symbolSize: [0, 0],
                data: [
                    {
                        name: "text",
                        value: "10°",
                        xAxis: list[0],
                        yAxis: '',
                        symbolOffset: [0, "-50%"],
                        label: {
                            offset: [0, -15],
                            backgroundColor: "#FF7219",
                            padding: [0, 8, 0, 8],
                            color: "#fff",
                            height: 18,
                            borderRadius: 10,
                        },
                    },
                    {
                        name: "mark",
                        xAxis: list[0],
                        yAxis: '',
                        value: "",
                        label: {
                            backgroundColor: "#fff",
                            borderWidth: 2,
                            borderColor: "rgba(255, 255, 255, 0.5)",
                            borderRadius: 8,
                            width: 4,
                            height: 4,
                        },
                    },
                ]
            },
        },
        {
            name: "低温",
            data: [],
            type: "line",
            symbol: "none",
            smooth: true,
            lineStyle: {
                color: "#2199F8", // 折线颜色为红色
                width: 2, // 线条宽度
            },
            itemStyle: {
                color: "#368ACD"
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(33, 153, 248, 0.4)" }, // 渐变起始颜色
                    { offset: 1, color: "rgba(138, 203, 255, 0.02)" }, // 渐变结束颜色
                ]),
            },
            markPoint: {
                symbolSize: [0, 0],
                data: [
                    {
                        name: "text",
                        value: "最低",
                        xAxis: list[0],
                        yAxis: '',
                        symbolOffset: [0, "-50%"],
                        label: {
                            offset: [0, 15],
                            color: "#fff",
                            backgroundColor: "#4993e8",
                            padding: [0, 8, 0, 8],
                            height: 20,
                            borderRadius: 10,
                        },
                    },
                    {
                        name: "mark",
                        xAxis: list[0],
                        yAxis: '',
                        value: "",
                        label: {
                            backgroundColor: "#fff",
                            borderWidth: 2,
                            borderColor: "rgba(255, 255, 255, 0.5)",
                            borderRadius: 8,
                            width: 4,
                            height: 4,
                        },
                    },
                ]
            },
        }
    ],
}