<template>
  <div id="weather"  style="height:400px">
  </div>
</template>

<script>
  import  $ from 'jquery'

  export default {
    title: '天气展示',
    data () {
      return {
        city: '榆林'
      }
    },
    ready () {
      var weather = this.$echarts.init($('#weather').get(0));
     let  option = {
        title: {
          text: '未来一周气温',
          subtext: '',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          }
        },
        legend: {
          data: ['最高气温', '最低气温'],
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []  ,
          axisLabel: {
            color:"#fff"
          }
        },
        yAxis: {
          scale:true, //纵坐标起始点根据最低值变化
          type: 'value',
          axisLabel: {
            formatter: '{value} °C',
            color:"#fff"
          }
        },
        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)
      $.get("https://tianqiapi.com/api?version=v1&appid=22877183&appsecret=4B8rvI9j", { //天气API
          city: this.city?this.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); // 使用刚指定的配置项和数据显示图表。
        }
      )
    },
    methods: {

    },
    watch:{

    }
  }
</script>
