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

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

export default {
  name: 'PoliceCount',
  data() {
    return {}
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const data = [
        { type: '北碚区1', value: 779 },
        { type: '北碚区2', value: 779 },
        { type: '北碚区3', value: 779 },
        { type: '北碚区4', value: 779 },
        { type: '北碚区5', value: 779 },
        { type: '北碚区6', value: 779 },
      ];

      const piePlot = new Pie('policeCount', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.64,
        meta: {
          value: {
            formatter: (v) => `${v}`,
          },
        },
        legend: {
          itemName: {
            style: {
              fill: '#85e9ff',
            }
          }
        },
        label: null,
        statistic: {
          title: {
            content: '出警次数',
            style: {
              color: '#fff',
              fontSize: '1vh',
            },
            offsetY: -4,
          },
          content: {
            style: {
              color: '#ffde24',
              fontSize: '1.5vh',
            },
            offsetY: 4,
          },
        },
        interactions: [
          {
            type: 'pie-statistic-active',
            cfg: {
              start: [
                { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
              ],
              end: [
                { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
              ],
            },
          },
        ],
      });

      piePlot.update({ "theme": { "styleSheet": { "brandColor": "#B8E1FF", "paletteQualitative10": ["#B8E1FF", "#9AC5FF", "#7DAAFF", "#5B8FF9", "#3D76DD", "#085EC0", "#0047A5", "#00318A", "#001D70"], "paletteQualitative20": ["#B8E1FF", "#9AC5FF", "#7DAAFF", "#5B8FF9", "#3D76DD", "#085EC0", "#0047A5", "#00318A", "#001D70"] } } });
      piePlot.render();
    }
  }
}
</script>

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