当前位置：首页 > news >正文

分享天气预报走势图和未来7日预报静态HTML

news 2025/9/24 10:48:32

挺漂亮的一个页面, 点击预览效果
在这里插入图片描述

HTML部分, 复制下来另存为HTML就可以运行看效果了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>易客云天气API</title>
<!-- 引入Tailwind CSS --><script src="https://cdn.tailwindcss.com"></script>
</head>
<body><div id="app"><main class="grid grid-cols-1 lg:grid-cols-3 gap-6"><!-- 温度图表卡片 --><div class="lg:col-span-2 bg-white rounded-xl p-5 card-shadow transition-all duration-300 hover:shadow-lg"><div class="flex justify-between items-center mb-4"><h2 class="text-lg font-semibold text-gray-800">北京温度趋势图</h2><div class="text-sm text-gray-500 flex items-center"><i class="fa fa-refresh mr-1"></i><span id="updateTime">更新于: 2025-09-22 20:27:26</span></div></div><div class="h-[350px] md:h-[400px] w-full"><div id="temperatureChart" class="w-full h-full" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;" _echarts_instance_="ec_1758545625665"></div></div></div><!-- 天气信息卡片 --><div class="bg-white rounded-xl p-5 card-shadow transition-all duration-300 hover:shadow-lg"><h2 class="text-lg font-semibold text-gray-800 mb-2">北京今日天气</h2><div><!-- 今日概览 --><div class="text-center p-4"><div class="flex justify-center items-center space-x-4 my-3"><img class="mb-3" style="width: 45px; height: 45px; " src="http://dps.tianqiapi.com/static/skin/yike/yin.png"><div><div class="text-3xl font-bold text-gray-800">18.8°</div><div class="text-gray-500 text-sm">阴</div></div></div><div class="text-sm text-gray-600">少云。 最高 21°C。 南 风 10 到 15 每 km / h 。</div></div></div><!--湿度--><div class="flex justify-between items-center p-3 mb-3 bg-gray-50 rounded-xl" data-doubao-line="137" data-doubao-column="21" data-doubao-key="43"><div class="flex items-center text-gray-600" data-doubao-line="138" data-doubao-column="25" data-doubao-key="44"><i class="fa fa-tint text-cool mr-2" data-doubao-line="139" data-doubao-column="29" data-doubao-key="45"></i><span data-doubao-line="140" data-doubao-column="29" data-doubao-key="46">湿度</span></div><span class="font-medium" data-doubao-line="142" data-doubao-column="25" data-doubao-key="47">70%</span></div><!--./湿度--><!--紫外线--><div class="flex justify-between items-center p-3 mb-3 bg-gray-50 rounded-xl" data-doubao-line="153" data-doubao-column="21" data-doubao-key="53"><div class="flex items-center text-gray-600" data-doubao-line="154" data-doubao-column="25" data-doubao-key="54"><i class="fa fa-umbrella text-secondary mr-2" data-doubao-line="155" data-doubao-column="29" data-doubao-key="55"></i><span data-doubao-line="156" data-doubao-column="29" data-doubao-key="56">紫外线</span></div><span class="font-medium text-accent" data-doubao-line="158" data-doubao-column="25" data-doubao-key="57">中等</span></div><!--./紫外线--><!--item3--><div class="flex justify-between items-center p-3 mb-3 bg-gray-50 rounded-xl" data-doubao-line="161" data-doubao-column="21" data-doubao-key="58"><div class="flex items-center text-gray-600" data-doubao-line="162" data-doubao-column="25" data-doubao-key="59"><i class="fa fa-cloud text-neutral mr-2" data-doubao-line="163" data-doubao-column="29" data-doubao-key="60"></i><span data-doubao-line="164" data-doubao-column="29" data-doubao-key="61">降雨概率</span></div><span class="font-medium" data-doubao-line="166" data-doubao-column="25" data-doubao-key="62">1%</span></div><!--./item3--><!-- 提示 --><div class="p-3 bg-blue-50 rounded-lg border border-blue-100"><h3 class="font-medium text-primary mb-2 flex items-center"><i class="fa fa-lightbulb-o mr-2"></i>温馨提示</h3><p class="text-sm text-gray-600">建议穿薄外套或牛仔裤等服装。</p></div><!-- ./提示 --></div><!-- 7日天气列表 --><div class="lg:col-span-3 bg-white rounded-xl p-5 mb-6 card-shadow transition-all duration-300 hover:shadow-lg"><h2 class="text-lg font-semibold text-gray-800 mb-4">北京未来天气</h2><div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-7 gap-4"><!-- 每日天气卡片 - 动态生成 --><div class="bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200"><div class="font-medium">2025-09-22</div><div class="text-sm text-gray-500 mb-2">星期一</div><img class="mb-3" style="width: 30px; height: 30px; margin: 0 auto 0.75rem;" src="http://dps.tianqiapi.com/static/skin/yike/yin.png"><div class="text-sm text-gray-600 mb-2">阴</div><div class="flex justify-center items-center gap-2"><span class="text-warm">17°</span><span class="text-gray-300">/</span><span class="text-cool">21°</span></div><div class="text-xs text-gray-500 mt-2"><i class="fa fa-tint mr-1"></i>70%</div><div class="text-xs text-gray-500"><i class="fa fa-wind mr-1"></i>南风3-4级转&lt;3级</div></div><div class="bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200"><div class="font-medium">2025-09-23</div><div class="text-sm text-gray-500 mb-2">星期二</div><img class="mb-1" style="width: 30px; height: 30px; margin: 0 auto 0.75rem;" src="http://dps.tianqiapi.com/static/skin/yike/yun.png"><div class="text-sm text-gray-600 mb-2">小雨转多云</div><div class="flex justify-center items-center gap-2"><span class="text-warm">14°</span><span class="text-gray-300">/</span><span class="text-cool">21°</span></div><div class="text-xs text-gray-500 mt-2"><i class="fa fa-tint mr-1"></i>71%</div><div class="text-xs text-gray-500"><i class="fa fa-wind mr-1"></i>南风&lt;3级</div></div><div class="bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200"><div class="font-medium">2025-09-24</div><div class="text-sm text-gray-500 mb-2">星期三</div><img class="mb-1" style="width: 30px; height: 30px; margin: 0 auto 0.75rem;" src="http://dps.tianqiapi.com/static/skin/yike/qing.png"><div class="text-sm text-gray-600 mb-2">晴</div><div class="flex justify-center items-center gap-2"><span class="text-warm">15°</span><span class="text-gray-300">/</span><span class="text-cool">28°</span></div><div class="text-xs text-gray-500 mt-2"><i class="fa fa-tint mr-1"></i>56%</div><div class="text-xs text-gray-500"><i class="fa fa-wind mr-1"></i>西南风&lt;3级</div></div><div class="bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200"><div class="font-medium">2025-09-25</div><div class="text-sm text-gray-500 mb-2">星期四</div><img class="mb-1" style="width: 30px; height: 30px; margin: 0 auto 0.75rem;" src="http://dps.tianqiapi.com/static/skin/yike/qing.png"><div class="text-sm text-gray-600 mb-2">晴</div><div class="flex justify-center items-center gap-2"><span class="text-warm">16°</span><span class="text-gray-300">/</span><span class="text-cool">28°</span></div><div class="text-xs text-gray-500 mt-2"><i class="fa fa-tint mr-1"></i>40%</div><div class="text-xs text-gray-500"><i class="fa fa-wind mr-1"></i>南风&lt;3级</div></div><div class="bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200"><div class="font-medium">2025-09-26</div><div class="text-sm text-gray-500 mb-2">星期五</div><img class="mb-1" style="width: 30px; height: 30px; margin: 0 auto 0.75rem;" src="http://dps.tianqiapi.com/static/skin/yike/yun.png"><div class="text-sm text-gray-600 mb-2">多云</div><div class="flex justify-center items-center gap-2"><span class="text-warm">17°</span><span class="text-gray-300">/</span><span class="text-cool">27°</span></div><div class="text-xs text-gray-500 mt-2"><i class="fa fa-tint mr-1"></i>45%</div><div class="text-xs text-gray-500"><i class="fa fa-wind mr-1"></i>南风&lt;3级</div></div><div class="bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200"><div class="font-medium">2025-09-27</div><div class="text-sm text-gray-500 mb-2">星期六</div><img class="mb-1" style="width: 30px; height: 30px; margin: 0 auto 0.75rem;" src="http://dps.tianqiapi.com/static/skin/yike/yun.png"><div class="text-sm text-gray-600 mb-2">小雨转多云</div><div class="flex justify-center items-center gap-2"><span class="text-warm">16°</span><span class="text-gray-300">/</span><span class="text-cool">25°</span></div><div class="text-xs text-gray-500 mt-2"><i class="fa fa-tint mr-1"></i>54%</div><div class="text-xs text-gray-500"><i class="fa fa-wind mr-1"></i>西南风&lt;3级</div></div><div class="bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200"><div class="font-medium">2025-09-28</div><div class="text-sm text-gray-500 mb-2">星期日</div><img class="mb-1" style="width: 30px; height: 30px; margin: 0 auto 0.75rem;" src="http://dps.tianqiapi.com/static/skin/yike/yun.png"><div class="text-sm text-gray-600 mb-2">多云转晴</div><div class="flex justify-center items-center gap-2"><span class="text-warm">15°</span><span class="text-gray-300">/</span><span class="text-cool">28°</span></div><div class="text-xs text-gray-500 mt-2"><i class="fa fa-tint mr-1"></i>42%</div><div class="text-xs text-gray-500"><i class="fa fa-wind mr-1"></i>北风&lt;3级</div></div></div></div></main></div><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/6.0.0/echarts.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>document.addEventListener('DOMContentLoaded', function() {initTemperatureChart();});// 未来7天的天气数据const weatherData = {days: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],dates: ['2025-09-22', '2025-09-23', '2025-09-24', '2025-09-25', '2025-09-26', '2025-09-27', '2025-09-28'],highTemp: [24, 21, 28, 28, 28, 27, 27],lowTemp: [17, 14, 15, 16, 17, 16, 15],weather: ['晴', '小雨转多云', '晴', '晴', '多云', '小雨转多云', '多云转晴'],icons: ['sun-o', 'cloud-sun-o', 'cloud', 'cloud', 'cloud', 'cloud-rain', 'sun-o'],humidity: [45, 50, 55, 65, 70, 85, 40],wind: ['3级', '3-4级', '4级', '4-5级', '3级', '3-4级', '2级']};// 初始化ECharts图表function initTemperatureChart() {// 获取图表容器const chartDom = document.getElementById('temperatureChart');const myChart = echarts.init(chartDom);// 配置图表const option = {backgroundColor: 'transparent',tooltip: {trigger: 'axis',backgroundColor: 'rgba(255, 255, 255, 0.9)',borderColor: '#eee',borderWidth: 1,textStyle: { color: '#333' },formatter: function(params) {let param = params[0];return `<div class="font-medium">${weatherData.dates[param.dataIndex]}</div><div>最高温度: ${weatherData.highTemp[param.dataIndex]}°C</div><div>最低温度: ${weatherData.lowTemp[param.dataIndex]}°C</div><div>天气: ${weatherData.weather[param.dataIndex]}</div>`;}},legend: {data: ['最高温度', '最低温度'],top: 0,textStyle: { color: '#666' }},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: weatherData.days.map((day, i) => `${weatherData.days[i]}`),axisLine: {lineStyle: {color: '#ddd'}},position: 'top',axisLabel: {lineHeight: 30,color: '#666',rich: {// 模板1：美食图标（本地/在线图片均可，此处用在线图标）icon_qing: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/qing.png' // 图标地址}},icon_yun: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/yun.png' // 图标地址}},icon_yin: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/yin.png' // 图标地址}},icon_lei: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/lei.png' // 图标地址}},icon_xue: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/xue.png' // 图标地址}},icon_shachen: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/shachen.png' // 图标地址}},icon_wu: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/wu.png' // 图标地址}},icon_bingbao: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/bingbao.png' // 图标地址}},icon_yu: {width: 25, // 图标宽度height: 25, // 图标高度backgroundColor: {image: 'http://dps.tianqiapi.com/static/skin/yike/yu.png' // 图标地址}}},// 2. 调用 rich 模板，组合“图标+文字”formatter: function(value) {// 根据 X 轴数据（value）匹配对应的图标模板switch (value) {case '星期一':return '2025-09-22\n{icon_qing|}\n晴\n';case '星期二':return '2025-09-23\n{icon_yun|}\n小雨转多云\n';case '星期三':return '2025-09-24\n{icon_qing|}\n晴\n';case '星期四':return '2025-09-25\n{icon_qing|}\n晴\n';case '星期五':return '2025-09-26\n{icon_yun|}\n多云\n';case '星期六':return '2025-09-27\n{icon_yun|}\n小雨转多云\n';case '星期日':return '2025-09-28\n{icon_yun|}\n多云转晴\n';default:return value;}},// 标签横向对齐（避免图标偏移）align: 'center'}}, {type: 'category',boundaryGap: false,data: weatherData.days.map((day, i) => `${weatherData.days[i]}`),axisLine: {lineStyle: {color: '#ddd'}},position: 'bottom',axisLabel: {lineHeight: 20,color: '#666'}}, ],yAxis: {type: 'value',name: '',nameTextStyle: { color: '#666' },axisLine: {lineStyle: { color: '#ddd' }},splitLine: {lineStyle: { color: '#f0f0f0' }},axisLabel: {formatter: '{value}',color: '#666'},min: function(value) {return value.min - 2; // 最小值向下调整2度},max: function(value) {return value.max + 2; // 最大值向上调整2度}},series: [{name: '最高温度',type: 'line',data: weatherData.highTemp,symbol: 'circle',symbolSize: 8,lineStyle: {width: 3,color: '#F56C6C' // 暖色调},itemStyle: {color: '#F56C6C',borderWidth: 2,borderColor: '#fff',shadowBlur: 4,shadowColor: 'rgba(245, 108, 108, 0.5)'},emphasis: {scale: true,symbolSize: 10},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(245, 108, 108, 0.3)' },{ offset: 1, color: 'rgba(245, 108, 108, 0)' }])}},{name: '最低温度',type: 'line',data: weatherData.lowTemp,symbol: 'circle',symbolSize: 8,lineStyle: {width: 3,color: '#4E5BA6' // 冷色调},itemStyle: {color: '#4E5BA6',borderWidth: 2,borderColor: '#fff',shadowBlur: 4,shadowColor: 'rgba(78, 91, 166, 0.5)'},emphasis: {scale: true,symbolSize: 10},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(78, 91, 166, 0.3)' },{ offset: 1, color: 'rgba(78, 91, 166, 0)' }])}}]};// 设置图表配置项myChart.setOption(option);// 响应窗口大小变化window.addEventListener('resize', function() {myChart.resize();});}</script>
</body></html>