echarts实现七天天气预报_echarts天气预报

效果图

实现代码

const imglist = {
  "晴": 'data:image/png;base64,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',
  "小雨": "data:image/png;base64,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",
  "阴": "data:image/png;base64,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",
  "多云": "data:image/png;base64,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"
};
const img = 'data:image/png;base64,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';
const maxTemp = ["16.3", "16.2", "20.6", "14.2", "17.6", "15.7", "14.3"];
const minTemp = ["-5.4", "-2.8", "-3.5", "-2.5", "12.4", "-1.2", "-13"];

const weekday = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const daylist = ["25日", "26日", "27日", "28日", "29日", "30日", "31日"];
const weatherlist = ["小雨", "小雨", "阴", "小雨", "多云", "小雨", "小雨"];
//数据转换成rich对象
let style = weatherlist.map((i) => {
  return {
    backgroundColor: {
      image: imglist[i]
    },
    height: 40,
    width: 40
  }
});

let rich = {}
style.forEach((i, index) => {
  rich[index] = i;
});
rich.b = {
  // color: 'white',
  fontSize: 12,
  lineHeight: 30,
  height: 20
};

option = {
  backgroundColor: "#fff",
  title: {
    text: "7天天气预报",
    left: "5%",
    show: false
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: {
        color: "rgba(99,166,253,0.1)"
      },
      shadowBlur: 10
    },
    formatter: function (params) {
      let str = weekday[params[0].dataIndex] + "," + params[0].name + "<br />";
      params.forEach((item, index) => {
        console.log(item);
        str += `${item.marker}${item.seriesName}: ${item.data}<br />`;
        if (index == params.length - 1) {
          str += `${item.marker}天气：${weatherlist[item.dataIndex]}<br />`;
        }

      });
      return str;
    }

  },
  legend: {
    show: false
  },
  grid: {
    show: true,
    backgroundColor: "transparent",
    opacity: 0.3,
    borderWidth: "0",
    top: "20%",
    bottom: "20%"
  },
  toolbox: {
    show: false,
    right: "5%",
    feature: {
      magicType: {
        type: ["line", "bar", "stack"]
      },
      dataZoom: {
        yAxisIndex: "none"
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: [
    // 日期
    {
      type: "category",
      boundaryGap: false,
      position: "top",
      offset: -50,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: ["{a|{value}}"].join("\n"),
        rich: {
          a: {
            // color: 'white',
            fontSize: 18
          }
        }
      },
      nameTextStyle: {},
      data: daylist
    },
    // 星期
    {
      type: "category",
      position: "bottom",
      offset: -50,
      boundaryGap: false,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: ["{a|{value}}"].join("\n"),
        rich: {
          a: {
            // color: 'white',
            fontSize: 14
          }
        }
      },
      nameTextStyle: {
        fontWeight: "bold",
        fontSize: 19
      },
      data: weekday
    },
    // 天气图标
    {
      type: "category",
      boundaryGap: false,
      position: "top",
      offset: -120,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: function (value, index) {
          return "{k|}\n{" + index + "| }\n{b|" + value + "}";
        },
        rich
      },
      nameTextStyle: {
        fontWeight: "bold",
        fontSize: 19
      },
      data: weatherlist
    }
  ],
  yAxis: {
    show: false,
    type: "value",

    axisLabel: {
      formatter: "{value}" + "℃"
    },
    max: function (value) {
      return value.max + 20;
    },
    min: function (value) {
      return value.min - 20;
    }
  },
  series: [
    {
      name: "最高温度",
      type: "line",
      data: maxTemp,
      symbol: "emptyCircle",
      symbolSize: 10,
      showSymbol: true,
      smooth: true,
    },
    {
      name: "最低温度",
      type: "line",
      data: minTemp,
      symbol: "emptyCircle",
      symbolSize: 10,
      showSymbol: true,
      smooth: true,
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209