echarts双横向柱状图

你可以使用 ECharts 来创建双横向柱状图。以下是一个使用 ECharts 的示例代码来绘制双横向柱状图的方法：

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

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 自定义数据
var data = [
  { name: '类别1', value1: 100, value2: 200 },
  { name: '类别2', value1: 150, value2: 120 },
  { name: '类别3', value1: 70, value2: 90 },
  { name: '类别4', value1: 200, value2: 180 },
];

// 提取数据中的 value1 和 value2 列
var value1Data = data.map(item => item.value1);
var value2Data = data.map(item => item.value2);

// 可以根据需要自定义配置项
var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow' // 阴影指示器
    }
  },
  legend: {
    data: ['值1', '值2']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'value'
    }
  ],
  yAxis: [
    {
      type: 'category',
      data: data.map(item => item.name)
    }
  ],
  series: [
    {
      name: '值1',
      type: 'bar',
      data: value1Data,
      label: {
        show: true,
        position: 'inside'
      }
    },
    {
      name: '值2',
      type: 'bar',
      data: value2Data,
      label: {
        show: true,
        position: 'inside'
      }
    }
  ]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

上述代码中，我们首先引入了 ECharts，并且基于一个指定的 DOM 元素初始化了一个 ECharts 实例（`myChart`）。然后，我们定义了需要展示的数据（`data`）和两个柱状图系列的数值数据（`value1Data` 和 `value2Data`）。接下来，我们可以根据需要自定义配置项（`option`），其中包括图表的样式、轴配置、系列配置等。最后，使用 `setOption` 方法将配置项应用到 ECharts 实例上，从而显示出双横向柱状图。

请确保在使用该代码之前已经正确引入了 ECharts 库，并将一个具有指定 id 的 DOM 元素作为容器。你可以根据实际需求对代码进行调整和扩展。