eCharts实现七天天气预报（整合）

已于 2024-04-19 17:39:04 修改
阅读量187 收藏 1
点赞数 10
分类专栏： vue 文章标签： echarts 前端 javascript vue.js es6 数据分析
于 2024-04-19 16:11:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34965759/article/details/137967746
版权

 借鉴：Echarts实现双排图片天气预报，包含最低气温及最高气温加风向_echarts天气预报-CSDN博客

因为原博主没有提供天气预报接口说明级icon素材包，故在此整合完整的流程，包含天气预报数据获取及数据处理

注：icon图标素材在最顶部

首先注册和风天气

进入控制台，注册项目，选择免费版

根据和风天气接口文档，拼接一个请求地址

示例：

https://api.qweather.com/v7/weather/3d?location=101010100&key=YOUR_KEY

key就是在和风控制台中生成的项目key，需要点击查看

下面代码拿着直接可用，注意：echarts容器必须有高度否则无法显示

<div class="echarts_mian" ref="weatherMain"></div>
getWeather(){
        let url = 'https://devapi.qweather.com/v7/weather/7d?key=你的key&location=所需获取天气城市ID'
        request(url).then((resp) => {
          let weatherOptions = resp.daily;
          weatherOptions.map(rr=>{
            rr.windScaleDay = rr.windScaleDay + '级';//风力等级数据处理
            rr.fxDate = rr.fxDate.substr(5,11);//日期处理
          })
          this.weatherOptions = weatherOptions;
          this.leftBottomEchart(weatherOptions);
        })
      },

接口中location（地区ID）查询地址

