Echarts实现双排图片天气预报，包含最低气温及最高气温加风向

已于 2023-10-25 14:55:50 修改
阅读量575 收藏 4
点赞数 5
文章标签： echarts javascript 前端 html5 anti-design-vue
于 2023-10-25 13:51:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45256829/article/details/134032707
版权

 该echarts图表用于展示七天天气数据，（包含最高气温、最低气温、天气对应的天气图标展示，图表可自行替换本地图片，这里的图片我是对天气数据做的判断，你们可以不用这么多、包含风向和风力强度，当然宽度需要根据自己需要调整，不然显示不出来

<template>
  <!-- 首页图表 -->
  <div>
    <!-- 图表 -->
    <div class="" id="mychart3" style="width: 100%; height: 422px"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      buttonColor: 1,
      // 图表数据
      echartdataLIst: [11, 13, 14, 12, 11, 13],
      weatherdata: ["小雪", "沙尘暴", "阴", "日多云", "霾", "雷电", "大风"],
      weatherdata1: ["雷电", "小雪", "日多云", "霾", "沙尘暴", "大风", "阴"],
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const constoption = {
        grid: {
          show: true,
          backgroundColor: "transparent",
          opacity: 0.3,
          borderWidth: "0",
          top: "180",
          bottom: "0",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "transparent",
            },
          },
        },
        legend: {
          show: false,
        },
        xAxis: [
          // 星期
          // {
          //   type: "category",
          //   boundaryGap: false,
          //   position: "top",
          //   offset: 130,
          //   zlevel: 100,
          //   axisLine: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   axisLabel: {
          //     interval: 0,
          //     formatter: ["{a|{value}}"].join("\n"),
          //     rich: {
          //       a: {
          //         color: "#3D3E3F",
          //         fontSize: 16,
          //       },
          //     },
          //   },
          //   nameTextStyle: {
          //     fontWeight: "bold",
          //     fontSize: 19,
          //   },
          //   data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          // },
          // 日期
          {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: 140,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              formatter: ["{a|{value}}"].join("\n"),
              rich: {
                a: {
                  // color: 'white',
                  fontSize: 12,
                },
              },
            },
            nameTextStyle: {},
            data: [
              "01/21",
              "01/22",
              "01/23",
              "01/24",
              "01/25",
              "01/26",
              "01/27",
            ],
          },
          // 最高气温
          {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: 30,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              formatter: ["{a|{value}}°"].join("\n"),
              rich: {
                a: {
                  // color: 'white',
                  fontSize: 12,
                },
              },
            },
            nameTextStyle: {},
            data: ["16.3", "16.2", "17.6", "14.2", "17.6", "15.7", "14.3"],
          },
          // 最低气温
          {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: -110,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              formatter: ["{a|{value}}°"].join("\n"),
              rich: {
                a: {
                  // color: 'white',
                  fontSize: 12,
                },
              },
            },
            nameTextStyle: {},
            data: ["13.4", "12.8", "13.5", "12.5", "12.4", "13.2", "13"],
          },
          // 天气图标
          {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: 60,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              formatter: function (value, index) {
                return "{" + index + "| }\n{b|" + value + "}";
              },
              rich: {
                0: {
                  backgroundColor: {
                    image: (() => {
                      const index = 0; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                1: {
                  backgroundColor: {
                    image: (() => {
                      const index = 1; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                2: {
                  backgroundColor: {
                    image: (() => {
                      const index = 2; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                3: {
                  backgroundColor: {
                    image: (() => {
                      const index = 3; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                4: {
                  backgroundColor: {
                    image: (() => {
                      const index = 4; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                5: {
                  backgroundColor: {
                    image: (() => {
                      const index = 5; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                6: {
                  backgroundColor: {
                    image: (() => {
                      const index = 6; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                b: {
                  // color: 'white',
                  fontSize: 12,
                  lineHeight: 30,
                  height: 20,
                },
              },
            },
            nameTextStyle: {
              fontWeight: "bold",
              fontSize: 19,
            },
            data: this.weatherdata1,
            // data: ["小雨", "小雨", "阴", "小雨", "多云", "小雨", "小雨"],
          },
          // 底部天气图标
          {
            type: "category",
            boundaryGap: false,
            zlevel: 100,
            position: "top", // 轴线位置为底部
            offset: -180, // 偏移量
            axisLine: {
              show: false, // 不显示轴线
            },
            axisTick: {
              show: false, // 不显示刻度线
            },
            axisLabel: {
              interval: 0,
              formatter: function (value, index) {
                return "{" + index + "| }\n{b|" + value + "}";
              },
              rich: {
                0: {
                  backgroundColor: {
                    image: (() => {
                      const index = 0; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                1: {
                  backgroundColor: {
                    image: (() => {
                      const index = 1; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                2: {
                  backgroundColor: {
                    image: (() => {
                      const index = 2; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                3: {
                  backgroundColor: {
                    image: (() => {
                      const index = 3; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                4: {
                  backgroundColor: {
                    image: (() => {
                      const index = 4; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                5: {
                  backgroundColor: {
                    image: (() => {
                      const index = 5; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                6: {
                  backgroundColor: {
                    image: (() => {
                      const index = 6; // 图片序号
                      const weather = this.weatherdata[index]; // 根据图片序号获取对应的天气数据
                      if (weather === "日晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(1).png");
                      } else if (weather === "晚晴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(3).png");
                      } else if (weather === "日多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(7).png");
                      } else if (weather === "晚多云") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(28).png");
                      } else if (weather === "阴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(10).png");
                      } else if (weather === "晴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(16).png");
                      } else if (weather === "小雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(13).png");
                      } else if (weather === "中雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(19).png");
                      } else if (weather === "大雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(22).png");
                      } else if (weather === "暴雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(25).png");
                      } else if (weather === "雷阵雨") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(43).png");
                      } else if (weather === "晴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(40).png");
                      } else if (weather === "小雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(31).png");
                      } else if (weather === "中雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(34).png");
                      } else if (weather === "大雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(37).png");
                      } else if (weather === "暴雪") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(49).png");
                      } else if (weather === "雷电") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(46).png");
                      } else if (weather === "大风") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(58).png");
                      } else if (weather === "雾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(52).png");
                      } else if (weather === "霾") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(55).png");
                      } else if (weather === "浮尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(61).png");
                      } else if (weather === "沙尘") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(64).png");
                      } else if (weather === "沙尘暴") {
                        return require("@/assets/icons/yunong_weather_slices/Weather／天气／weather-color-partly-cloudy(67).png");
                      }
                    })(),
                  },
                  height: 24,
                  width: 24,
                },
                b: {
                  // color: 'white',
                  fontSize: 12,
                  lineHeight: 30,
                  height: 20,
                },
              },
            },
            nameTextStyle: {
              fontWeight: "bold",
              fontSize: 19,
            },
            data: this.weatherdata,
            // data: ["小雨", "小雨", "阴", "小雨", "多云", "小雨", "小雨"],
          },
          // 风向
          {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: -200,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              formatter: ["{a|{value}}"].join("\n"),
              rich: {
                a: {
                  // color: 'white',
                  fontSize: 12,
                },
              },
            },
            nameTextStyle: {},
            data: [
              "西北风",
              "西南风",
              "西风",
              "西北风",
              "西北风",
              "西北风",
              "北风",
            ],
          },
          // 风力
          {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: -220,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              formatter: ["{a|{value}}"].join("\n"),
              rich: {
                a: {
                  // color: 'white',
                  fontSize: 12,
                },
              },
            },
            nameTextStyle: {},
            data: [
              "3-6级",
              "1-2级",
              "1-4级",
              "3-6级",
              "4-6级",
              "3-5级",
              "2-4级",
            ],
          },
        ],
        yAxis: {
          type: "value",
          show: false,
          axisLabel: {
            formatter: "{value} °C",
            color: "white",
          },
        },
        series: [
          // 最高气温
          {
            name: "最高气温",
            type: "line",
            data: ["16.3", "16.2", "17.6", "14.2", "17.6", "15.7", "14.3"],
            symbol: "none",
            symbolSize: 1,
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: "#FFA033",
              },
            },
            label: {
              show: true,
              position: "top",
              // offset: 10, // 设置标签相对于数据点的偏移量
              // color: 'white',
              formatter: "{c} °C",
            },
            lineStyle: {
              width: 3,
              color: "#FFA033",
              // normal: {
              //   color: "#4c9bfd",

              //   shadowBlur: 10, // 阴影模糊度
              //   shadowColor: "rgba(76, 155, 253, 0.3)", // 阴影颜色
              // },
            },
            areaStyle: {
              opacity: 1,
              color: "transparent",
            },
          },
          // 最低气温
          {
            name: "最低气温",
            type: "line",
            data: ["13.4", "12.8", "13.5", "12.5", "12.4", "13.2", "13"],
            symbol: "none",
            symbolSize: 1,
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: "#5CADFF",
              },
            },
            label: {
              show: true,
              position: "bottom",
              // color: 'white',
              formatter: "{c} °C",
            },
            lineStyle: {
              width: 3,
              color: "#5CADFF",
            },
            areaStyle: {
              opacity: 1,
              color: "transparent",
            },
          },
        ],
      };

      const myChart = echarts.init(document.getElementById("mychart3")); // 图标初始化
      myChart.setOption(constoption); // 渲染页面

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped lang="scss">
.tab_con_btn {
  margin-top: 15px;
  margin-bottom: 12px;
  ::v-deep .van-button__content {
    color: #475669;
  }
  .tab_con_btn_button {
    width: 76px;
    height: 32px;
    margin-left: 7px;
    border-radius: 16px;
    border: 0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #475669;
    line-height: 14px;
  }
  .tab_con_btn_button_active {
    width: 76px;
    height: 32px;
    margin-left: 7px;
    border-radius: 16px;
    border: 0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    background-color: #dfebff;
    color: #287afb;
    line-height: 14px;
  }
  .tab_con_btn_button:nth-child(1) {
    margin-left: 0;
  }
}
</style>

土豆丝里别放姜
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
双排图片滚动
09-12
多图滚动，兼容各大浏览器欢迎下载
仿百度天气预报样式的echart静态html实例
05-25
仿百度天气预报样式的echart静态html实例，是一款仿百度天气预报的静态页面，用到了html、echart、query等技术。
Echarts 利用多X轴实现未来15天天气预报
grootbaby
03-22 609
通过设置 grid.top 和 grid.bottom 设置白天和夜间天气展示区域。 Echarts 利用多X轴实现未来15天天气预报
echarts实现七天天气预报
preoccupied_的博客
12-25 286
【代码】echarts实现七天天气预报。
Echarts实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标
DDD4V的博客
10-08 2798
七天效果图 轮播效果图 轮播效果实现 <el-button class="button" icon="el-icon-arrow-left" @click="backChart"></el-button> <v-chart :options="echartsOption" ref="rainChart" autoresize style="width:90%;" /> <el-button class="button" ic...
echarts天气预报
liu_liYao的博客
08-10 1959
实现效果如图： echarts官网地址：天气预报 原数据 需要更改数据结构 handleCommon() { // 可以引入多个icon var weatherIcons = { Sunny: './data/asset/img/weather/sunny_128.png', Cloudy: './data/asset/img/weather/cloudy_128.png', Showers: './data/asset/img/weath
eCharts实现七天天气预报（整合）
qq_34965759的博客
04-19 182
先获取天气数据再渲染echarts，不然会因为数据为空无法正常显示，以上代码全部在methods中，mounted中只需跑一下this.getWeather即可。data中定义screenWidth和screenHeight，使用windows.onresize来实时监听浏览器变化。因为原博主没有提供天气预报接口说明级icon素材包，故在此整合完整的流程，包含天气预报数据获取及数据处理。key就是在和风控制台中生成的项目key，需要点击查看。进入控制台，注册项目，选择免费版。下面代码拿着直接可用，
微信小程序淘宝首页双排图片布局排版代码(推荐)
01-18
效果图： 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: ... <image class=taobao-list-photo src={{item.imageUrl}}/>
XListView实现多条目网络数据刷新加载 网络加载图片
08-26
主要为大家详细介绍了XListView实现多条目网络数据刷新加载，网络加载图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
行业资料-交通装置-一种加工蜗杆的新型双排铣刀.zip
08-25
行业资料-交通装置-一种加工蜗杆的新型双排铣刀.zip
多层连接双排桩基坑支护FLAC-3D数值模拟及分析
06-03
为了研究多层连接双排桩支护结构桩间距对支护性能的影响,运用FLAC3D建立了深基坑多层水平连接双排桩支护的计算模型,进行分层开挖三维动态模拟计算,同时讨论了排距、桩长等参数对桩顶位移的影响。通过多工况数值分析...
echats实现天气预报+折线（转载）
As_Xx_Ls的博客
02-10 3086
使用echarts绘制天气预报折线
Echarts利用多X轴实现七天天气预报效果
FengChSvip的博客
10-25 5100
Echarts利用多X轴实现七天天气预报效果UI设计图Echarts示例效果前言示例代码最终效果 UI设计图 Echarts示例效果 前言 对于UI给出的设计图，各个气象网站都有类似的效果，实现效果大都可归为两种： 网格布局+图表框架绘制温度曲线； 网格布局+canvas自绘温度曲线； 这两种实现方式的共同点都是将曲线和上面的描述文字拆分开来，这样做重点是要实现上面日期和下面气温曲线两个部分的自适应对齐。因为我CSS经验相对比较薄弱，并且个人使用Echarts图表框架相对较多。查看文档发现Echar
基于ECharts的天气预报系统
weixin_43396749的博客
12-22 1240
本章将综合运用ECMAScript、BOM、DOM、Ajax和数据可视化等知识，讲解基于ECharts的天气预报系统的设计与开发。本系统实现了当前天气、七日天气预报折线图、逐小时预报折线图、七日最高温最低温柱状图、湿度水球图、气压仪表盘、空气质量指数雷达图和极端天气预警等功能；实现了天气预报数据可视化，可直观地展现天气数据，传达预警信息。 http://www.tup.tsinghua.edu.cn/booksCenter/book_09735901.html# 源码均是图书配套，请在线购买电子版，谢谢支持
记录--用Echarts打造自己的天气预报！
林恒的博客
07-13 192
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 最近刚刚学习了Echarts的使用，于是想做一个小案例来巩固一下。项目效果如下图所示： 话不多说，开始进入实战。 创建项目 这里我们使用vue-cli来创建脚手架： vue create app 这里的app是你要创建的项目的名称，进入界面我们选择安装VueRouter，然后就可以开始进行开发啦。 页面自适应实现 我们这...
vue3+arco design通过动态表单方式实现自定义筛选
最新发布
m0_72167535的博客
05-07 388
vue3+arco design通过动态表单方式实现自定义筛选
基于Springboot的家具网站
趙兴晨的博客
05-03 545
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1204
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
altium 双排母模型库
08-02
Altium 双排母模型库是一个用于设计双排母连接器的组件库。双排母连接器常用于电子设备中，用于连接电路板和外部设备。该模型库提供了一系列不同规格和类型的双排母连接器模型，用于方便用户在设计中选择适合的连接器。 在 Altium 双排母模型库中，用户可以找到各种有用的功能和信息。首先，该模型库提供了双排母连接器的图形模型，可以帮助用户在电路板设计中准确地使用正确的连接器。此外，库中还包含了每个连接器的尺寸和布局信息，使用户可以根据特定需求确定所需连接器的合适尺寸和位置。 Altium 的双排母模型库还提供了许多其他有用的功能。例如，用户可以根据连接器类型和参数进行筛选，以快速找到符合设计要求的连接器。库中的每个连接器模型都有详细的属性信息，包括电气特性和机械特性，以帮助用户更好地了解连接器的性能和适用范围。 此外，用户还可以在库中找到与双排母连接器相关的附件和配件，如插座、接插件和套管等。这些附件和配件可以进一步完善设计，并提供更好的连接和保护。 总之，Altium 双排母模型库提供了一个方便和全面的资源，帮助设计师在使用双排母连接器时更加高效和准确。通过使用该模型库，用户可以轻松选择适合的连接器，并确保设计的质量和可靠性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值