526互联

记录--用Echarts打造自己的天气预报！

发布时间 2023-07-13 18:17:52作者: 林恒

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

前言

最近刚刚学习了Echarts的使用，于是想做一个小案例来巩固一下。项目效果如下图所示：

话不多说，开始进入实战。

创建项目

这里我们使用vue-cli来创建脚手架： vue create app

这里的app是你要创建的项目的名称，进入界面我们选择安装VueRouter，然后就可以开始进行开发啦。

页面自适应实现

我们这个项目实现了一个页面自适应的处理，实现方式很简单，我利用了一个第三方的库，可以将项目中的px动态的转化为rem，首先我们要安装一个第三方的库 npm i lib-flexible 安装完成后，我们需要在 main.js中引入 import 'lib-flexible/flexible' 还要在项目中添加一个配置文件postcss.config.js，文件内容如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 37.5,
      "propList": ["*"]
    }
  }
}

上述代码是一个 PostCSS 的配置示例，用于自动添加 CSS 属性的前缀和将像素单位转换为 rem 单位。

其中

  • autoprefixer 是一个 PostCSS 插件，用于根据配置的浏览器兼容性自动添加 CSS 属性的前缀，以确保在不同浏览器中的兼容性。
  • postcss-pxtorem 是另一个 PostCSS 插件，用于将像素单位转换为 rem 单位，以实现页面在不同设备上的自适应效果。在上述配置中，rootValue 设置为 37.5，这意味着 1rem 会被转换为 37.5px。propList 设置为 ["*"] 表示所有属性都要进行转换。

这样，我们在项目中任何一个地方写px，都会动态的转化成为rem，由于rem是一个中相对于根元素字体大小的CSS单位，可以根据根元素的字体大小进行动态的调整，达到我们一个也买你自适应的目的。

实时时间效果实现

在项目的左上角有一个实时显示的时间，我们是如何做到的呢？首先我们在数据源中定义一个loalTime字段，用来装我们的时间，然后可以通过 new Date() 函数返回当前的时间对象，但这个对象我们是无法直接使用的，需要通过toLocaleTimeString() 函数处理，将 Date 对象转换为本地时间的格式化字符串。

methods{
    getLocalTime() {
      return new Date().toLocaleTimeString();
    },
}
仅仅是这样的话，我们获取的时间是不会动的，怎么让他动起来呢，答案是使用定时器：
created() {
    setInterval(() => {
      this.localTime = this.getLocalTime();
    }, 1000);
  },

我们使用了一个setInterval定时器函数，让他每秒钟触发一次，然后将返回的时间赋值给我们的数据源中的localTime，同时将他放在created这个生命周期中，确保一开始就能运行，这样，我们就得到了一个可以随当前时间变化的时间。

省市选择组件实现

这个功能自己实现较为麻烦，我们选择使用第三方的组件库，这里我们选择的是Vant，这是一个轻量级，可靠的移动端组件库，我们首先需要安装他

npm i vant@latest-v2 -S

由于我们使用Vue2进行开发，所以需要指定其版本，然后就是导入所以有组件：

import Vant from 'vant'; 
import 'vant/lib/index.css'; 
Vue.use(Vant);

由于我们只是在本地开发，所以我们选择导入所有组件，在正式开发中可以选择按需引入来达到性能优化的目的。

准备工作完毕，导入我们需要的组件：

<van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
  <van-area
    title="标题"
    :area-list="areaList"
    visible-item-count="4"
    @cancel="show = false"
    columns-num="2"
    @confirm="selectCity"
  />
</van-popup>

这里我们通过show的值来控制的组件的显示与否，点击确认按钮后，会执行selectVCity方法，该方法会将我们选择的省市返回，格式为一个包含地区编码和地区名称的一个对象数组。

天气信息的获取

我们获取天气的信息主要依靠高德地图提供的api来实现，高德地图为我们提供了很多丰富的地图功能，包括了实时天气和天气预报功能，首先我们要注册一下，成为开发者，并获取自己的密钥和key。

