echart实现天气预报

于 2025-06-10 09:08:07 发布
阅读量34 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript 前端 vue.js
原文链接：https://www.jb51.net/article/226364.htm

用的是腾讯天气预报的接口，vue项目需要代理，如果接口请求通了，图片不显示，在html页面加上<meta name="renderer" content="webkit" />标签

https://i.news.qq.com/weather/common?source=pc&weather_type=observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise&province=浙江省&city=宁波市&county=

echart实现部分 

 <div id="main" style="width: 100%; height:450px;"></div>

let myChart= ref(null);
var option;
function initEchart(){
   //销毁
   if(myChart.value){
      myChart.value.dispose();
   }
   myChart.value = echarts.init(document.getElementById('main'));
   
 option = {
        grid: {
         //  show: true,
         //  backgroundColor: 'transparent',
         //  opacity: 0.3,
         //  borderWidth: '0',
            top: '130',
            left:30,
            right:30,
           bottom: '0'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: false
        },
        xAxis: [
          // 日期
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: 100,
            //zlevel: 100,
            axisLine: {
              show: false,
               lineStyle: {
                  color:'#2B2B2B'
               }
            },
            axisTick: {
              show: false
            },
            // axisLabel: {
            //   interval: 0,
            //   formatter: [
            //     '{a|{value}}'
            //   ].join('\n'),
            //   rich: {
            //     a: {
            //       // color: 'white',
            //       fontSize: 18
            //     }
            //   }
            // },
            // nameTextStyle: {

            // },
            data: ["25日","26日","27日","28日","29日","30日","31日"]
          },
          // 星期
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: 80,
           // zlevel: 100,
            axisLine: {
              show: false,
              lineStyle: {
                  color:'#2B2B2B'
               }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: [
                '{a|{value}}'
              ].join('\n'),
              rich: {
                a: {
                  // color: 'white',
                  fontSize: 14
                }
              }
            },
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: 19
            },
            data: ["周一","周二","周三","周四","周五","周六","周日"]
          },
          // 天气图标
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: 40,
            //zlevel: 100,
            axisLine: {
              show: false,
              lineStyle: {
                  color:'#2B2B2B'
               }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: function(value, index) {
                return '{' + index + '| }\n{b|' + value + '}'
              },
              rich: {
                0: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                    height: 30,
                  width: 30
                },
                1: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                    height: 30,
                  width: 30
                },
                2: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/阴.png'
                  },
                   height: 30,
                  width: 30
                },
                3: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                    height: 30,
                  width: 30
                },
                4: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/多云.png'
                  },
                    height: 30,
                  width: 30
                },
                5: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                    height: 30,
                  width: 30
                },
                6: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                   height: 30,
                  width: 30
                },
               //  b: {
               //    // color: 'white',
               //    fontSize: 12,
               //    lineHeight: 30,
               //    height: 20
               //  }
              }
            },
            // nameTextStyle: {
            //   fontWeight: 'bold',
            //   fontSize: 19
            // },
            // data: this.weatherdata.weather
            data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
          },
         {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: 10,
            axisLine: {
              show: false,
              lineStyle: {
                  color:'#2B2B2B'
               }
            },
            axisTick: {
              show: false
            },
            data: ["西风1-3","东北风1-3","西风1-3","西风1-3","西风1-3","西风1-3","西风1-3"]
          },
          {
            type: 'category',
            boundaryGap: false,
            position: 'bottom',
            offset: -150,
            axisLine: {
              show: false,
              lineStyle: {
                  color:'#2B2B2B'
               }
            },
            axisTick: {
              show: false
            },
            data: ["西风1-3","东北风1-3","西风1-3","西风1-3","西风1-3","西风1-3","西风1-3"]
          },
          // 天气图标
          {
            type: 'category',
            boundaryGap: false,
            position: 'bottom',
            offset: -200,
            //zlevel: 100,
            axisLine: {
              show: false,
              lineStyle: {
                  color:'#2B2B2B'
               }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: function(value, index) {
                return '{' + index + '| }\n{b|' + value + '}'
              },
              rich: {
                0: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                   height: 30,
                  width: 30
                },
                1: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                    height: 30,
                  width: 30
                },
                2: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/阴.png'
                  },
                   height: 30,
                  width: 30
                },
                3: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                   height: 30,
                  width: 30
                },
                4: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/多云.png'
                  },
                    height: 30,
                  width: 30
                },
                5: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                   height: 30,
                  width: 30
                },
                6: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: 30,
                  width: 30
                },
               //  b: {
               //    // color: 'white',
               //    fontSize: 12,
               //    lineHeight: 30,
               //    height: 20
               //  }
              }
            },
            // nameTextStyle: {
            //   fontWeight: 'bold',
            //   fontSize: 19
            // },
            // data: this.weatherdata.weather
            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: 'green'
              }
            },
            label: {
              show: true,
              position: 'top',
              // color: 'white',
              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: 'circle',
            symbolSize: 10,
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: 'blue'
              }
            },
            label: {
              show: true,
              position: 'bottom',
              // color: 'white',
              formatter: '{c} °C'
            },
            // lineStyle: {
            //   width: 1,
            //   // color: 'white'
            // },
            // areaStyle: {
            //   opacity: 1,
            //   color: 'transparent'
            // }
          }
        ]
      }

   myChart.value.setOption(option);
}

 

