<template>
  <div id="chartWeather"></div>
</template>

<script>
export default {
  name: "chartWeather",
  data() {
    return {
      myChart: null
    }
  },
  props: {
    data: {
      type: Array,
      default: () => [[], []]
    }
  },
  methods: {
    init() {
      let time = [];
      this.data[0].forEach(item => {
        time.push(item.slice(5, 13))
      })
      let options = {
        title: {
          text: '未来24小时气温',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var res = `<div>
               <div>${params[0].name}</div>
               <div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                  <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
              params[0].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
            ]};"></span>
                  ${params[0].seriesName}:
                  ${params[0].data}℃
                </div>
            <div>`;
            return res
          }
        },
        color: ['#49e3e3'],
        // dataZoom: [{
        //   type: 'inside',
        //   startValue: start,
        //   endValue: end,
        //   show: false
        //
        // }],
        // grid: {
        //   y2: 140
        // },
        xAxis: [
          {
            type: 'category',
            data: time,
            boundaryGap: false,
            // axisPointer: {
            //   type: 'shadow'
            // },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              interval: 0,
              rotate: -45
            },
            axisTick:{
              show:true
            },
            splitLine:{
              show:false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '温度统计',
            axisLabel: {
              formatter: '{value} ℃'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              }
            },
            axisTick:{
              show:true
            },
            splitLine:{
              show:false
            }
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            itemStyle : {
              color: '#49e3e3',
              borderColor: '#49e3e3',
              normal: {
                label : {
                  show: true,
                  textStyle: {
                    fontSize: 14
                  }
                }
              }
            },
            data: this.data[1],
            markPoint: {
              label: {
                show: true,
                formatter: function (params) {
                  var res = params.value + '℃';
                  return res;
                }
              },
              data: [
                {
                  type: 'max',
                  name: 'Max',
                  color: "#d71345",
                  itemStyle: {
                    color: "#d71345",
                  },
                },
                { type: 'min', name: 'Min', color: '#2b4490', itemStyle: {
                  color: '#2b4490'
                  } }
              ]
            },
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }]
            // }
          }
        ]
      }
      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chartWeather'));
    this.init()
  }
}
</script>

<style scoped>
 #chartWeather {
   width: 100%;
   height: 100%;
 }
</style>