最后在index.html中引入：

<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '你的密钥',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>
就可以进行开发了。我们首先需要在项目开始加载的时候显示我们当地的信息，所以需要获取我们的当前所处环境的IP地址，所以高德也为我们提供了方法：
initMap() {
  let that = this;
  AMap.plugin("AMap.CitySearch", function () {
    var citySearch = new AMap.CitySearch();
    citySearch.getLocalCity(function (status, result) {
      if (status === "complete" && result.info === "OK") {
        // 查询成功，result即为当前所在城市信息
        // console.log(result.city);
        that.getWeatherData(result.city);
      }
    });
  });
},
通过AMap.CitySearch插件我们可以很容易的获取到我们当前的IP地址，然后将我们获取到的IP地址传入到getWeatherData() 方法中去获取天气信息，需要注意的是，因为要求项目一启动就获取信息，所以这个方法也是需要放在created这个生命周期中的。然后就是获取天气信息的方法：
getWeatherData(cityName) {
  let that = this;
  AMap.plugin("AMap.Weather", function () {
    //创建天气查询实例
    var weather = new AMap.Weather();

    //执行实时天气信息查询
    weather.getLive(cityName, function (err, data) {
      console.log(err, data);
      that.mapData = data;
    });

    //执行实时天气信息查询
    weather.getForecast(cityName, function (err, data) {
      that.futureMapData = data.forecasts;
      console.log(that.futureMapData);

      // 每天的温度
      that.seriesData = [];
      that.seriesNightData = [];
      data.forecasts.forEach((item) => {
        that.seriesData.push(item.dayTemp);
        that.seriesNightData.push(item.nightTemp);
      });

      that.$nextTick(() => {
        that.initEchart();
      });
    });
  });
},

通过这个方法，我们只需要传入城市名就可以很轻松的获取到我们需要的天气信息，并同步到我们的数据源中，然后将其渲染到页面中去。

数据可视化的实现

面对一堆枯燥的数据，我们很难提起兴趣，这时候，数据可视化的重要性就体现出来了，数据可视化是指使用图表、图形、地图、仪表盘等可视化工具将大量的数据转化为具有可读性和易于理解的图像形式的过程。通过数据可视化，可以直观地呈现数据之间的关系、趋势、模式和异常，从而帮助人们更好地理解和分析数据。

而Echarts就是这样一个基于 JavaScript 的开源可视化图表库，里面有非常多的图表类型可供我们使用，这里我们使用比较简单的折线统计图来展示数据。

首先也是安装依赖

npm i echarts

然后就是在项目中引入

import * as echarts from "echarts";

然后就可以进行开发啦，现在页面中准备好一个容器，方便承载我们的图表

<div class="echart-container" ref="echartContainer"></div>

然后就是根据我们获取到的数据进行绘制：

initEchart() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(this.$refs.echartContainer);

  // 绘制图表
  let option = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["今天", "明天", "后天", "三天后"],
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      min: "-10",
      max: "50",
      interval: 10,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: ["red", "green", "yellow"],
        },
      },
    },
    series: [
      {
        name: "白天温度",
        type: "line",
        data: this.seriesData,
      },
      {
        name: "夜间温度",
        type: "line",
        data: this.seriesNightData,
        lineStyle: {
          color: "red",
        },
      },
    ],
  };
  myChart.setOption(option);
},

一个图表中有非常多的属性可以控制它的不同形态，具体的不过多阐述，可以查看Echarts的参考文档，然后我们就得到一个非常美观的折线统计图。同时不能忘记和省市区选择器进行联动，当我们切换省市的时候，手动触发一次绘制，并且将我们选择的城市传入，这样，我们就得到了一个可以实时获取全国各地天气的小demo。

以上就是主要功能的具体实现方法：代码地址

本文转载于:

https://juejin.cn/post/7255161684526940220

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。