<template lang='pug'>
#chart(:style="{ width: '100%', height: '90%' }")
</template>

<script>
export default {
  mounted() {
    this.chart()
  },
  methods: {
    chart() {
      let dom = document.getElementById('chart')
      if (!dom) return
      let myCharts = this.$echarts.init(dom)
      let option = {
        // color:['#D0F0FF'],
        title: {
          text: '温度'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            // type: 'category',
            type: 'time',
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单数量',
            type: 'line',
            stack: '总量',
            smooth: true,
            // label: {
            //   show: true,
            //   position: 'top'
            // },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#21ACFC' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ])
              }
            },
            lineStyle: {
              color: '#21ACFC'
            },
            itemStyle: {
              normal: {
                color: '#13B0FF'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [
              ['2019-8-14 8:00:00', 70],
              ['2019-8-14 8:00:01', 60],
              ['2019-8-14 8:00:02', 30],
              ['2019-8-14 8:00:03', 79],
              ['2019-8-14 8:00:06', 10],
              ['2019-8-14 8:00:20', 31]
            ]
          }
        ]
      }
      myCharts.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>