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

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

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

    }
  },
  props: {
    height: Number
  },
  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: {
              show: false,
              formatter: params => {
                let name = params.name;
                return params.name
              },
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 104, name: '30分钟' },
              { value: 73, name: '60分钟' },
              { value: 58, name: '90分钟' },
              { value: 46, name: '120分钟' },
              { value: 87, name: '150分钟' },
              { value: 66, name: '180分钟' },
              { value: 55, name: '210分钟' },
              { value: 30, name: '240分钟' },
            ]
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

<style lang="less" scoped>

</style>