echarts排行榜进度条

要创建 ECharts 排行榜进度条，你可以使用 ECharts 的自定义系列（custom series）来实现。下面是一个简单的示例代码：

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

// 创建图表实例
const chart = echarts.init(document.getElementById('chart-container'));

// 自定义系列数据
const data = [
  { name: '项目A', value: 80 },
  { name: '项目B', value: 60 },
  { name: '项目C', value: 40 },
  { name: '项目D', value: 20 }
];

// 构造进度条数据
const progressData = data.map(item => ({
  name: item.name,
  value: item.value,
  label: {
    show: true,
    position: 'inside',
    formatter: `{c}%` // 显示百分比标签
  }
}));

// 配置图表选项
const options = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c}%'
  },
  series: [
    {
      type: 'bar',
      data: progressData,
      barWidth: 20, // 进度条宽度
      itemStyle: {
        color: '#3398DB' // 进度条颜色
      }
    }
  ]
};

// 设置图表选项并渲染
chart.setOption(options);

上述代码将创建一个带有进度条的排行榜图表，并显示每个项目的进度值。你需要将 `chart-container` 替换为你想要放置图表的 HTML 元素的 ID。同时，你可以根据自己的需求修改进度条的样式和配置。

记得在使用之前引入 ECharts 库文件，可以在 [ECharts 官网](https://echarts.apache.org/zh/index.html) 下载。希望对你有帮助！