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

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

<script>
import apiSceneMeeting from "@/api/scene/meeting/apiSceneMeeting";

export default {
  data() {
    return {
      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: {
                show: true,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 60,
            },
            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分钟' },
            ]
          }
        ]
      },
    }
  },
  props: {
    height: Number,
    queryData: Object
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let chart = this.$echarts.init(this.$refs.myChart)
      this.chart = chart;
      this.$util.chartsResize(this.chart);
      chart.setOption(this.option)
      this.$store.loadingStore().loadingWithApi(this.getData())
    },
    getData() {
      this.loading = true;
      return apiSceneMeeting.getMeetingCakeMinutes(this.queryData.timeRange).then(res=>{
        let data = this.$util.dataUtil.covertDataToEcharts(res, ['times'])
        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
        this.loading = false;
      }).catch(err=>{
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>