Echarts 图表饼状图设置

在做项目的时候被提出了使用饼状图来显示人员分布情况，用到了echarts，本篇博客是学习记录博客，经别的博客改编：
https://blog.csdn.net/sleepwalker_1992/article/details/82532210 原文戳这儿，属性讲的都很细致，我只是修改了一些属性而已。

组件的代码（上面都有属性的解释，容易看懂）：

<!--  -->
<template>
  <div>
      <div id="main" style="width:600px;height:400px;"></div>
  </div>
</template>

<script>
import { user_list } from "@/api/user.js";
let echarts = require('echarts/lib/echarts')

export default {
  data () {
    return {
      numbers:[]
    };
  },

  created: function(){
},

  components: {},

  computed: {},

  mounted: function(){
      this.getInfo()
  },

  methods: {
    table(){
      var myChart = echarts.init(document.getElementById('main'));
      let data1 = [];
      let data2 = [];
      for(let i = 0;i < this.numbers.length;i ++){
        data1[i] = this.numbers[i].name;
        data2[i] = {
          value: this.numbers[i].users.length,
          name: this.numbers[i].name
        }
      }
      var options = {
        title: {
            text: '工作室方向分布图',
            subtext: '',
            // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'top',
            // itemGap设置主副标题纵向间隔，单位px，默认为10，
            itemGap: 10,
            backgroundColor: 'white',
            // 主标题文本样式设置
            textStyle: {
              fontSize: 26,
              fontWeight: 'bolder',
              color: 'black'
            },
            // 副标题文本样式设置
            subtextStyle: {
              fontSize: 18,
              color: '#8B2323'
            }
          },
          // 设置提示框
          tooltip: {
            // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
            trigger: 'item',
            showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
            hideDelay: 20,   // 隐藏延迟，单位ms
            backgroundColor: 'rgba(255,0,0,0.7)',  // 提示框背景颜色
            textStyle: {
              fontSize: '16px',
              color: '#000'  // 设置文本颜色 默认#FFF
            },
            // formatter设置提示框显示内容
            // {a}指series.name  {b}指series.data的name
            // {c}指series.data的value  {d}%指这一部分占总数的百分比
            formatter: '{a} <br/>{b} : {c}人 ({d}%)'
          },

          legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'vertical',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'center',
            itemWidth: 24,   // 设置图例图形的宽
            itemHeight: 18,  // 设置图例图形的高
            textStyle: {
              color: '#666'  // 图例文字颜色
            },
            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
            itemGap: 30,
            backgroundColor: 'white',  // 设置整个图例区域背景颜色
            data: data1
          },

          series: [
            {
              name: '方向分布',
              type: 'pie',
              radius: '50%',  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
              radius: [0, '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
              center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
              data:data2,
              // itemStyle 设置饼状图扇形区域样式
              itemStyle: {
                // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)'
                }
              },
              // 设置值域的那指向线
              labelLine: {
                normal: {
                  show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                }
              },
              // 设置值域的标签
              label: {
                normal: {
                  position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                  // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                  // {a}指series.name  {b}指series.data的name
                  // {c}指series.data的value  {d}%指这一部分占总数的百分比
                  formatter: '{c}'
                }
              }
            }
          ],
      };
      myChart.setOption(options);
    },
    getInfo(){
      user_list().then((res)=>{
        this.$store.dispatch('addnumbers',res.data.data)
        this.numbers = this.$store.state.user.userInfo
        this.table()
      })
    },
  }
}

</script>
<style lang='less' scoped>
</style>

结果