佳小宝
关注
使用Echarts制作定制化天气预报
loop_git667的博客
09-26 508
天气预报是人们日常生活中非常重要的一部分，而在现代化的网页应用中，将天气预报以直观、美观的方式展示给用户是一项常见的需求。在前端开发中，Echarts是一个功能强大且易于使用的可视化库，它能够帮助我们以图表的形式展示数据。总结起来，通过使用Echarts库，我们可以轻松地制作出定制化的天气预报界面。首先，我们需要准备好所需的HTML和JavaScript文件，并引入Echarts库。在图表的配置选项中，我们设置了标题的文本和样式，x轴和y轴的类型，以及系列数据的类型和值。函数分别提取出日期和温度的数组。
Echarts 利用多X轴实现未来15天天气预报
grootbaby
03-22 1395
通过设置 grid.top 和 grid.bottom 设置白天和夜间天气展示区域。 Echarts 利用多X轴实现未来15天天气预报
eCharts实现七天天气预报（整合）
qq_34965759的博客
04-19 1379
先获取天气数据再渲染echarts，不然会因为数据为空无法正常显示，以上代码全部在methods中，mounted中只需跑一下this.getWeather即可。data中定义screenWidth和screenHeight，使用windows.onresize来实时监听浏览器变化。因为原博主没有提供天气预报接口说明级icon素材包，故在此整合完整的流程，包含天气预报数据获取及数据处理。key就是在和风控制台中生成的项目key，需要点击查看。进入控制台，注册项目，选择免费版。下面代码拿着直接可用，
Echarts利用多X轴实现七天天气预报效果
FengChSvip的博客
10-25 8176
Echarts利用多X轴实现七天天气预报效果UI设计图Echarts示例效果前言示例代码最终效果 UI设计图 Echarts示例效果 前言 对于UI给出的设计图，各个气象网站都有类似的效果，实现效果大都可归为两种： 网格布局+图表框架绘制温度曲线； 网格布局+canvas自绘温度曲线； 这两种实现方式的共同点都是将曲线和上面的描述文字拆分开来，这样做重点是要实现上面日期和下面气温曲线两个部分的自适应对齐。因为我CSS经验相对比较薄弱，并且个人使用Echarts图表框架相对较多。查看文档发现Echar
Echart 制作未来7天天气预报图
weixin_42353499的博客
01-18 1931
从彩云天气获取数据，试用echarts绘制天气预报图表
echats实现天气预报+折线（转载）
As_Xx_Ls的博客
02-10 4838
使用echarts绘制天气预报折线
使用mui和echart实现天气预报信息展示
在一个移动端应用中，想要实现天气预报功能，我们可以利用mui框架构建用户界面，并在其中嵌入ECharts图表库来展示天气数据。首先，通过mui提供的HTTP请求功能（或者Ajax等其他方式）调用天气API，获取天气数据。...
mui+echart+天气预报
10-04
跨域得到天气预报信息，然后利用 mui+echart+天气预报
仿百度天气预报样式的echart静态html实例
05-25
**标题详解：** "仿百度天气预报样式的echart静态html实例" 这个标题指出，我们将会讨论一个使用ECharts图表库创建的HTML页面，该页面模仿了百度天气预报的样式。ECharts是一个由百度开发的开源JavaScript图表库，...
echarts天气预报
liu_liYao的博客
08-10 2175
实现效果如图： echarts官网地址：天气预报 原数据 需要更改数据结构 handleCommon() { // 可以引入多个icon var weatherIcons = { Sunny: './data/asset/img/weather/sunny_128.png', Cloudy: './data/asset/img/weather/cloudy_128.png', Showers: './data/asset/img/weath
记录--手把手教你Vue+ECharts+高德地图API实现天气预报数据可视化
林恒的博客
06-03 3152
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 所谓数据可视化，我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比，走向。对于数据可视化，很多互联网公司是很看重这一块的，包括大厂；就比如阿里的淘宝，双十一的时候往往就需要将消费者的一些数据通过图的形式展现出来。接下来我们就来实现一个天气的数据可视化(移动端开发)，看如下效果图(iPhone6/7/8)。 准备工作 ...
如何用echarts搭建天气图表
最新发布
小李在努力学习
12-23 1188
显示7天内的天气预报，如果是当天的温度，要显示不同的图标。1.新建div绑定id，设置dom的宽高。2.设置好七天的数据，目前只是测试数据。如何用echarts搭建天气图表。3.在vue中定义数据。4.创建init方法。
echarts实现七天天气预报
preoccupied_的博客
12-25 1277
【代码】echarts实现七天天气预报。
用echarts画天气预报
weixin_47194802的博客
10-10 828
vue3写的，直接粘过去就可以用。
HTML+Echarts+json实现图形化城市天气预报
糖果π
09-13 1157
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btn{ width: 160px; height: 50px; } .dis{ width:..
Echarts实现双排图片天气预报，包含最低气温及最高气温加风向
m0_45256829的博客
10-25 1506
该echarts图表用于展示七天天气数据，（包含最高气温、最低气温、天气对应的天气图标展示，图表可自行替换本地图片、包含风向和风力强度）
Flask+echarts爬取天气预报数据并实现可视化
qq_52431815的博客
03-25 1417
右键新建一个flask01.py的文件，对爬取到的数据进行读取，并转换为列表类型，传递给index.html页面，echarts的图表样例负责接收并渲染，代码如下，在根目录下，新建一个名为templates目录，该目录名为默认的页面存储路径，不可拼错和随意修改，是固定的，然后右键创建一个index.html的文件，代码如下，右键新建一个crawl.py文件，代码如下，将爬取到的数据存储到tianqi.txt文件中，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值