<template>
  <v-chart
    style="width:100%;height:100%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
export default {
  data () {
    let data = []
    for (let i = 0; i < 7; i++) {
      for (let j = 0; j < 12; j++) {
        let value = Math.floor(Math.random() * 1000)
        data.push([i, j, value])
      }
    }
    const yData = ['0 am', '2 am', '4 am', '6 am', '8 am', '10 am', '12 am', '2 pm', '4 pm', '6 pm', '8 pm', '10 pm']
    return {
      option: {
        color: ['#F5501E', '#EFDF2A', '#0AA6EB', '#7DB713', '#7A55BB', '#FE645F', '#FECA62', '#4ECAD0'],
        tooltip: {
          trigger: 'item',
          formatter: (item) => {
            return `${item.name}，${yData[item.data[1]]}，${item.data[2]}`
          }
        },
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 60,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
          splitArea: {
            show: true
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          position: 'right',
          inverse: true,
          axisTick: {
            show: false
          },
          type: 'category',
          data: yData,
          splitArea: {
            show: true
          }
        },
        visualMap: {
          type: 'piecewise',
          min: 0,
          max: 1000,
          calculable: true,
          pieces: [
            {min: 801, color: '#673BB5'}, // 不指定 max，表示 max 为无限大（Infinity）。
            {min: 601, max: 800, color: '#7E57C0'},
            {min: 401, max: 600, color: '#9575CB'},
            {min: 201, max: 400, color: '#9575CB'},
            {min: 0, max: 200, color: '#D2C0F1'}
          ],
          itemGap: 5,
          itemWidth: 40,
          text: ['1000', '0'],
          orient: 'horizontal',
          left: 'center',
          bottom: 20
        },
        series: [
          {
            name: '销售分时数据',
            type: 'heatmap',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              borderWidth: 5,
              borderColor: '#fff',
              emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: data
          }
        ]
      }
    }
  }
}
</script>
