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

<script>
import { Area } from '@antv/g2plot';

export default {
  name: 'CallPoliceCount',
  data() {
    return {}
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const data = [
        {
          type: '星期一',
          value: 30
        },
        {
          type: '星期二',
          value: 80
        },{
          type: '星期三',
          value: 70
        },{
          type: '星期四',
          value: 90
        },{
          type: '星期五',
          value: 100
        },
        {
          type: '星期六',
          value: 110
        },
        {
          type: '星期日',
          value: 120
        },
      ]

      const area = new Area('callPoliceCount', {
        data,
        xField: 'type',
        yField: 'value',
        xAxis: {
          range: [0, 1],
          label: {
            style: {
              fill: '#85e9ff'
            }
          }
        },
        yAxis: {
          grid: {
            line: {
              style: {
                stroke: '#3be1ff',
                lineDash: [3, 3],
                opacity: 0.5
              }
            }
          },
          label: {
            style: {
              fill: '#85e9ff'
            }
          }
        },
        areaStyle: () => {
          return {
            fill: 'l(90) 0:#18B7F7 0.5:#7ec2f3 1:#000000',
          };
        },
      });
      area.render();
    }
  }
}
</script>

<style scoped lang='less'>
#callPoliceCount {
  width: 312px;
  height: 160px;
}
</style>