leftBottomEchart(data,type){

        const extractField = (field, array) => {
          return array.map(item => item[field]);
        };

        const dayOp = extractField('fxDate', data);//日期
        const tempMaxOp = extractField('tempMax', data);//最高温度
        const tempMinOp = extractField('tempMin', data);//最低温度
        const textDayOp = extractField('textDay', data);//白天天气文字描述
        const textNightOp = extractField('textNight', data);//夜间天气文字描述
        const windDirDayOp = extractField('windDirDay', data);//风向
        const windScaleDayOp = extractField('windScaleDay', data);//风力等级

        var weatherMain = echarts.init(this.$refs.weatherMain);

        var containerWidth = weatherMain.getWidth();//获取容器宽度
        var containerHeight = weatherMain.getHeight();//获取容器高度

          const constoption = {
            grid: {
              show: true,
              backgroundColor: "transparent",
              opacity: 0.3,
              borderWidth: "0",
              top: "40%",
              bottom: "25%",
              left:'3%',
              right:'3%',
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "transparent",
                },
              },
            },
            legend: {
              show: false,
            },
            xAxis: [
              // 日期
              {
                type: "category",
                boundaryGap: false,
                position: "top",
                offset:containerHeight*0.24,//偏移量，根据高度百分比偏移
                zlevel: 100,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  formatter: ["{a|{value}}"].join("\n"),
                  rich: {
                    a: {
                      // color: 'white',
                      fontSize: 12,
                    },
                  },
                },
                nameTextStyle: {},
                data: dayOp,
              },
              // 最高气温
              {
                type: "category",
                boundaryGap: false,
                position: "top",
                offset:0,//偏移量，根据高度百分比偏移
                zlevel: 100,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  formatter: ["{a|{value}}°"].join("\n"),
                  rich: {
                    a: {
                      // color: 'white',
                      fontSize: 12,
                    },
                  },
                },
                nameTextStyle: {},
                data: tempMaxOp,
              },
              // 最低气温
              {
                type: "category",
                boundaryGap: false,
                position: "top",
                offset:-containerHeight*0.28,//偏移量，根据高度百分比偏移
                zlevel: 100,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  formatter: ["{a|{value}}°"].join("\n"),
                  rich: {
                    a: {
                      // color: 'white',
                      fontSize: 12,
                    },
                  },
                },
                nameTextStyle: {},
                data: tempMinOp,
              },
              // 天气图标
              {
                type: "category",
                boundaryGap: false,
                position: "top",
                offset:containerHeight*0.03,//偏移量，根据高度百分比偏移
                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 = textDayOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    1: {
                      backgroundColor: {
                        image: (() => {
                          const index = 1; // 图片序号
                          const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    2: {
                      backgroundColor: {
                        image: (() => {
                          const index = 2; // 图片序号
                          const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    3: {
                      backgroundColor: {
                        image: (() => {
                          const index = 3; // 图片序号
                          const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    4: {
                      backgroundColor: {
                        image: (() => {
                          const index = 4; // 图片序号
                          const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    5: {
                      backgroundColor: {
                        image: (() => {
                          const index = 5; // 图片序号
                          const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    6: {
                      backgroundColor: {
                        image: (() => {
                          const index = 6; // 图片序号
                          const weather = textDayOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    b: {
                      // color: 'white',
                      fontSize: 12,
                      lineHeight: 30,
                      height: 20,
                    },
                  },
                },
                nameTextStyle: {
                  fontWeight: "bold",
                  fontSize: 19,
                },
                data: textDayOp,
                // data: ["小雨", "小雨", "阴", "小雨", "多云", "小雨", "小雨"],
              },
              // 底部天气图标
              {
                type: "category",
                boundaryGap: false,
                zlevel: 100,
                position: "top", // 轴线位置为底部
                offset:-containerHeight*0.5,//偏移量，根据高度百分比偏移
                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 = textNightOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    1: {
                      backgroundColor: {
                        image: (() => {
                          const index = 1; // 图片序号
                          const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    2: {
                      backgroundColor: {
                        image: (() => {
                          const index = 2; // 图片序号
                          const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    3: {
                      backgroundColor: {
                        image: (() => {
                          const index = 3; // 图片序号
                          const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    4: {
                      backgroundColor: {
                        image: (() => {
                          const index = 4; // 图片序号
                          const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    5: {
                      backgroundColor: {
                        image: (() => {
                          const index = 5; // 图片序号
                          const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    6: {
                      backgroundColor: {
                        image: (() => {
                          const index = 6; // 图片序号
                          const weather = textNightOp[index]; // 根据图片序号获取对应的天气数据
                          if (weather === "晴") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "多云") {
                            return require("@/assets/images/pest/weather/tianqi-duoyun.png");
                          } else if (weather === "阴") {
                            return require("@/assets/images/pest/weather/tianqi-yin.png");
                          } else if (weather === "晴雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhenyu.png");
                          } else if (weather === "小雨") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoyu.png");
                          } else if (weather === "中雨") {
                            return require("@/assets/images/pest/weather/tianqi-zhongyu.png");
                          } else if (weather === "大雨") {
                            return require("@/assets/images/pest/weather/tianqi-dayu.png");
                          } else if (weather === "暴雨") {
                            return require("@/assets/images/pest/weather/tianqi-baoyu.png");
                          } else if (weather === "雷阵雨") {
                            return require("@/assets/images/pest/weather/tianqi-leizhenyu.png");
                          } else if (weather === "晴雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhenxue.png");
                          } else if (weather === "小雪") {
                            return require("@/assets/images/pest/weather/tianqi-xiaoxue.png");
                          } else if (weather === "中雪") {
                            return require("@/assets/images/pest/weather/tianqi-zhongxue.png");
                          } else if (weather === "大雪") {
                            return require("@/assets/images/pest/weather/tianqi-daxue.png");
                          } else if (weather === "暴雪") {
                            return require("@/assets/images/pest/weather/tianqi-baoxue.png");
                          } else if (weather === "雷电") {
                            return require("@/assets/images/pest/weather/tianqi-qing.png");
                          } else if (weather === "大风") {
                            return require("@/assets/images/pest/weather/tianqi-feng.png");
                          } else if (weather === "雾") {
                            return require("@/assets/images/pest/weather/tianqi-wu.png");
                          } else if (weather === "霾") {
                            return require("@/assets/images/pest/weather/tianqi-wumai.png");
                          } else if (weather === "浮尘") {
                            return require("@/assets/images/pest/weather/tianqi-fuchen.png");
                          } else if (weather === "沙尘") {
                            return require("@/assets/images/pest/weather/tianqi-yangsha.png");
                          } else if (weather === "沙尘暴") {
                            return require("@/assets/images/pest/weather/tianqi-shachenbao.png");
                          }
                        })(),
                      },
                      height: 24,
                      width: 24,
                    },
                    b: {
                      // color: 'white',
                      fontSize: 12,
                      lineHeight: 30,
                      height: 20,
                    },
                  },
                },
                nameTextStyle: {
                  fontWeight: "bold",
                  fontSize: 19,
                },
                //data: weatherdata,
                data: textNightOp,
              },
              // 风向
              {
                type: "category",
                boundaryGap: false,
                position: "top",
                offset:-containerHeight*0.52,//偏移量，根据高度百分比偏移
                zlevel: 100,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  formatter: ["{a|{value}}"].join("\n"),
                  rich: {
                    a: {
                      // color: 'white',
                      fontSize: 12,
                    },
                  },
                },
                nameTextStyle: {},
                data: windDirDayOp,
              },
              // 风力
              {
                type: "category",
                boundaryGap: false,
                position: "top",
                offset:-containerHeight*0.57,//偏移量，根据高度百分比偏移
                zlevel: 100,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  formatter: ["{a|{value}}"].join("\n"),
                  rich: {
                    a: {
                      // color: 'white',
                      fontSize: 12,
                    },
                  },
                },
                nameTextStyle: {},
                data: windScaleDayOp,
              },
            ],
            yAxis: {
              type: "value",
              show: false,
              axisLabel: {
                formatter: "{value} °C",
                color: "white",
              },
            },
            series: [
              // 最高气温
              {
                name: "最高气温",
                type: "line",
                data: tempMaxOp,
                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: tempMinOp,
                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",
                },
              },
            ],
          };
          if(type == 'redraw'){
            setTimeout(() => {
              weatherMain.setOption(constoption, true);
              weatherMain.resize();
            }, 1);
          }else{
            setTimeout(() => {
              weatherMain.setOption(constoption);
              weatherMain.resize();
            },1)
          }

      }

先获取天气数据再渲染echarts，不然会因为数据为空无法正常显示，以上代码全部在methods中，mounted中只需跑一下this.getWeather即可

如需要做屏幕大小适配，参考代码：

watch: {
      screenWidth: {
        handler: function (val) {
          this.$nextTick(function(){
            this.leftBottomEchart(this.weatherOptions,'redraw');
          });
        },
        immediate: true,
        deep:true
      },
      screenHeight: {
        handler: function (val) {
          this.$nextTick(function(){
            this.leftBottomEchart(this.weatherOptions,'redraw');
          });
        },
        immediate: true,
        deep:true
      },
    },
    mounted(){

      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
          this.screenHeight = document.body.clientHeight;
        })();
      };

      this.getWeather();
    },

data中定义screenWidth和screenHeight，使用windows.onresize来实时监听浏览器变化

请放心使用

运行效果：

PangDong__
关注
  • 10
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue+Node+高德地图+Echart做一款出行可视化全栈webapp
weixin_34381687的博客
06-08 512
咔咔出行（出行可视化） 项目简介 解决出行问题，用于出行行程记录，路线规划，数据可视化分析的移动端webapp 点击这里查看该项目 项目截图 私人出行 公共交通 历史列表 我的信息 技术栈 前端：移动端，vue全家桶，Mand组件库，Echarts.js，Scss 后端：Node，Express框架，高德地图API 数据库：Mysql 功能模块 个人出行 用户个人出行...
Echart 制作未来7天天气预报图
最新发布
weixin_42353499的博客
01-18 746
从彩云天气获取数据，试用echarts绘制天气预报图表
echats实现天气预报+折线（转载）
As_Xx_Ls的博客
02-10 3091
使用echarts绘制天气预报折线
ECharts天气预报折线图
罪无囚
08-12 9255
引入依赖文件 JQuery和ECharts <script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/echarts.min.js"></script> <div id="weather" class="col-lg-7 col-md-12" style="he...
Echarts利用多X轴实现七天天气预报效果
FengChSvip的博客
10-25 5104
Echarts利用多X轴实现七天天气预报效果UI设计图Echarts示例效果前言示例代码最终效果 UI设计图 Echarts示例效果 前言 对于UI给出的设计图，各个气象网站都有类似的效果，实现效果大都可归为两种： 网格布局+图表框架绘制温度曲线； 网格布局+canvas自绘温度曲线； 这两种实现方式的共同点都是将曲线和上面的描述文字拆分开来，这样做重点是要实现上面日期和下面气温曲线两个部分的自适应对齐。因为我CSS经验相对比较薄弱，并且个人使用Echarts图表框架相对较多。查看文档发现Echar
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实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标
DDD4V的博客
10-08 2801
七天效果图 轮播效果图 轮播效果实现 <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...
3分钟搞懂Vue整合Echarts实现可视化界面
wanghuichen的博客
04-23 6889
数据不美观？那就来使用Echarts让你的数据 “活” 起来~
ECharts实现数据可视化入门教程（超详细）
热门推荐
『愚』的博客
02-20 17万+
ECharts实现数据可视化入门教程（超详细）ECharts介绍ECharts入门教程第一步：下载并引入scharts.js文件第二步：编写代码目录结构编写index.html代码效果展示ECharts的基础配置主要配置（常用的）案例讲解 ECharts介绍 官网链接：Apache ECharts ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢
mui+echart+天气预报
10-04
跨域得到天气预报信息，然后利用 mui+echart+天气预报
仿百度天气预报样式的echart静态html实例
05-25
仿百度天气预报样式的echart静态html实例，是一款仿百度天气预报的静态页面，用到了html、echart、query等技术。
echarts中使用天地图的插件示例
01-01
echarts中使用天地图的插件示例，使用echarts中百度地图的插件改写，让其支持天地图的展示展示及使用。，使用echarts中高端地图的插件改写，让其支持天地图的展示及使用。 1.echarts-extension-tmap.js 在高度地图...
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10...
echarts 实现以中国为中心的世界地图
05-04
vue+echarts 实现以中国为中心的世界地图
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
Echarts实现心电图走势
02-22
Echarts实现心电图走势，实时刷新数据，非常实用！
Echarts 实现树状图的展示与编辑示例
07-14
echarts 实现树形图 的增加，编辑，删除操作示例 内含静态JSON数据文件flare.json 重要的页面html文件,echart_demo.html 功能说明： 当鼠标移动到节点上时，会有节点描叙信息提示框。 当在节点处右键时，会弹出右键...
使用echarts实现四象限散点图
09-02
1、文件夹下载下来后直接双击html文件即可看到效果； 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、有问题欢迎留言，看到会解答；
echarts实现七日天气
04-05
抱歉，我是一个语言模型，无法提供您所需的代码。但是，我可以为您提供一些实现七日天气的思路和步骤： 1.获取天气数据：可以通过调用天气API获取七日天气数据，例如阿里云天气API、和风天气API等。 2.数据处理：将获取到的数据进行处理，提取需要的数据字段，例如日期、天气情况、最高温度、最低温度等。 3.绘制图表：使用Echarts图表库，根据处理后的数据绘制七日天气图表。可以选择不同的图表类型，例如柱状图、折线图、饼图等，并根据需求进行定制化。 4.展示天气数据：将绘制好的图表嵌入到网页中，展示七日天气数据。 以上是实现七日天气的一些基本步骤，具体实现还需要针对具体情况进行调整和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PangDong__

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值