echarts图环形显示百分比断断续续展示一组数据3D仪表盘

您可以使用 ECharts 中的饼图（pie）和仪表盘（gauge）来展示环形百分比和3D效果。

首先，对于饼图，您可以设置其为环形图（pie），并使用 label 的 formatter 属性来设置每个扇形的显示内容，包括数值和百分比。例如，以下代码可以生成一个环形饼图：

option = {
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'], // 环形饼图
      label: {
        show: true,
        formatter: '{b}:\n{d}%'
      },
      data: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
      ]
    }
  ]
};

接下来，对于3D仪表盘，您可以使用 gauge 组件，并设置其为 3D 模式（gauge.type = 'gauge'）和使用3D效果（gauge.detail.show = true）。例如，以下代码可以生成一个3D仪表盘：

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      clockwise: true,
      min: 0,
      max: 100,
      axisLine: {
        show: true,
        lineStyle: {
          width: 30,
          opacity: 0.6,
          color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']]
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        length: 30,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: true,
        length: '50%',
        width: 8
      },
      detail: {
        show: true,
        offsetCenter: [0, '75%'],
        formatter: '{value}%'
      },
      data: [{value: 50}]
    }
  ]
};

最后，您可以将两个图表结合在一起，实现环形显示百分比和3D仪表盘的效果。例如，以下代码可以将两个图表结合在一起：

option = {
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'], // 环形饼图
      label: {
        show: true,
        formatter: '{b}:\n{d}%'
      },
      data: [
        {value: 50, name: '完成率'},
        {value: 50, name: '剩余率'}
      ]
    },
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      clockwise: true,
      min: 0,
      max: 100,
      axisLine: {
        show: true,
        lineStyle: {
          width: 30,
          opacity: 0.6,
          color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']]
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        length: 30,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: true,
        length: '50%',
        width: 8
      },
      detail: {
        show: true,
        offsetCenter: [0, '75%'],
        formatter: '{value}%'
      },
      data: [{value: 50}]
    }
  ]
};

希望这可以帮助到您！