用echarts画天气预报

如图

上代码

<template><div id="temp15day"></div>
</template><script setup>
import * as echarts from "echarts";
const initChart = () => {const machart = echarts.init(document.getElementById("temp15day"));var option = {grid: {show: true,backgroundColor: 'transparent',opacity: 0.3,borderWidth: '0',top: '220',bottom: '1%'},tooltip: {trigger: 'axis'},legend: {show: false},xAxis: [// 星期{type: 'category', // 类型为类目轴，适用于离散数据boundaryGap: false, // 不留空白，线条从第一个点开始position: 'top', // 位置在顶部offset: 133, // 与图表上边缘的距离zlevel: 100, // z轴层级，用于控制显示顺序axisLine: {show: false // 不显示坐标轴线},axisTick: {show: false // 不显示刻度线},axisLabel: {interval: 0, // 每个标签都显示formatter: ['{a|{value}}' // 使用 rich text 格式化标签].join('\n'), // 换行符rich: {a: {// color: 'white', // 标签颜色fontSize: 14 // 字体大小}}},nameTextStyle: { // 名称文本样式，当前为空},data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]},// 日期{type: 'category', // 同样是类目轴boundaryGap: false, // 不留空白position: 'top', // 位置在顶部offset: 110, // 与图表上边缘的距离zlevel: 100, // z轴层级axisLine: {show: false // 不显示坐标轴线},axisTick: {show: false // 不显示刻度线},axisLabel: {interval: 0, // 每个标签都显示formatter: ['{a|{value}}' // 使用 rich text 格式化标签].join('\n'), // 换行符rich: {a: {// color: 'white', // 标签颜色fontSize: 14 // 字体大小}}},// nameTextStyle: {//     fontWeight: 'bold', // 字体加粗//     fontSize: 19 // 字体大小// },data: ["25日", "26日", "27日", "28日", "29日", "30日", "31日"]},// 天气图标{type: 'category',boundaryGap: false,//不留空白，数据点从第一个点开始position: 'top',//将坐标轴放置在图表的顶部。offset: 40,//设置坐标轴与图表上边缘的距离。zlevel: 100,//设置层级，使该坐标轴在其他元素之上显示。axisLine: {show: false//不显示坐标轴线。},axisTick: {show: false//不显示刻度线。},axisLabel: {interval: 0,//所有标签都会显示formatter: function (value, index) {return '{' + index + '| }\n{b|' + value + '}'// 签格式为 '{index| }\n{b|value}'，其中 {index| } 用于显示天气图标，{b|value} 用于显示天气名称。},rich: {// rich: 定义每个标签的样式。// 0 到 6: 每个索引对应不同的天气图标，设置了背景图片（例如小雨、阴、多云等），每个图标大小为 40x40 像素。// b: 定义天气状态文字的样式，包括字体大小和行高。0: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/小雨.png'},height: 40,width: 40},1: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/小雨.png'},height: 40,width: 40},2: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/阴.png'},height: 40,width: 40},3: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/小雨.png'},height: 40,width: 40},4: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/多云.png'},height: 40,width: 40},5: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/小雨.png'},height: 40,width: 40},6: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/小雨.png'},height: 40,width: 40},b: {// color: 'white',fontSize: 12,lineHeight: 30,height: 20}}},// nameTextStyle: {//     fontWeight: 'bold',//     fontSize: 14// },// data: this.weatherdata.weatherdata: ['', '', '', '', '', '', '']// data: ["小雨", "小雨", "阴", "小雨", "多云", "小雨", "小雨"]},  // 风力风向{type: 'category',boundaryGap: false,position: 'top',offset: 50,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: ['{a|{value}}'].join('\n'),rich: {img: {backgroundColor: {image: 'https://example.com/icon.png' // 替换为你的图标URL},width: 16,height: 16,align: 'center'},a: {// color: 'white',fontSize: 12}}},nameTextStyle: {},data: ["3-4级", "<4级", "3-4级", "3-4级", "3-4级", "3-4级", "3-4级"]},// 空气质量{type: 'category',boundaryGap: false,position: 'top',offset: 20,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: ['{a|{value}}'].join('\n'),rich: {'优': {backgroundColor: '#388E3C', // 深绿色color: 'white',padding: [4, 8],borderRadius: 4,fontSize: 12},'良': {backgroundColor: '#A5D6A7', // 浅绿色color: 'white',padding: [4, 8],borderRadius: 4,fontSize: 12}}},data: ["优", "良", "良", "良", "良", "良", "良"]},],yAxis: {type: 'value',show: false,//控制是否显示纵坐标轴axisLabel: {//设置纵坐标轴的标签样式。formatter: '{value} °C',color: 'white'//设置纵坐标轴标签的颜色为白色}},series: [{name: '最高气温',type: 'line', // 系列类型，这里是折线图data: ["16.3", "16.2", "17.6", "14.2", "17.6", "15.7", "14.3"], // 数据点symbol: 'emptyCircle', // 数据点的形状symbolSize: 10, // 数据点的大小showSymbol: true, // 显示数据点smooth: true, // 折线是否平滑itemStyle: { // 数据点样式normal: {color: '#C95843' // 数据点的颜色}},label: { // 数据标签show: true, // 是否显示position: 'top', // 标签位置formatter: '{c} °C' // 标签内容，这里显示温度},lineStyle: { // 折线样式width: 1, // 线宽// color: 'white' // 线颜色（这里注释掉了）},areaStyle: { // 区域样式（通常用于填充区域）opacity: 1, // 透明度color: 'transparent' // 填充颜色（这里是透明的）}},{name: '最低气温',type: 'line',data: ["13.4", "12.8", "13.5", "12.5", "12.4", "13.2", "13"],symbol: 'emptyCircle', // 数据点的形状symbolSize: 10, // 数据点的大小showSymbol: true, // 显示数据点smooth: true, // 折线是否平滑itemStyle: { // 数据点样式normal: {color: 'blue' // 数据点的颜色}},label: {// 数据标签show: true, // 是否显示position: 'bottom', // 标签位置formatter: '{c} °C' // 标签内容// color: 'white',},lineStyle: { // 折线样式width: 1, // 线宽// color: 'white' // 线颜色},areaStyle: { // 区域样式opacity: 1, // 透明度color: 'transparent' // 填充颜色（这里是透明的）}},]}machart.setOption(option);
};
setTimeout(() => {initChart();
}, 800);
</script><style scoped>
#temp15day {width: 100%;height: 45vh;
}
</style>

 vue3写的，直接粘过去就可以用

改了天气的图标

    0: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/晴.png'},height: 40,width: 40},1: {backgroundColor: {image: 'https://d.scggqx.com/forecast/img/大雨.png'},height: 40,width: 40},

如下