<template>
  <div id="thr">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="title"> 平台用户 </el-col>
        <el-col :span="24" class="canvas">
          <div id="thrChart" style="height: 420px"></div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: statistics } = createNamespacedHelpers('statistics');
export default {
  name: 'thr',
  props: {},
  components: {},
  data: function () {
    return {};
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    ...statistics(['query']),
    async init() {
      let res = await this.query({ type: 'users' });
      if (this.$checkRes(res)) {
        const { data } = res;
        var chartDom = document.getElementById('thrChart');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            left: 'center',
          },
          series: [
            {
              name: '平台用户',
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              },
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: data,
            },
          ],
        };

        option && myChart.setOption(option);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 0;
  }
}
</style>
