echarts圆环占比图

要创建一个圆环占比图，你可以使用 ECharts 的环图（Donut Chart）。环图是一种饼图的变体，它具有内外两个半径，可以展示各个数据项的占比关系。

下面是一个使用 ECharts 创建圆环占比图的示例：

// 引入 ECharts 库
import echarts from 'echarts';

// 初始化 ECharts 实例
const myChart = echarts.init(document.getElementById('chart'));

// 定义数据
const data = [
  { name: 'A', value: 30 },
  { name: 'B', value: 50 },
  { name: 'C', value: 20 },
];

// 设置环图的配置项
const options = {
  series: [
    {
      type: 'pie',
      radius: ['40%', '55%'], // 内外半径，可调整环的大小
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: data.map(item => ({
        name: item.name,
        value: item.value,
      })),
    },
  ],
};

// 使用配置项绘制图表
myChart.setOption(options);

在以上代码中，我们创建了一个圆环占比图，其中包含三个数据项。通过调整内外半径的大小，你可以控制圆环的宽度。你还可以根据需要修改数据和配置项，以创建适合你项目的圆环占比图。

请注意，以上代码只是一个简单的示例，你可以根据自己的需求进行样式和交互的定制。更多的用法和配置可以参考 ECharts 的官方文档。