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

最新推荐文章于 2025-07-07 14:56:28 发布

guorui_cara

最新推荐文章于 2025-07-07 14:56:28 发布

阅读量4.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签：人物关系图 echarts 树状图

本文链接：https://blog.youkuaiyun.com/guorui_cara/article/details/78535215

本文介绍了如何使用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'
                                }