echarts-liquidfill 3d柱形图

ECharts 是一个基于 JavaScript 的开源可视化库，支持多种类型的图表，包括 3D 柱形图。而 Liquidfill 则是 ECharts 中的一个插件，可以用来创建水球图，即圆形的图表，同时支持动画效果。

要创建一个 3D 柱形图，需要在 ECharts 中引入 echarts-gl（ECharts 的 WebGL 渲染扩展库）和 echarts-liquidfill 插件。代码示例：

// 引入所需的模块
import * as echarts from 'echarts';
import 'echarts-gl';
import 'echarts-liquidfill';

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

// 定义数据
const data = [
  { name: 'A', value: [0, 0, 5] },
  { name: 'B', value: [1, 0, 6] },
  { name: 'C', value: [2, 0, 8] },
  { name: 'D', value: [0, 1, 7] },
  { name: 'E', value: [1, 1, 2] },
  { name: 'F', value: [2, 1, 9] },
  { name: 'G', value: [0, 2, 3] },
  { name: 'H', value: [1, 2, 1] },
  { name: 'I', value: [2, 2, 4] },
];

// 定义配置项
const option = {
  grid3D: {},
  xAxis3D: {
    type: 'category',
    data: ['X', 'Y', 'Z'],
  },
  yAxis3D: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
  },
  zAxis3D: {},
  series: [{
    type: 'bar3D',
    data: data.map(item => ({
      value: item.value.concat(item.value[2]),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0, color: '#00aaff',
        }, {
          offset: 1, color: '#00ffaa',
        }]),
      },
    })),
    shading: 'color',
    barSize: 1,
    opacity: 0.8,
  }, {
    type: 'liquidFill',
    data: data.map(item => ({
      value: item.value[2] / 10,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0, color: '#00aaff',
        }, {
          offset: 1, color: '#00ffaa',
        }]),
      },
    })),
    shape: 'circle',
    label: {
      show: true,
      fontSize: 16,
      color: '#fff',
      formatter: '{b}',
    },
  }],
};

// 使用配置项生成图表
chart.setOption(option);

上述代码中，`data` 数组定义了每个柱形图的名称和坐标位置，`option` 对象则定义了图表的配置项。其中，`grid3D`、`xAxis3D`、`yAxis3D` 和 `zAxis3D` 用于定义 3D 坐标系，`series` 则用于定义 3D 柱形图和水球图。柱形图的样式可以通过 `itemStyle` 属性进行设置，而水球图则可以通过 `liquidFill` 类型的系列来创建。

最后，使用 `setOption` 方法将配置项传入，即可在页面中生成 3D 柱形图。