foster-pc-vue/src/views/home/components/weatherChart.vue

<template>
    <div ref="chartDom" class="chart"></div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";

// const props = defineProps({
//     list: {
//         type: Array,
//         default: () => [],
//         required: true,
//     },
// });

let demoData = [
    {
        sourceof: null,
        create_by: null,
        update_by: null,
        remark: null,
        sys_dept_code: null,
        createTime: null,
        updateTime: null,
        rq: "08/28",
        weatherZgwd: 30,
        weatherZdwd: 18,
        weatherTqDay: "晴",
        weatherTqNight: "晴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        windDirectDay: "南风",
        windDirectNight: "南风",
        windPowerDay: "微风",
        windPowerNight: "微风",
        week: "星期三",
    },
    {
        sourceof: null,
        create_by: null,
        update_by: null,
        remark: null,
        sys_dept_code: null,
        createTime: null,
        updateTime: null,
        rq: "08/29",
        weatherZgwd: 31,
        weatherZdwd: 19,
        weatherTqDay: "晴",
        weatherTqNight: "晴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        windDirectDay: "南风",
        windDirectNight: "南风",
        windPowerDay: "微风",
        windPowerNight: "微风",
        week: "星期四",
    },
    {
        sourceof: null,
        create_by: null,
        update_by: null,
        remark: null,
        sys_dept_code: null,
        createTime: null,
        updateTime: null,
        rq: "08/30",
        weatherZgwd: 30,
        weatherZdwd: 19,
        weatherTqDay: "晴",
        weatherTqNight: "多云",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        windDirectDay: "西南风",
        windDirectNight: "北风",
        windPowerDay: "微风",
        windPowerNight: "微风",
        week: "星期五",
    },
    {
        sourceof: null,
        create_by: null,
        update_by: null,
        remark: null,
        sys_dept_code: null,
        createTime: null,
        updateTime: null,
        rq: "08/31",
        weatherZgwd: 30,
        weatherZdwd: 21,
        weatherTqDay: "多云",
        weatherTqNight: "雷阵雨",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        windDirectDay: "北风",
        windDirectNight: "南风",
        windPowerDay: "3~4级",
        windPowerNight: "3~4级",
        week: "星期六",
    },
    {
        sourceof: null,
        create_by: null,
        update_by: null,
        remark: null,
        sys_dept_code: null,
        createTime: null,
        updateTime: null,
        rq: "09/01",
        weatherZgwd: 25,
        weatherZdwd: 16,
        weatherTqDay: "雷阵雨",
        weatherTqNight: "多云",
        weatherImgDay: "https://d.scggqx.com/forecast/img/多云.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/多云.png",
        windDirectDay: "北风",
        windDirectNight: "北风",
        windPowerDay: "3~4级",
        windPowerNight: "3~4级",
        week: "星期日",
    },
    {
        sourceof: null,
        create_by: null,
        update_by: null,
        remark: null,
        sys_dept_code: null,
        createTime: null,
        updateTime: null,
        rq: "09/02",
        weatherZgwd: 26,
        weatherZdwd: 15,
        weatherTqDay: "晴",
        weatherTqNight: "晴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/阴.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/阴.png",
        windDirectDay: "北风",
        windDirectNight: "北风",
        windPowerDay: "3~4级",
        windPowerNight: "微风",
        week: "星期一",
    },
    {
        sourceof: null,
        create_by: null,
        update_by: null,
        remark: null,
        sys_dept_code: null,
        createTime: null,
        updateTime: null,
        rq: "09/03",
        weatherZgwd: 27,
        weatherZdwd: 18,
        weatherTqDay: "多云",
        weatherTqNight: "阴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        windDirectDay: "无持续风向",
        windDirectNight: "无持续风向",
        windPowerDay: "微风",
        windPowerNight: "微风",
        week: "星期二",
    },
    {
        sourceof: null,
        create_by: null,
        update_by: null,
        remark: null,
        sys_dept_code: null,
        createTime: null,
        updateTime: null,
        rq: "09/04",
        weatherZgwd: 27,
        weatherZdwd: 18,
        weatherTqDay: "多云",
        weatherTqNight: "阴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        windDirectDay: "无持续风向",
        windDirectNight: "无持续风向",
        windPowerDay: "微风",
        windPowerNight: "微风",
        week: "星期二",
    },
];

let weekday = [];
let datelist = [];
let weatherDaylist = [];
let weatherNightlist = [];
let weatherImgDaylist = [];
let weatherImgNightlist = [];
let windDirectlist = [];
let windPowerlist = [];
let weatherZgwdlist = [];
let weatherZdwdlist = [];

let weatherImgDaylistRich = {};
let weatherImgNightlistRich = {};

let maxWD = 30;
let minWD = 0;

