echarts 横向柱状图且柱状图的柱体更换成正方体

要实现横向正方体柱状图，可以使用 echarts 中的自定义系列（custom series）。具体实现步骤如下：

1. 定义一个自定义系列，指定渲染类型为 box3d，并设置对应的参数，如下：

echarts.custom.registerVisual(function (ecModel) {
  ecModel.eachSeriesByType('custom', function (seriesModel) {
    var data = seriesModel.getData();

    data.setVisual('color', '#c23531');
    data.setVisual('drawType', 'box3d');
    data.setVisual('boxWidth', 10);
    data.setVisual('boxHeight', 10);
    data.setVisual('boxDepth', 10);
  });
});

echarts.custom.registerLayout(function (ecModel) {
  ecModel.eachSeriesByType('custom', function (seriesModel) {
    var data = seriesModel.getData();

    data.each(function (idx) {
      var layout = data.getItemLayout(idx);
      layout.width = data.getVisual('boxWidth');
      layout.height = data.getVisual('boxHeight');
      layout.depth = data.getVisual('boxDepth');
    });
  });
});

echarts.custom.registerProcessor(function (ecModel, api) {
  ecModel.eachSeriesByType('custom', function (seriesModel) {
    var data = seriesModel.getData();

    data.each(function (idx) {
      var layout = data.getItemLayout(idx);
      var point = api.coord([data.get('value', idx), idx]);
      layout.x = point[0] - layout.width / 2;
      layout.y = point[1] - layout.height / 2;
      layout.z = 0;
    });
  });
});

var option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [{
    type: 'custom',
    data: [10, 20, 30, 40, 50],
    encode: {
      y: 0
    }
  }]
};

2. 在自定义系列中，通过设置 drawType 为 box3d 来指定渲染类型为 3D 正方体。同时，通过设置 boxWidth、boxHeight 和 boxDepth 来指定正方体的宽度、高度和深度。

3. 在自定义系列的 layout 转换过程中，将每个数据项的 layout.width、layout.height 和 layout.depth 分别设置为对应的 boxWidth、boxHeight 和 boxDepth。

4. 在自定义系列的 processor 过程中，通过调用 api.coord 方法将数值坐标转换为像素坐标，然后根据像素坐标和正方体的大小计算出每个正方体的位置。

5. 最后，在 option 中将系列的类型设置为 custom，然后将数据项的值 encode 到 y 轴上。

上述代码实现的效果为横向正方体柱状图，每个数据项对应一个宽度为 10，高度为 10，深度为 10 的正方体。可以根据实际需求修改对应的参数。