echarts显示立体柱体

ECharts是一个强大的JavaScript数据可视化库，它支持创建各种图表，包括立体柱状图。要在ECharts中展示立体柱状图（也称为3D柱状图），你需要使用ECharts的`bar3D`系列，并设置相关的属性。以下是基本步骤：

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

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

2. 创建一个div元素用于容纳图表：

<div id="main" style="width: 800px;height: 600px;"></div>

3. 使用JavaScript初始化并配置图表：

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

// 指定图表的配置项和数据
var option = {
  title: {
    text: '3D立体柱状图'
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: [
    {
      type: 'value'
    }, // 垂直轴
    {
      type: 'value',
      position: 'right' // 右侧轴
    }
  ],
  series: [{
    name: '数值',
    type: 'bar3D',
    data: [[120, 150], [140, 170], [160, 190], [180, 210], [200, 230]], // 数据数组，每个数组对应一个维度
    label: {
      show: true,
      position: 'top'
    }
  }]
};

myChart.setOption(option);

在这个例子中，我们设置了两个y轴，一个是常规的垂直轴，另一个在右侧显示另一组值，形成了3D效果。`series.data`中的二维数组表示每个柱子在三个维度（x、y和z轴）上的大小。