用Web echarts 绘制树形图 示例

Web ECharts是一款流行的JavaScript图表库，用于创建各种类型的可视化图表，包括树状图。下面是一个简单的例子，展示如何使用ECharts绘制树形图：

首先，你需要在HTML文件中引入ECharts的JS文件和CSS样式：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5/themes/default/index.css">

然后，在JavaScript部分，你可以创建一个Tree组件并配置数据：

// 创建一个ECharts实例
var myChart = echarts.init(document.getElementById('treeChart'));

// 数据结构，假设这是你的树形图节点数据
var treeData = {
  name: '根节点',
  children: [
    {name: '子节点1', children: [{name: '孙子节点'}, {name: '另一个孙子节点'}]},
    {name: '子节点2'}
  ]
};

// 配置选项
var option = {
  type: 'tree',
  // 树形图的基本配置
  data: treeData,
  roam: true, // 自动缩放
  animationDurationUpdate: 750, // 动画时长
  label: {
    normal: {
      position: 'top'
    }
  },
  series: [{
    name: '树',
    draggable: true, // 可拖拽节点
    edgeSymbol: ['none'], // 箭头隐藏
    edgeLabel: {
      show: false
    }
  }]
};

// 渲染图表
myChart.setOption(option);

最后，将这个`option`设置到图表上：

myChart.show();

这就是一个基本的ECharts Tree图示例。你可以根据需要调整数据、颜色、动画效果等。