echarts 横向进度条 一条三段 没三段表示一条数据 共十一条数据

要实现echarts横向进度条一条三段，每三段表示一条数据，共有十一条数据，您可以使用echarts的自定义系列（custom series）来实现。以下是一个示例代码：

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

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

// 配置选项
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 start1 = api.coord([api.value(0), yValue]);
      var end1 = api.coord([api.value(1), yValue]);
      var start2 = api.coord([api.value(1), yValue]);
      var end2 = api.coord([api.value(2), yValue]);
      var height = api.size([0, 1])[1] * 0.6;

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

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

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

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