在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

VUE+Echarts調(diào)用天氣API顯示近日天氣情況

一、引入依賴

在這里你可以使用很多前端框架調(diào)用echarts，我的項(xiàng)目是vue端app程序，所以在這里就用vue方式引入echarts

1.npm安裝

npm install echarts --save
2.Echarts的模板

因?yàn)橐谝粋€頁面切換選項(xiàng)卡完成不同表格的顯示，所以在這里使用一個vue文件，這樣就可以根據(jù)不同選項(xiàng)卡的點(diǎn)擊來個Echarts的options切換數(shù)據(jù)



<template>
  <div ref="myChart"></div>
</template>


<script>
  export default {
    name: 'echarts',
    props: ['type', 'width', 'height', 'options'],
    data() {
      return {
        init: false,
        opts: null
      }
    },
    watch: {
      opts(val) {
        let echarts = require('echarts/lib/echarts')
        require('./echartsStyle')
        require('echarts/lib/chart/bar')
        require('echarts/lib/chart/line')
        require('echarts/lib/chart/pie')
        require('echarts/lib/chart/radar')
        require('echarts/lib/chart/funnel')
        require('echarts/lib/chart/gauge')
        require('echarts/lib/chart/map')
        require('echarts/lib/component/tooltip')
        require('echarts/lib/component/title')
        require('echarts/lib/component/legend')
        let myChart;
        if (this.init) {
          myChart = echarts.getInstanceByDom(this.$refs.myChart)
        } else {
          myChart = echarts.init(this.$refs.myChart, 'echartsStyle')
          this.init = true
        }
        myChart.setOption(val, true)
      },
      options(val) {
        this.opts = val
      }
    },
    mounted() {
      this.opts = this.options
      this.$refs.myChart.style.width = this.width + 'px'
      this.$refs.myChart.style.height = this.height + 'px'
    }
  }
</script>


這里面還引入了自定義的樣式ecahrtsStyle.js文件，其實(shí)你也可以完全省略掉這一步



var echarts = require('echarts/lib/echarts')
var colorPalette = ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa', '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050', '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089']


var theme = {
  color: colorPalette,
  title: {
    textStyle: {
      fontWeight: 'normal',
      color: '#008acd'
    }
  },


  visualMap: {
    itemWidth: 15,
    color: ['#5ab1ef', '#e0ffff']
  },


  toolbox: {
    iconStyle: {
      normal: {
        borderColor: colorPalette[0]
      }
    }
  },


  tooltip: {
    backgroundColor: 'rgba(50,50,50,0.5)',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#ff0000'
      },
      crossStyle: {
        color: '#008acd'
      },
      shadowStyle: {
        color: 'rgba(200,200,200,0.2)'
      }
    }
  },


  dataZoom: {
    dataBackgroundColor: '#efefff',
    fillerColor: 'rgba(182,162,222,0.2)',
    handleColor: '#008acd'
  },


  grid: {
    borderColor: '#eee'
  },


  categoryAxis: {
    axisLine: {
      lineStyle: {
        color: '#008acd'
      }
    },
    splitLine: {
      lineStyle: {
        color: ['#eee']
      }
    }
  },


  valueAxis: {
    axisLine: {
      lineStyle: {
        color: '#008acd'
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
      }
    },
    splitLine: {
      lineStyle: {
        color: ['#eee']
      }
    }
  },


  timeline: {
    lineStyle: {
      color: '#008acd'
    },
    controlStyle: {
      normal: {
        color: '#008acd'
      },
      emphasis: {
        color: '#008acd'
      }
    },
    symbol: 'emptyCircle',
    symbolSize: 3
  },


  line: {
    smooth: true,
    symbol: 'emptyCircle',
    symbolSize: 3
  },


  candlestick: {
    itemStyle: {
      normal: {
        color: '#d87a80',
        color0: '#2ec7c9',
        lineStyle: {
          color: '#d87a80',
          color0: '#2ec7c9'
        }
      }
    }
  },


  scatter: {
    symbol: 'circle',
    symbolSize: 4
  },


  map: {
    label: {
      normal: {
        textStyle: {
          color: '#d87a80'
        }
      }
    },
    itemStyle: {
      normal: {
        borderColor: '#eee',
        areaColor: '#ddd'
      },
      emphasis: {
        areaColor: '#fe994e'
      }
    }
  },


  graph: {
    color: colorPalette
  },


  gauge: {
    axisLine: {
      lineStyle: {
        color: [[0.2, '#2ec7c9'], [0.8, '#5ab1ef'], [1, '#d87a80']],
        width: 10
      }
    },
    axisTick: {
      splitNumber: 10,
      length: 15,
      lineStyle: {
        color: 'auto'
      }
    },
    splitLine: {
      length: 22,
      lineStyle: {
        color: 'auto'
      }
    },
    pointer: {
      width: 5
    }
  }
}


