Echarts在线免费图表

 
            // https://www.isqqw.com/viewer?id=39796

function formatDateTime(dateP, format) {
    const pad = (n) => (n < 10 ? "0" + n : n); // 补零函数
    const date = new Date(dateP);
    const year = date.getFullYear();
    const month = pad(date.getMonth() + 1);
    const day = pad(date.getDate());
    const hours = pad(date.getHours());
    const minutes = pad(date.getMinutes());
    const seconds = pad(date.getSeconds());

    return format
        .replace("YYYY", year)
        .replace("MM", month)
        .replace("DD", day)
        .replace("HH", hours)
        .replace("mm", minutes)
        .replace("ss", seconds);
}
let data = [
    { time: "2024.04.24 00:00:00", value: 480 },
    { time: "2024.04.25 00:00:00", value: 500 },
    { time: "2024.04.26 00:00:00", value: 450 },
    { time: "2024.04.27 00:00:00", value: 520 },
    { time: "2024.04.28 00:00:00", value: 490 },
    { time: "2024.04.29 00:00:00", value: 550 },
    { time: "2024.04.30 00:00:00", value: 580 },
    { time: "2024.05.01 00:00:00", value: 560 },
    { time: "2024.05.02 00:00:00", value: 530 },
    { time: "2024.05.03 00:00:00", value: 590 },
    { time: "2024.05.04 00:00:00", value: 540 },
    { time: "2024.05.05 00:00:00", value: 600 },
    { time: "2024.05.06 00:00:00", value: 620 },
    { time: "2024.05.07 00:00:00", value: 650 },
    { time: "2024.05.08 00:00:00", value: 680 },
    { time: "2024.05.09 00:00:00", value: 630 },
    { time: "2024.05.10 00:00:00", value: 660 },
    { time: "2024.05.11 00:00:00", value: 690 },
    { time: "2024.05.12 00:00:00", value: 420, predict: true },
    { time: "2024.05.13 00:00:00", value: 450, predict: true },
    { time: "2024.05.14 00:00:00", value: 480, predict: true },
    { time: "2024.05.15 00:00:00", value: 510, predict: true },
    { time: "2024.05.16 00:00:00", value: 540, predict: true },
    { time: "2024.05.17 00:00:00", value: 480, predict: true },
    { time: "2024.05.18 00:00:00", value: 510, predict: true },
    { time: "2024.05.19 00:00:00", value: 630, predict: true },
    { time: "2024.05.20 00:00:00", value: 660, predict: true },
    { time: "2024.05.21 00:00:00", value: 690, predict: true },
    { time: "2024.05.22 00:00:00", value: 650, predict: true },
    { time: "2024.05.23 00:00:00", value: 750, predict: true },
    { time: "2024.05.24 00:00:00", value: 780, predict: true },
];

let data1 = [];
let data2 = [];
const getDateStr = (dateStr) => formatDateTime(new Date(dateStr), "MM.DD");

data.forEach((item) => {
    if (item.predict) {
        data2.push([getDateStr(item.time), item.value]);
    } else {
        data1.push([getDateStr(item.time), item.value]);
    }
});
const splitLineData = data1.at(-1);

// 如果是折线图，此处需要追加实际数据的最后一组数据，如果是柱状图，则不需要。
data2.unshift(splitLineData);

console.log({ splitLineData });

const labels = data.map((m) => {
    return getDateStr(m.time);
});

const option = {
    backgroundColor: '#061c4c',
    grid: {
        left: 0,
        top: "22%",
        right: "0",
        bottom: 0,
        containLabel: true,
    },
    legend: {
        right: "0",
        top: "4%",
        textStyle: {
            fontSize: 24,
            color: "rgba(203, 221, 242, 1)",
        },
    },
    xAxis: {
        type: "category",
        data: labels,
        axisLabel: {
            fontSize: 28,
            color: "rgba(203, 221, 242, 0.60)",
        },
        axisTick: {
            show: false,
        },
    },
    yAxis: {
        type: "value",
        splitLine: {
            show: true,
        },
        axisLabel: {
            fontSize: 28,
            color: "rgba(203, 221, 242, 0.60)",
        },
    },
    series: [
        {
            name: "历史",
            type: "line",
            showSymbol: false,
            data: data1,
            smooth: true,
            areaStyle: {
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 0.6,
                    colorStops: [
                        {
                            offset: 0,
                            color: "rgba(0, 170, 255, 0.2)", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "rgba(0, 170, 255, 0)", // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
            },
            lineStyle: {
                width: 2,
                color: "rgba(0, 170, 255, 1)",
            },
        },
        {
            name: "预测",
            type: "line",
            showSymbol: false,
            data: data2,
            smooth: true,
            areaStyle: {
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 0.6,
                    colorStops: [
                        {
                            offset: 0,
                            color: "rgba(46, 224, 85, 0.2)", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "rgba(46, 224, 85, 0)", // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
            },
            lineStyle: {
                width: 2,
                color: "rgba(46, 224, 85, 1)",
            },
        },
        {
            type: "line",
            data: [],
            markLine: {
                symbol: "none",
                lineStyle: {
                    type: "solid",
                    width: 2,
                },
                data: [
                    // 灰色线
                    {
                        xAxis: splitLineData[0],
                        label: {
                            show: false,
                        },
                        lineStyle: {
                            color: "white",
                        },
                    },
                    // 下面绿色线
                    [
                        // 下面半截绿色的线
                        {
                            xAxis: splitLineData[0],
                            yAxis: 0,
                            lineStyle: {
                                color: "rgba(46, 224, 85, 1)",
                            },
                        },
                        {
                            xAxis: splitLineData[0],
                            yAxis: splitLineData[1],
                        },
                    ],
                ],
            },
            markPoint: {
                data: [
                    {
                        coord: splitLineData,
                        symbol: "circle",
                        symbolSize: 16,
                        itemStyle: {
                            color: "rgba(203, 221, 242, 1)",
                            shadowColor: "rgba(46, 224, 85, 1)",
                            shadowBlur: 10,
                        },
                    },
                ],
            },
        },
    ],
};