echarts 横向进度条 一条多段

您好！对于echarts横向进度条一条多段的需求，可以通过使用echarts的自定义系列（custom series）来实现。下面是一个简单的示例代码：

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

// 定义数据
var data = [
  { name: '任务1', value: [30, 70] },
  { name: '任务2', value: [40, 60] },
  { name: '任务3', value: [50, 50] },
  // ...
];

// 配置选项
var option = {
  tooltip: {},
  xAxis: {
    type: 'value',
    max: 100,
    show: false
  },
  yAxis: {
    type: 'category',
    data: data.map(item => item.name),
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: { show: false }
  },
  series: [{
    type: 'custom',
    renderItem: function(params, api) {
      var yValue = api.value(2);
      var start = api.coord([api.value(0), yValue]);
      var end = api.coord([api.value(1), yValue]);
      var height = api.size([0, 1])[1] * 0.6;

      return {
        type: 'rect',
        shape: {
          x: start[0],
          y: start[1] - height / 2,
          width: end[0] - start[0],
          height: height
        },
        style: api.style()
      };
    },
    dimensions: ['start', 'end', 'name'],
    data: data,
    z: 10
  }]
};

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

上述代码中，我们使用了echarts的custom series来自定义渲染进度条的形状。通过指定每个任务的起始值和结束值，以及任务名称，我们可以动态生成多段进度条。

您可以根据自己的需求修改数据和样式来实现更复杂的效果。希望对您有帮助！如果还有其他问题，请随时提问。