echarts 柱状图横向

可以使用 ECharts 中的 bar 图表来实现横向柱状图。

首先，你需要在 HTML 文件中引入 ECharts 的库文件。可以从 ECharts 的官方网站上下载最新版本的库文件，并在 HTML 文件中添加如下代码：

<script src="echarts.min.js"></script>

接下来，在 JavaScript 文件中，你可以创建一个容纳图表的 DOM 元素，并使用 ECharts 的 API 初始化图表对象：

var myChart = echarts.init(document.getElementById('chart-container'));

然后，你可以配置图表的数据和样式，使用 ECharts 提供的 API 来实现横向柱状图：

var option = {
    tooltip: {},  // 鼠标悬停时显示提示框
    xAxis: {       // x 轴配置
        type: 'value',
        show: false  // 不显示 x 轴
    },
    yAxis: {       // y 轴配置
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],  // y 轴上的数据
        axisLine: { show: false },         // 不显示 y 轴线
        axisTick: { show: false },         // 不显示刻度线
        axisLabel: { show: true }          // 显示刻度标签
    },
    series: [{
        type: 'bar',           // 使用柱状图
        data: [10, 20, 30, 40, 50],  // 柱状图的数据
        barWidth: 20,          // 设置柱状图的宽度
        itemStyle: {           // 设置柱状图的样式
            color: 'blue'
        }
    }]
};

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

最后，将图表容器放在 HTML 文件中的合适位置：

<div id="chart-container" style="width: 600px; height: 400px;"></div>

通过以上步骤，你就可以实现一个横向柱状图了。你可以根据需要修改数据和样式来自定义你的柱状图。