echarts绘制水平立体柱状图

ECharts是一个强大的数据可视化库，可以用来创建各种图表，包括水平立体柱状图。这种图表通常用于比较各个类别在不同维度上的数据分布。以下是基本步骤：

1. **引入依赖**：
首先，在HTML文件中引入ECharts的JS库和CSS样式。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/extension/theme/macarons.min.css">

2. **初始化图表**：
创建一个`<div>`元素，并为其设置id，然后在JavaScript里初始化ECharts实例。

var myChart = echarts.init(document.getElementById('main'));

3. **配置数据**：
定义数据结构，包括系列（bar series）的数据、标签数组等。例如：

var option = {
    xAxis: { // 横坐标
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: { // 竖直坐标
        type: 'value'
    },
    series: [
        {
            name: '数值',
            type: 'bar3d', // 设置为三维柱状图类型
            data: [[1, 2, 3], [4, 5, 6], [7, 8, 9]], // 数据矩阵，每行对应一个条形图
            barWidth: 40,
            itemStyle: {
                color: '#fff', // 柱体颜色
                normal: {
                    opacity: 0.8 // 不透明度
                }
            }
        }
    ]
};

4. **渲染图表**：
将配置项应用到图表上。

myChart.setOption(option);