echarts实现人物树形关系图实例

本文介绍了如何使用echarts2.0的tree图来实现人物关系图。通过展示HTML和JS代码实例,展示了创建这种关系图的步骤,并提示读者可以查阅echarts文档了解更多属性配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写这个栗子的时候主要因为是刚刚做一个项目,要用到人物关系图,所以一直在找合适插件,最后选择echarts2.0的tree图最合适这个关系图了。哈哈,话不多少,现在就把效果图献上吧。
这里写图片描述
ps:照片是网上下载的,莫要见外啊。
这个使用的是echarts2.X版本
HTML代码

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .a{
        width: 600px;
        height: 327px;
        margin: auto;
    }
</style>
<div class="a" id="a"></div>

下面是js代码:

require.config({paths:{echarts:"plugins/echarts"}});
require(
    ["echarts","echarts/chart/tree"],
    function(ec){
        var myChart=ec.init(document.getElementById('a')); 
        var option={
            title : {
                show:false
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b}"
                //formatter: "{b}: {c}"
            },
            //那个右上角的工具栏
            toolbox: {
                show : false,
            },
            calculable : false,
            series : [
                {
                    name:'树图',
                    type:'tree',
                    //排列方式,横向、纵向
                    orient: 'vertical', 
                    //根节点的位置
                    rootLocation: {x: 'center',y: '10%'}, 
                    //连接线长度
                    layerPadding: 30,
                    //结点间距
                    nodePadding: 20,
                    //图形形状
                    symbol: 'circle',
                    //尺寸大小
                    symbolSize: 40,
                    //图的一些样式设置
                    itemStyle: {
                        //正常情况显示
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                textStyle: {
                                    //字体颜色、大小、加粗
                                    color: '#000',
                                    fontSize: 15,
                                    fontWeight:  'bolder'
                                }
  
以下是一个使用 Echarts 中 type 为 tree 的树形关系实现片节点连接的示例代码: ```javascript // HTML <div id="chart" style="width: 600px; height: 400px;"></div> // JavaScript // 假设有以下片节点的数据 var data = { name: 'Root', children: [ { name: 'Node 1', image: 'node1.png', children: [ { name: 'Node 1.1', image: 'node1_1.png' }, { name: 'Node 1.2', image: 'node1_2.png' } ] }, { name: 'Node 2', image: 'node2.png', children: [ { name: 'Node 2.1', image: 'node2_1.png' }, { name: 'Node 2.2', image: 'node2_2.png' } ] } ] }; // 初始化 Echarts 实例 var chart = echarts.init(document.getElementById('chart')); // 配置项 var option = { series: [ { type: 'tree', data: [data], top: '10%', left: '10%', bottom: '10%', right: '10%', symbol: 'image://', // 片节点使用 image 符号 symbolSize: [60, 60], // 片节点的大小 layout: 'orthogonal', // 布局方式为正交布局 emphasis: { focus: 'descendant' // 强调样式为当前节点及其后代节点 }, label: { position: 'inside', verticalAlign: 'middle', align: 'center', fontSize: 14 }, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left', fontSize: 14 } }, expandAndCollapse: true, // 可以展开和折叠节点 animationDuration: 550, animationDurationUpdate: 750 } ] }; // 使用配置项绘制表 chart.setOption(option); ``` 以上代码示例中,通过配置项中的 `type: 'tree'`,使用片作为节点的符号,并设置了片节点的大小、布局方式、节点样式等属性。可以根据实际需求进行调整和扩展。
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值