ECharts天气预报折线图_echarts 折线图分历史与预报

1. 引入依赖文件 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="height:400px"></div>
1
2
3
4

2.初始化图表

// 初始化天气折线图
      var weather = echarts.init($('#weather').get(0));
      option = {
          title: {
              text: '未来一周气温',
              subtext: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['最高气温', '最低气温']
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: []
          },
          yAxis: {
              scale:true, //纵坐标起始点根据最低值变化
              type: 'value',
              axisLabel: {
                  formatter: '{value} °C'
              }
          },
          series: [{
                  name: '最高气温',
                  type: 'line',
                  data: [],
                  markPoint: {
                      data: [{
                              type: 'max',
                              name: '最大值'
                          }

                      ]
                  },
                  markLine: {
                      data: [{
                          type: 'average',
                          name: '平均值'
                      }]
                  }
              },
              {
                  name: '最低气温',
                  type: 'line',
                  data: [],
                  markPoint: {
                      data: [{
                          type: 'min',
                          name: '最小值'
                      }]
                  },
                  markLine: {
                      data: [{
                              type: 'average',
                              name: '平均值'
                          },

                      ]
                  }
              }
          ]
      };
      weather.setOption(option)
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

3. 使用以上配置及以下数据显示图表

// 获取天气信息
      $.get("https://www.tianqiapi.com/api/?version=v1", { //天气API
              city: city?city:''
          },
          function (res) {
          //显示当前城市
             option.title.subtext ='当前城市：' +res.city
             //给横坐标复赋值
              option.xAxis.data = [res.data[0].day, res.data[1].day, res.data[2].day, res.data[3].day, res.data[4]
                  .day, res.data[5].day, res.data[6].day
              ]
              //由于温度返回的是xx℃ 而我们只需要数字 所以用parseInt截取数字
              option.series[0].data = [parseInt(res.data[0].tem1), parseInt(res.data[1].tem1), parseInt(res.data[2]
                  .tem1), parseInt(res.data[3].tem1), parseInt(res.data[4].tem1), parseInt(res.data[5]
                  .tem1), parseInt(res.data[6].tem1)]
              option.series[1].data = [parseInt(res.data[0].tem2), parseInt(res.data[1].tem2),
                  parseInt(res.data[2]
                      .tem2), parseInt(res.data[3].tem2), parseInt(res.data[4].tem2), parseInt(res.data[5]
                      .tem2), parseInt(res.data[6].tem2)
              ]

              weather.setOption(option); // 使用刚指定的配置项和数据显示图表。
          },
      );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4. 效果图