echarts 水桶

ECharts 是百度开源的一款基于 JavaScript 的数据可视化库，它提供了丰富的图表和图形组件，可以用于创建各种类型的交互式数据可视化图表。关于水桶图，ECharts 也提供了相应的组件支持。

在 ECharts 中，可以使用 series 类型为 "funnel" 的图表来实现水桶图。水桶图是一种特殊的漏斗图，它以水桶的形状来展示数据。通过调整漏斗图的参数，可以实现不同形状的水桶图，并可以自定义样式、颜色等属性。

以下是一个简单的示例代码，展示如何使用 ECharts 创建一个水桶图：

// 引入 ECharts
import echarts from 'echarts';

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

// 定义数据
const data = [
  { value: 100, name: '阶段1' },
  { value: 80, name: '阶段2' },
  { value: 60, name: '阶段3' },
  { value: 40, name: '阶段4' },
  { value: 20, name: '阶段5' }
];

// 配置图表选项
const option = {
  series: [
    {
      type: 'funnel',
      width: '60%',
      height: '80%',
      left: 'center',
      top: '15%',
      data: data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

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

以上代码中，我们使用了 ECharts 的 funnel 类型的 series，通过设置不同的数据和配置项，可以创建出具有不同样式和效果的水桶图。