<template>
  <div id="chart-temp" style="width: 100%; height: 100%;"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'chartTemp',
  props: {
    tempList: {
      type: Array
    }
  },
  // watch: {
  //   tempList: {
  //     handler (newVal) {
  //       this.myChart.clear()
  //       this.init()
  //     }
  //   }
  // },
  data () {
    return {
      myChart: null
    }
  },
  methods: {
    init () {
      // let option = {
      //   backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //     offset: 0,
      //     color: '#c86589'
      //   },
      //   {
      //     offset: 1,
      //     color: '#06a7ff'
      //   }
      //   ], false),
      //   title: {
      //     text: '温度曲线',
      //     left: 'center',
      //     bottom: '5%',
      //     textStyle: {
      //       color: '#fff',
      //       fontSize: 16
      //     }
      //   },
      //   grid: {
      //     top: '20%',
      //     left: '10%',
      //     right: '10%',
      //     bottom: '15%',
      //     containLabel: true
      //   },
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false,
      //     axisLabel: {
      //       margin: 30,
      //       color: '#ffffff63'
      //     },
      //     axisLine: {
      //       show: false
      //     },
      //     axisTick: {
      //       show: true,
      //       length: 25,
      //       lineStyle: {
      //         color: '#ffffff1f'
      //       }
      //     },
      //     splitLine: {
      //       show: true,
      //       lineStyle: {
      //         color: '#ffffff1f'
      //       }
      //     },
      //     data: ['06-12, 06-13, 06-14, 06-15, 06-16']
      //   },
      //   yAxis: [{
      //     type: 'value',
      //     position: 'right',
      //     axisLabel: {
      //       margin: 20,
      //       color: '#ffffff63'
      //     },
      //
      //     axisTick: {
      //       show: true,
      //       length: 15,
      //       lineStyle: {
      //         color: '#ffffff1f'
      //       }
      //     },
      //     splitLine: {
      //       show: true,
      //       lineStyle: {
      //         color: '#ffffff1f'
      //       }
      //     },
      //     axisLine: {
      //       lineStyle: {
      //         color: '#fff',
      //         width: 2
      //       }
      //     }
      //   }],
      //   series: [{
      //     name: '温度',
      //     type: 'line',
      //     smooth: true, // 是否平滑曲线显示
      //     showAllSymbol: true,
      //     symbol: 'circle',
      //     symbolSize: 6,
      //     lineStyle: {
      //       normal: {
      //         color: '#fff' // 线条颜色
      //       }
      //     },
      //     label: {
      //       show: true,
      //       position: 'top',
      //       textStyle: {
      //         color: '#fff'
      //       }
      //     },
      //     itemStyle: {
      //       color: 'red',
      //       borderColor: '#fff',
      //       borderWidth: 3
      //     },
      //     tooltip: {
      //       show: false
      //     },
      //     areaStyle: {
      //       normal: {
      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //           offset: 0,
      //           color: '#eb64fb'
      //         },
      //         {
      //           offset: 1,
      //           color: '#3fbbff0d'
      //         }
      //         ], false)
      //       }
      //     },
      //     data: [36.5, 37.1, 36.2, 38.2, 39.2]
      //   }]
      // }
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      }
      this.myChart.setOption(option)
    }
  },
  mounted () {
    this.myChart = this.$echarts.init(document.getElementById('chart-temp'))
    this.init()
    window.onresize = () => {
      this.myChart.resize()
    }
  }
}
</script>

<style scoped>

</style>
