iot-front-ui/src/components/scene/meeting/chart/meetingPersonDistributeChart.vue

<template>
  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  props: {
    height: Number,
    queryData: Object
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      let chart = this.$echarts.init(this.$refs.myChart)
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          right: 'right',
          top: '20%'
        },

        series: [
          {
            name: '人数分布',
            type: 'pie',
            radius: ['40%', '70%'],
            //avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outside",
                align: "left",
                /* padding: [-5, -40, 30, -10],  */
                /* padding: [-50, -55, 0, -10],  */
                padding: [0, -65],
                formatter: "{b}\n\n{c}", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                textStyle: {
                  align: "left",
                  baseline: "middle",
                  fontFamily: "PingFang SC",
                  fontSize: 14,
                  // color: "#FFF",
                },
              },
            },
            emphasis: {
              label: {
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 60,
            },
            data: [
              { value: 104, name: '4人' },
              { value: 73, name: '6人' },
              { value: 58, name: '8人' },
              { value: 46, name: '10人' },
              { value: 87, name: '12人' },
              { value: 66, name: '14人' },
              { value: 55, name: '18人' },
            ]
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

<style lang="less" scoped>

</style>