echarts修改柱状图为电池图

要将 ECharts 的柱状图修改为电池图，可以按照以下步骤进行：

1. 首先，需要将柱状图的轴线调整为水平方向，即将 `xAxis` 改为 `yAxis`。

2. 然后，需要将柱状图的柱子改为电池形状。这可以通过自定义图形实现。具体步骤如下：

- 在 `series` 中添加 `type: 'custom'`，表示使用自定义图形。

- 在 `series` 中添加 `data`，表示要展示的数据。

- 在 `series` 中添加 `renderItem`，表示自定义图形的绘制方法。在这个方法中，可以使用 ECharts 的 `graphic` 组件来绘制电池图形。

下面是一个示例代码，可以参考一下：

option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['电池1', '电池2', '电池3', '电池4']
  },
  series: [
    {
      type: 'custom',
      data: [80, 50, 30, 70],
      renderItem: function(params, api) {
        var categoryIndex = api.value(1);
        var start = api.coord([0, categoryIndex]);
        var end = api.coord([api.value(0), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;

        return {
          type: 'group',
          children: [
            {
              type: 'rect',
              shape: {
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
              },
              style: api.style({
                stroke: '#999',
                fill: {
                  type: 'linear',
                  colorStops: [
                    { offset: 0, color: '#FFE600' },
                    { offset: 1, color: '#FFA500' }
                  ]
                }
              })
            },
            {
              type: 'rect',
              shape: {
                x: end[0] - height / 2,
                y: start[1] - height / 2,
                width: height,
                height: height
              },
              style: api.style({
                stroke: '#999',
                fill: {
                  type: 'linear',
                  colorStops: [
                    { offset: 0, color: '#FFA500' },
                    { offset: 1, color: '#FFE600' }
                  ]
                }
              })
            },
            {
              type: 'text',
              style: {
                text: api.value(0),
                textFill: '#000',
                fontSize: 12,
                fontWeight: 'bold'
              },
              position: [end[0] + 5, start[1]],
              rotation: Math.PI / 2
            }
          ]
        };
      }
    }
  ]
};

在这个示例中，我们使用了 `group` 组件来组合多个图形，包括两个矩形和一个文本标签，来绘制每个电池的形状。注意，这里的电池形状是通过两个矩形和一个文本标签组合而成的。其中，第一个矩形表示电池的填充状态，第二个矩形表示电池的外壳，文本标签则表示电池的电量百分比。可以根据实际需求调整每个图形的样式和位置。