vue3 数据可视化大屏 - 数据资产大屏 项目开发中，有一个饼状图效果。饼状图根据数据值的大小显示不同的大小，并且有两个label，饼状图内显示数字，饼状图外显示标题。

饼状图根据数值的大小显示不同的大小，我们可以通过roseType: 'area'来实现。
两个label我们可以创建两个饼状图让其重叠即可。

演示实例

实现代码

<template>
  <div class="echarts1" ref="echarts">
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      default() {
        return [
          {
            name: '1.5小时',
            value: 410
          },
          {
            name: '1小时',
            value: 320
          },
          {
            name: '半小时',
            value: 290
          },
          {
            name: '20分钟',
            value: 620
          },
          {
            name: '5分钟',
            value: 520
          }];
      }
    },
  },
  watch: {
    list() {
      this.drawLine()
    },
  },
  mounted() {
    var that = this;
    const viewElem = document.body;
    // 监听窗口变化,重绘echarts
    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        that.drawEcharts();
      }, 300)
    });
    resizeObserver.observe(viewElem);
  },
  methods: {
    drawEcharts() {
      var that = this
      let myChart = echarts.init(this.$refs.echarts)
      var colors = ['#3254dd', '#bfe5fb', '#3cd496', '#2b8ff3', '#47e5e5']
      var data = that.list
      var option = {
        color: colors,
        series: [
          {
            name: '校门进出停留时长统计',
            type: 'pie',
            roseType: 'area',
            radius: ['0%', '80%'],
            center: ['50%', '50%'],
            label: {
              position: 'inside',
              normal: {
                show: true,
                formatter: "{c}",
                fontSize: 14,
                color: '#021452',
                position: 'inside',
              },
            },
            data: data
          },
          {
            name: '校门进出停留时长统计',
            type: 'pie',
            roseType: 'area',
            radius: ['0%', '80%'],
            center: ['50%', '50%'],
            labelLine: {
              normal: {
                show: false,
                length: 0,
                length2: 0
              },
              emphasis: {
                show: false
              }
            },
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                fontSize: 14,
                color: 'auto',
                position: 'outside',
              },
            },
            data: data
          },
        ],
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>