echarts 半圆形进度条

您可以使用 ECharts 来创建半圆形进度条。以下是一个简单的示例代码：

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

// 创建一个容器元素
const container = document.getElementById('chartContainer');

// 初始化 ECharts 实例
const chart = echarts.init(container);

// 设置图表配置项
const option = {
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'], // 设置半圆形的内外半径
      startAngle: 225, // 设置起始角度
      hoverAnimation: false, // 禁用 hover 动画效果
      label: {
        show: false, // 不显示标签文字
      },
      data: [
        {
          value: 75, // 设置进度条的值
          itemStyle: {
            color: 'blue', // 设置进度条的颜色
          },
        },
        {
          value: 25,
          itemStyle: {
            color: '#eee',
          },
        },
      ],
    },
  ],
};

// 使用配置项显示图表
chart.setOption(option);

上述代码中，需要先引入 ECharts 库，并创建一个容器元素作为图表的展示区域。然后，通过 `echarts.init` 方法初始化一个 ECharts 实例，并设置图表的配置项，其中 `series` 部分是关键，通过设置 `type` 为 `'pie'`，`radius` 为半圆形的内外半径，`startAngle` 为起始角度来实现半圆形进度条的效果。最后，使用 `chart.setOption` 方法将配置项应用到图表中。

您可以根据自己的需求对代码进行修改和调整，来实现更多个性化的效果。希望对您有所帮助！