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 axios from "axios";
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().then((o) => {
        console.log(o);
      }); // 同步
    },
    getWeatherData() {
      let that = this;
      return new Promise((resolve) => {
        setTimeout(function () {
          axios
            .get(that.baseurl + "article/weather/")
            .then((res) => {
              console.log("天气接口返回", res);
              let resdata = res.data;
              let weather = resdata.weather;
              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);
              }
              console.log(that.tableData, "that.tableData");
            })
            .catch((r) => {
              console.log("r", r);
            });
        }, 1000);
        resolve("获取后端天气成功的promise");
      });
    },
    weatherInint() {
      // 基于准备好的dom，初始化echarts实例
      console.log("echarts!");
      var 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]);
          console.log("绘制折线图数据", titleData, highData, lowData);
          var dom = document.getElementById("echart_weather");
          // console.log('dom', dom)
          var myChart = echarts.init(dom);
          // 绘制图表
          var 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>