EchartWeather.vue

<template>
  <div class="weather">
    <div id="echart_weather"></div>
    <div class="weatherDiscribe">
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="discrible" label="天气"> </el-table-column>
        <el-table-column prop="temperature" label="温度"> </el-table-column>
        <el-table-column prop="windem" label="风向"> </el-table-column>
        <el-table-column prop="windwl" label="风级"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'EchartWeather',
    data () {
        return {
            msg: '贵阳天气',
            baseurl: '/api/',
            // baseurl: 'http://yongma16.xyz/',
            // baseurl: 'api/article/weather/',
            tabPosition: 'left',
            weather_title: [],
            weather_high: [],
            weather_low: [],
            weather_discribe: [],
            weather_windem: [],
            weather_windwl: [],
            tableData: []
        }
    },
    mounted () {
        this.initWeatherLine()
    },
    methods: {
        initWeatherLine () {
            let that = this
            async function waitGetWeatherData () {
                await that.getWeatherData()
                await that.weatherInint()
            }
            waitGetWeatherData()
        },
        getWeatherData () {
            let that = this
            return new Promise((resolve) => {
                setTimeout(function () {
                    that.$axios
                        .get(that.baseurl + 'article/weather/')
                        .then((res) => {
                            let resData = res.data
                            let weather = resData.weather
                            that.msg = weather.location
                            let title = weather.title
                            let high = weather.high
                            let low = weather.low
                            let discribe = weather.discribe
                            let windem = weather.windem
                            let windwl = weather.windwl
                            that.tableData = []
                            title.map((item) => {
                                that.weather_title.push(item)
                            })
                            high.map((o) => {
                                let temp = parseInt(o)
                                that.weather_high.push(temp)
                            })
                            low.map((o) => {
                                let temp = parseInt(o)
                                that.weather_low.push(temp)
                            })
                            that.weather_windem = Array.from(...[windem])
                            that.weather_windwl = Array.from(...[windwl])
                            discribe.map((item) => {
                                that.weather_discribe.push(item)
                            })
                            let weatherLength = title.length
                            for (let loc = 0; loc < weatherLength; ++loc) {
                                let discribeText = {
                                    date: '',
                                    discrible: '',
                                    temperature: ''
                                }
                                discribeText.date = that.weather_title[loc]
                                discribeText.discrible = that.weather_discribe[loc]
                                discribeText.temperature =
                  that.weather_low[loc] + '/' + that.weather_high[loc] + '°C'
                                discribeText.windem = that.weather_windem[loc]
                                discribeText.windwl = that.weather_windwl[loc]
                                that.tableData.push(discribeText)
                            }
                        })
                        .catch((r) => {
                            throw Error(r)
                        })
                }, 1000)
                resolve('获取后端天气成功的promise')
            })
        },
        weatherInint () {
            // 基于准备好的dom，初始化echarts实例
            if (!echarts) return
            const that = this // 传递
            return new Promise((resolve) => {
                setTimeout(function () {
                    let highData = Array.from(...[that.weather_high])
                    let lowData = Array.from(...[that.weather_low])
                    let titleData = Array.from(...[that.weather_title])
                    let dom = document.getElementById('echart_weather')
                    let myChart = echarts.init(dom)
                    // 绘制图表
                    let option = {
                        title: {
                            text: that.msg,
                            subtext: '气温°C'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        // legend: {
                        //     data: ['最高', '最低']
                        // },
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView: {
                                    readOnly: false
                                },
                                magicType: {
                                    type: ['bar', 'line']
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: true,
                            data: titleData
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        series: [
                            {
                                name: 'Highest',
                                type: 'bar',
                                data: highData,
                                markPoint: {
                                    data: [
                                        {
                                            type: 'max',
                                            name: 'Max'
                                        },
                                        {
                                            type: 'min',
                                            name: 'Min'
                                        }
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {
                                            type: 'average',
                                            name: 'avg'
                                        }
                                    ]
                                }
                            },
                            {
                                name: 'Lowest',
                                type: 'line',
                                data: lowData,
                                markPoint: {
                                    data: [
                                        {
                                            name: '最低',
                                            value: -2,
                                            xAxis: 1,
                                            yAxis: -1.5
                                        }
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {
                                            type: 'average',
                                            name: 'Avg'
                                        },
                                        [
                                            {
                                                symbol: 'circle',
                                                x: '75%',
                                                yAxis: 'max'
                                            },
                                            {
                                                symbol: 'circle',
                                                label: {
                                                    position: 'start',
                                                    formatter: 'Max'
                                                },
                                                type: 'max',
                                                name: '最高点'
                                            }
                                        ]
                                    ]
                                }
                            }
                        ]
                    }
                    myChart.setOption(option) // 画折线图
                    window.onresize = function () {
                        myChart.resize()
                    }
                }, 3000)
                resolve('绘制折线图Promise')
            })
            // dom = null; //销毁
        }
    }
}
</script>

<style scoped>
.weather {
  position: relative;
  width: 100%;
  height: 100%;
}

#echart_weather {
  position: relative;
  width: 100%;
  height: 300px;
}

.weatherDiscribe {
  position: relative;
  margin-top: 5px;
  width: 100%;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}

#customers {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%, -50%);
}
</style>