echarts.registerTheme('echartsStyle', theme)


二、操作頁面

1.引用Echars.vue

導(dǎo)入剛剛的創(chuàng)建的vue：

import Echarts from '../util/Echarts'
import axios from 'axios'

按鈕的內(nèi)容：

<echarts :type="active" :width="screenWidth" :height="screenHeight-160" :options="options[active]"></echarts>


<mt-tabbar v-model="active">
  <mt-tab-item id="wea"><span style="display:inline-block;padding: 6px">最近天氣</span></mt-tab-item>
  <mt-tab-item id="shi"><span style="display:inline-block;padding: 6px">今日濕度</span></mt-tab-item>
  <mt-tab-item id="oth"><span style="display:inline-block;padding: 6px">詳細(xì)溫度</span></mt-tab-item>
</mt-tabbar>
2.具體方法

  data () {
    return {
      active: 'wea',
      options: {
        wea: {},
        oth: {},
        shi: {},
      }
    }
  },
  mounted(){
    this.loadWeatherInfo()
  },
  methods:{
    loadWeatherInfo() {
      var self = this;
      axios.get('https://tianqiapi.com/api?version=v1&appid=xxx&appsecret=xxx')
        .then((res) => {
          console.log(res.data)
          let d = res.data


          let dayArr = [], // 未來七天
            maxArr = [], // 最高氣溫
            minArr = [], // 最低氣溫
            weaArr = [], // 氣溫
            airArr = [], // 空氣質(zhì)量
            dateArr = [], // 日期數(shù)據(jù)
            hourArr = [], // 今日小時數(shù)據(jù)
            hweaArr = []; // 小時氣溫?cái)?shù)據(jù)


          for (let i = 0; i < d.data.length; i++) {
            let nowRow = d.data[i]
            dayArr.push(nowRow.day)
            maxArr.push(nowRow.tem1.substr(0, nowRow.tem1.length - 1))
            minArr.push(nowRow.tem2.substr(0, nowRow.tem2.length - 1))
            weaArr.push(nowRow.wea)
            airArr.push(nowRow.air_level)
            dateArr.push(nowRow.date)
          }


          for (let h = 0; h < d.data[0].hours.length; h++) {
            let nowHR = d.data[0].hours[h]
            hourArr.push(nowHR.day.substr(nowHR.day.lastIndexOf("日") + 1, nowHR.day.length))
            hweaArr.push(nowHR.tem.substr(0, nowHR.tem.length - 1))
          }
      
    // 設(shè)置Echarts所需的天氣option數(shù)據(jù)
    // 設(shè)置Echarts所需的濕度option數(shù)據(jù)
    // 設(shè)置Echarts所需的詳細(xì)氣溫option數(shù)據(jù)
    // 代碼在下面


        })
        // 輸出錯誤請求
        .catch((err) => {
          console.log(err);
        });
    }
3.數(shù)據(jù)渲染

折線圖



// 設(shè)置Echarts所需的天氣option數(shù)據(jù)
self.options.wea = {
  title: {
    text: d.city + '最近溫度', padding: 20
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params, ticket, callback) {
      var htmlStr = '';
      for (var j = 0; j < params.length; j++) {
        var param = params[j];
        var xName = param.name; // x軸的名稱
        var seriesName = param.seriesName; // 圖例名稱
        var value = param.value == undefined ? '未知' : param.value; // y軸值
        if (j === 0) {
          htmlStr += xName + '<br/>';//x軸的名稱
        }
        htmlStr += '<div>';
        if (seriesName === "最高溫度" || seriesName === "最低溫度") {
          htmlStr += seriesName + '：' + value + '℃<br/>';
        } else {
          htmlStr += seriesName + '：' + value + "<br/>";
        }
        htmlStr += '</div>';
      }
      return htmlStr;
    }
  },
  legend: {
    data: ['最高溫度', '最低溫度'], padding: [20, 20, 20, 200]
  },
  grid: {
    left: '5%', right: '10%', bottom: '10%', containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: dayArr,
    axisLabel: {
      inside: false,
      textStyle: {
        color: '#000',
        fontSize: '8',
      }
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: ['0%', '20%'],
    axisLabel: {formatter: '{value}℃'}
  },
  series: [
    {
      name: '最高溫度',
      type: 'line',
      stack: 'tem1',
      color: 'red',
      smooth: true,
      data: maxArr
    },
    {
      name: '最低溫度',
      type: 'line',
      stack: 'tem2',
      color: 'blue',
      smooth: true,
      data: minArr
    },
    {name: '日期', type: 'bar', data: dateArr},
    {name: '天氣', type: 'bar', data: weaArr},
    {name: '空氣質(zhì)量', type: 'bar', data: airArr}
  ]
}
儀表盤

// 設(shè)置Echarts所需的濕度option數(shù)據(jù)
self.options.shi = {
  tooltip: {
    formatter: '{a} <br/> : {c}%'
  },
  toolbox: {
    feature: {
      restore: {},
      saveAsImage: {}
    }
  },
  series: [{
    name: '今日濕度',
    type: 'gauge',
    detail: {
      formatter: '{value}%'
    },
    data: [{
      value: d.data[0].humidity,
      name: '濕度'
    }]
  }]
}


柱形圖



// 設(shè)置Echarts所需的詳細(xì)option數(shù)據(jù)
self.options.oth = {
  title: {
    text: '今日小時溫度'
  },
  legend: {
    data: '溫度℃'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['tem']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: hourArr,
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: ['0%', '20%'],
    axisLabel: {formatter: '{value}℃'}
  },
  series: [{
    name: '溫度',
    type: 'bar',
    data: hweaArr,
    itemStyle: {
      normal: {
        label: {
          show: true, //開啟顯示
          position: 'top', //在上方顯示
          textStyle: { //數(shù)值樣式
            color: 'black',
            fontSize: 10,
          },
          formatter: '{c}℃',
        }
      }
    },
    animationDelay: function (idx) {
      return idx * 10;
    }
  }],
  animationEasing: 'elasticOut',
  animationDelayUpdate: function (idx) {
    return idx * 5;
  }
}


4.調(diào)用api

這個就沒啥說的了，我直接在本頁面導(dǎo)入axios，當(dāng)然你們可以封裝http來調(diào)用接口。接口網(wǎng)上很多的，例舉免費(fèi)的：

1.第一個替換citykey即可，城市編碼，即調(diào)即用

http://wthrcdn.etouch.cn/weather_mini?citykey=101020100

2.第二個注冊一個賬號即可用，3小時刷新一次天氣數(shù)據(jù)，很全面

https://tianqiapi.com/api?version=v1&appid=xxx&appsecret=xxx

總結(jié)

無非就是調(diào)用了天氣接口返回json，自行封裝，然后給echarts設(shè)值就可以完成這些功能了





作者：小碼哥

歡迎關(guān)注微信公眾號 ：碼出宇宙

掃描添加好友邀你進(jìn)技術(shù)交流群，加我時注明【姓名+公司(學(xué)校)+職位】