vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 数据可视化

Vue+ECharts+高德地图API实现天气预报数据可视化的教程

作者：一拾九

所谓数据可视化，我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比，走向，对于数据可视化，很多互联网公司是很看重这一块的，包括大厂，本就将给大家介绍如何通过Vue+ECharts+高德地图API实现天气预报数据可视化

前言

所谓数据可视化，我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比，走向。对于数据可视化，很多互联网公司是很看重这一块的，包括大厂；就比如阿里的淘宝，双十一的时候往往就需要将消费者的一些数据通过图的形式展现出来。接下来我们就来实现一个天气的数据可视化（移动端开发），看如下效果图（iPhone6/7/8）。

准备工作

开始（细分11步）

  //html
  <div class="container">
        <div class="nav">
            <div class="time">7:41</div>
            <div class="city">切换城市</div>
        </div>
  <div>
 //css
  .container {
    min-height: 100vh;
    background: #000;
    opacity: 0.7;
    color: #fff;
}
.nav {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}
 //html
 <div class="city-info">
            <p class="city">{{}}</p>
            <p class="weather">{{}}</p>
            <h2 class="temp">
                <em></em>℃
            </h2>
            <div class="detail">
                <span>风力：{{
                }}</span>|
                <span>风向：{{ }}</span>|
                <span>空气湿度：{{  }}</span>
            </div>
        </div>
        <div class="future">
            <div class="group" v-if="futureData.length > 0">
                明天：
                <span class="tm">白天:{{ }}℃ {{ 
                }} {{  }}风 {{ }} </span>
                <span class="tm"> 夜间:{{
                }}℃ {{  }} {{  }}风 {{ 
}}
                </span>
            </div>
            <div class="group" v-if="futureData.length > 0">
                后天：
                <span class="tm">白天:{{ }}℃ {{ 
                }} {{  }}风 {{  }} </span>
                <span class="tm"> 夜间:{{ 
                }}℃ {{  }} {{  }}风 {{ 
}}
                </span>
            </div>
        </div> 
//css
.city-info {
    text-align: center;
    .temp {
        font-size: 26px;
        em {
            font-size: 34px;
            font-style: normal;
        }
    }
}
.future {
    padding: 0 10px;
    margin-top: 30px;
    .group {
        height: 44px;
        line-height: 44px;
        background: rgba(255, 255, 255, 0.3);
        margin-bottom: 10px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 5px;
    }
}
//html
<div class="echart-container"> </div>
//css
.echart-container {
    width: 100%;
    height: 50vh;
}

将这段代码复制到onMounted的回调函数中，这样我们就能获取到定位信息。

把上图中的代码复制到获取天气的函数中，并将它放在获取定位成功后执行，传入定位的城市，这样就可以获得定位的城市的天气情况了。

weather.getForecast('cityName', function(err, data) {
console.log(err, data); });

注意：此时输出的未来天气是一个数组。

 const state = reactive({
            today: {},
            futureData: [],
        })
  state.today = data
  state.futureData = data.forecasts
   return {
            ...toRefs(state),
        }

 把数据放到页面上我理解的是挖坑然后埋数据，就像下面这样：

 <p class="city">{{ today.city }}</p>
 <p class="weather">{{ today.weather }}</p>

注意：由于futureData是一个数组，我们要在它放数据的div上加一个v-if="futureData.length > 0"，要不然会报错。

<div class="group" v-if="futureData.length > 0">
                明天：
<span class="tm">白天:{{ futureData[1].dayTemp }}℃ {{ futureData[1].dayWeather}} {{ futureData[1].dayWindDir }}风 {{ futureData[1].dayWindPower }} </span>
<span class="tm"> 夜间:{{ futureData[1].nightTemp }}℃ {{ futureData[1].nightWeather }} {{ futureData[1].nightWindDir }}风 {{ futureData[1].nightWindPower
}}
                </span>
            </div>

定义一个方法initEchart来完成图的绘制（这里定义了一个空数组来获取未来几天的温度）

  const tempArr = ref([])
   data.forecasts.forEach(item => {
                        tempArr.value.push(item.dayTemp)
                    })
  const echartContainer = ref(null)
  const initEchart = () => {
            const myChat = echarts.init(echartContainer.value);
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['今天', '明天', '后天', '大后天'],
                    lineStyle: {
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        data: tempArr.value,
                        type: 'line'
                    }
                ]
            };
            myChat.setOption(option)
        }
   return {
            echartContainer
        }

别忘了在装这幅图的div上挂一个ref="echartContainer"哟。

这样就能帮我们初始化一个折线图了。

部分代码

<script>
import { toRefs, watchEffect, reactive, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
export default {
    setup() {
        const echartContainer = ref(null)
        const state = reactive({
            today: {},
            futureData: [],
        })
        const tempArr = ref([])
        onMounted(() => {
            //1.获取定位
            AMap.plugin('AMap.CitySearch', function () {
                var citySearch = new AMap.CitySearch()
                citySearch.getLocalCity(function (status, result) {
                    // console.log(status);
                    if (status === 'complete' && result.info === 'OK') {
                        // 查询成功，result即为当前所在城市信息
                        //console.log(result.city);
                        getWeather(result.city)
                    }
                })
            })
        })
        const getWeather = (cityName) => {
            //加载天气查询插件
            AMap.plugin('AMap.Weather', function () {
                //创建天气查询实例
                var weather = new AMap.Weather();
                //执行实时天气信息查询
                weather.getLive(cityName, function (err, data) {
                    console.log(err, data);
                    state.today = data
                });
                //未来的天气
                weather.getForecast(cityName, function (err, data) {
                    console.log(err, data);
                    state.futureData = data.forecasts
                    data.forecasts.forEach(item => {
                        tempArr.value.push(item.dayTemp)
                    })
                    initEchart()
                });
            });
        }
        const initEchart = () => {
            const myChat = echarts.init(echartContainer.value);
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['今天', '明天', '后天', '大后天'],
                    lineStyle: {
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        data: tempArr.value,
                        type: 'line'
                    }
                ]
            };
            myChat.setOption(option)
        }
        return {
            ...toRefs(state),
            echartContainer
        }
    }
}
</script>

结语

ECharts中的一些图表是很好用的，我们可以自己动手多去尝试尝试。未来的学习之旅还很长，对于数据的可视化我们还可以做成3D的效果。本文如有错失，欢迎大家指正，最后感谢大家的观看，点个免费的赞吧❤️。

以上就是Vue+ECharts+高德地图API实现天气预报数据可视化的教程的详细内容，更多关于Vue+ECharts+高德地图API 数据可视化的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文