demoData.forEach((item) => {
    weekday.push(item.week);
    datelist.push(item.rq);
    weatherDaylist.push(item.weatherTqDay);
    weatherNightlist.push(item.weatherTqNight);
    weatherImgDaylist.push(item.weatherImgDay);
    weatherImgNightlist.push(item.weatherImgNight);
    windDirectlist.push(item.windDirectDay);
    windPowerlist.push(item.windPowerDay);
    weatherZgwdlist.push(item.weatherZgwd);
    weatherZdwdlist.push(item.weatherZdwd);
});
maxWD = Math.max(...weatherZgwdlist) + 30;
minWD = Math.min(...weatherZdwdlist) - 30;
let weatherImgDaylistStyle = weatherImgDaylist.map((item) => {
    let dateUrl = item;
    return {
        backgroundColor: {
            image: require("@/assets/images/home/qi-100.svg"),
        },
        height: 20,
        width: 20,
        color: "#fff"
    };
});
let weatherImgNightlistStyle = weatherImgNightlist.map((item) => {
    let dateUrl = item;
    return {
        backgroundColor: {
            image: dateUrl,
        },
        height: 20,
        width: 20,
    };
});
weatherImgDaylistStyle.forEach((i, index) => {
    weatherImgDaylistRich[index] = i;
});
weatherImgNightlistStyle.forEach((i, index) => {
    weatherImgNightlistRich[index] = i;
});

const myChart = ref(null);
const chartDom = ref(null);
const options = {
    grid: {
        top: "-100px",
        right: "20px",
        bottom: '-80px',
        left: "-20px",
        containLabel: true,
    },
    xAxis: [
        {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: 0,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}"].join("\n"),
                rich: {
                    a: {
                        color: "#fff",
                    },
                },
            },
            data: weekday,
        },
        {
            type: "category",
            position: "top",
            offset: -40,
            boundaryGap: false,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}"].join("\n"),
                rich: {
                    a: {
                        fontSize: 11,
                    },
                },
            },
            data: datelist,
            axisPointer: {
                show: false,
            },
        },
        // {
        //     type: "category",
        //     position: "top",
        //     offset: -40,
        //     boundaryGap: false,
        //     zlevel: 100,
        //     axisLine: {
        //         show: false,
        //     },
        //     axisTick: {
        //         show: false,
        //     },
        //     axisLabel: {
        //         interval: 0,
        //         formatter: ["{a|{value}}"].join("\n"),
        //         rich: {
        //             a: {
        //                 color: "#fff",
        //             },
        //         },
        //     },
        //     data: weatherDaylist,
        //     axisPointer: {
        //         show: false,
        //     },
        // },
        {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: -65,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{{value}|}"].join("\n"),
                // formatter: `<i class="qi-100-fill"></i>`,
                // formatter: function(params) {
                //     // return `<i class="qi-100-fill"></i>`
                //     return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff"></span>`
                // },
                rich: weatherImgDaylistRich,
            },
            data: ["0", "1", "2", "3", "4", "5", "6","7"],
            axisPointer: {
                show: false,
            },
        },
        {
            type: "category",
            position: "top",
            offset: -85,
            boundaryGap: false,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{a|{value}°}"].join("\n"),
                rich: {
                    a: {
                        color: "#fff",
                    },
                },
            },
            data: weatherZgwdlist,
            axisPointer: {
                show: false,
            },
        },
        {
            type: "category",
            position: "bottom",
            offset: -88,
            boundaryGap: false,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{a|{value}°}"].join("\n"),
                rich: {
                    a: {
                        color: "#fff",
                    },
                },
            },
            data: weatherZdwdlist,
            axisPointer: {
                show: false,
            },
        },
    ],
    yAxis: {
        show: false,
        interval: 15,
        type: "value",
        axisLabel: {
            formatter: "{value}" + "℃",
        },
        max: maxWD,
        min: minWD,
    },
    series: [
        {
            name: "最高温度",
            type: "line",
            data: weatherZgwdlist,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: true,
            smooth: true,
            itemStyle: {
                color: "#FA8258", // 设置圆形的填充色
                borderColor: "#ffffff", // 设置边框颜色
                borderWidth: 1, // 设置边框宽度
            },
            lineStyle: {
                width: 2, // 设置折线的宽度
                color: "#FA8258", // 设置折线的颜色
                shadowColor: "#FA8258", // 线的阴影颜色
                shadowBlur: 5, // 线的阴影模糊级数
                shadowOffsetX: 0, // 线的阴影水平偏移
                shadowOffsetY: 5, // 线的阴影垂直偏移
            },
            silent: false,
        },
        {
            name: "最低温度",
            type: "line",
            data: weatherZdwdlist,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: true,
            smooth: true,
            itemStyle: {
                color: "#2E9AFE", // 设置圆形的填充色
                borderColor: "#ffffff", // 设置边框颜色
                borderWidth: 1, // 设置边框宽度
            },

            lineStyle: {
                width: 2, // 设置折线的宽度
                color: "#2E9AFE", // 设置折线的颜色
                shadowColor: "#2E9AFE", // 线的阴影颜色
                shadowBlur: 5, // 线的阴影模糊级数
                shadowOffsetX: 0, // 线的阴影水平偏移
                shadowOffsetY: 5, // 线的阴影垂直偏移
            },
            silent: false,
        },
    ],
};

onMounted(() => {
    setTimeout(()=>{
        initChart();
    },200)
});


// watch(
//     () => props.list,
//     (newValue, oldValue) => {
//         // if(newValue){
//         //     options.xAxis[0].data = newValue.map(item => item[1] + item[2])
//         //     options.series[0].data = newValue.map(item => Math.floor(item[3]))
//         // }
//         myChart.value.setOption(options);
//     }
// );

const initChart = () => {
    myChart.value = echarts.init(chartDom.value);
    myChart.value.setOption(options);
};


</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>