echarts 级联图

ECharts是一个基于JavaScript的强大数据可视化库，它支持创建各种图表，包括级联图（Cascade Chart），也称为树状图、层次图或分层结构图。级联图用于展示层级分明的数据，如组织架构、产品分类、目录结构等。在ECharts中，你可以通过设置节点的位置、大小以及链接线来表示层级关系。

构建级联图的基本步骤通常包括：
1. 创建echarts实例。
2. 定义数据结构，包含父节点ID、子节点列表和其它必要的属性。
3. 使用`series`配置项中的`type: 'tree'`指定图表类型，并配置节点的颜色、形状、展开折叠等功能。
4. 调整布局和样式，例如调整节点间距、颜色递归等。
5. 设置事件监听，以便用户交互操作。

以下是一个简单的级联图配置示例：

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

var option = {
    series: [{
        type: 'tree',
        data: [
            {name: 'root', children: [
                {name: 'A'},
                {name: 'B', children: [
                    {name: 'B1'},
                    {name: 'B2'}
                ]}
            ]}
        ],
        layout: 'radial',
        symbolSize: function (val) {
            return val * 10;
        },
        defaultEdgeLength: 20,
        edgeSymbol: ['-', '|'],
        animationDurationUpdate: 750,
        draggable: true // 可拖动节点
    }]
};

myChart.setOption(option);