echarts 立体柱状图

ECharts是一个基于JavaScript的可视化库，提供了丰富的图表和交互功能。要实现立体柱状图，可以使用ECharts的柱状图（bar）系列，并结合其3D功能。

下面是一个简单的例子，展示如何创建一个立体柱状图：

// 引入echarts
import echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入3D效果
import 'echarts-gl';

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 配置项
var option = {
  // 设置3D效果
  tooltip: {},
  visualMap: {
    max: 20,
    inRange: {
      color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    }
  },
  xAxis3D: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  },
  yAxis3D: {
    type: 'value'
  },
  zAxis3D: {
    type: 'category',
    data: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5']
  },
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    viewControl: {
      // 设置初始视角
      distance: 300
    },
    light: {
      // 设置光源的方向
      main: {
        intensity: 1.2,
        shadow: true,
        shadowQuality: 'high',
        alpha: 30,
        beta: 30
      },
      ambient: {
        intensity: 0.2
      }
    }
  },
  series: [{
    type: 'bar3D',
    data: [
      ['A', 0, 'Category1', 10],
      ['B', 1, 'Category2', 15],
      ['C', 2, 'Category3', 13],
      ['D', 3, 'Category4', 7],
      ['E', 4, 'Category5', 18],
      ['F', 5, 'Category1', 16],
      ['G', 6, 'Category2', 9],
      ['H', 7, 'Category3', 11],
      ['I', 8, 'Category4', 7],
      ['J', 9, 'Category5', 13]
    ],
    shading: 'lambert',
    label: {
      textStyle: {
        fontSize: 16,
        borderWidth: 1
      }
    },
    itemStyle: {
      opacity: 0.8
    }
  }]
};

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

这个例子中，我们先引入了ECharts和柱状图（bar）系列，以及3D效果（echarts-gl）。然后，我们初始化了一个ECharts实例，并设置配置项。在配置项中，我们通过设置xAxis3D、yAxis3D、zAxis3D和series来创建立体柱状图。其中，xAxis3D和yAxis3D分别表示x轴和y轴，zAxis3D表示z轴，而series中使用了bar3D类型的柱状图。

这个例子中，我们设置了数据、颜色、光源方向等属性，以及一些交互功能。可以根据需要进行更改和定制。