Echarts怎么画多种类型数据的漏斗图

ECharts是一个强大的JavaScript图表库，绘制漏斗图（Funnel chart）可以让你轻松地呈现复杂的数据分布情况。以下是在ECharts中创建包含多种类型数据的漏斗图的步骤：

1. **引入依赖**：首先，需要在HTML文件中引入ECharts库的CDN链接或本地路径。

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>

2. **准备数据**：结构化你的数据，每行应包含类别名（通常就是每个阶段）、值（对应的人数或比例），以及总计（如果有的话）。

var data = [
    { name: '阶段A', value: 1000, total: 2000 },
    { name: '阶段B', value: 800, total: null }, // 如果某阶段不需要总计
    { name: '阶段C', value: 500 },
    { name: '阶段D', value: 200 }
];

3. **初始化图表**：创建一个新的ECharts实例，并配置视图为漏斗图。

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    type: 'funnel',
});

4. **设置选项**：传递包含数据和样式配置的选项给`setOption`函数。

var option = {
    series: [{
        name: '漏斗图',
        data,
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};
myChart.setOption(option);

5. **渲染图表**：最后调用`resize`方法确保图表适应容器大小，并显示在页面上。

window.addEventListener('resize', function () {
    myChart.resize();
});