用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.weather
data: ['', '', '', '', '', '', '']
// 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
},如下
