首页echarts 树形图

echarts 树形图

时间: 2024-01-04 08:19:50 浏览: 110

以下是使用echarts实现树形图的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Tree Example</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 树形图的数据 var data = { name: 'Root', children: [ { name: 'Node 1', children: [ { name: 'Leaf 1' }, { name: 'Leaf 2' } ] }, { name: 'Node 2', children: [ { name: 'Leaf 3' }, { name: 'Leaf 4' } ] } ] }; // 配置项 var option = { tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'tree', data: [data], top: '1%', left: '7%', bottom: '1%', right: '20%', symbolSize: 7, label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 9 }, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left' } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 } ] }; // 使用配置项显示图表 myChart.setOption(option); </script> </body> </html> ``` 这个示例展示了一个简单的树形图，其中包含根节点和两个子节点。每个节点可以展开和折叠，鼠标移动到节点上时会显示节点的描述信息。你可以根据自己的需求修改数据和配置项来创建自定义的树形图。

阅读全文