人物关系知识图谱echarts斗破苍穹

one我

已于 2022-05-19 11:17:27 修改

阅读量546

点赞数

文章标签： echarts 前端 javascript

于 2022-05-18 23:02:36 首次发布

本文链接：https://blog.csdn.net/qq_25038947/article/details/124853258

版权

使用HTML、jQuery和Echarts，在HBuilder X环境下构建了斗破苍穹小说中的人物关系知识图谱，展示了角色间的关联。

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

采用html代码引用jquery和echarts库实现斗破苍穹的人物关系知识图谱。
环境：HBuilder X

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ECharts 实现斗破苍穹关系图谱</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style type="text/css">
        html, body, #main {
      height: 100%; width: 100%; margin: 0; padding: 0 }
    </style>
</head>
<body>
    <div id="main" style=""></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        option = {
     
            title: {
      text: '斗破苍穹关系图谱' },
            tooltip: {
     
                formatter: function (x) {
     
                    return x.data.des;
                }
            },//人物关系知识图谱主题
            series: [
                {
     
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 80,
                    roam: true,
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
     
                        normal: {
     
                            textStyle: {
     
                                fontSize: 20
                            }
                        }
                    },
                   force: {
     
                       repulsion: 2500,
                       edgeLength: [10, 50]
                   },
                    draggable: true,
                    itemStyle: {
     
                        normal: {
     
                            color: '#4b565b'
                        }
                    },
                    lineStyle: {
     
                        normal: {
     
                            width: 2,
                            color: '#4b565b'
 
                        }
                    },
                    edgeLabel: {
     
                        normal: {
     
                            show: true,
                            formatter: function (x) {
     
                                return x.data.name;
                            }
                        }
                    },
                    label: {
     
                        normal: {
     
                            show: true,
                            textStyle: {
     
                            }
                        }
                    },
                    data: [
                        {
     
                            name: '萧炎',
                            des: '本书主角，穿越者，带着成年人的记忆从地球转生到斗气大陆。<br/>在药老停止吸收斗之气并答应帮他重展天资后，一年时间内突破至斗之气九段，震惊全城。<br/>后来萧炎踏上了修炼之旅，以他的执着与信念闯荡大陆，一路历经坎坷，向着巅峰强者之途迈进，<br/>最终收服天下万火，成为万火之帝，号"炎帝"。',
                            symbolSize: 100,
                            itemStyle: {
     
                                normal: {
     
                                    color: '#FF1493'
                                }
                            }
                        }, {
     
                            name: '药尘',
                            des: '人称药老、药尊者，后称药圣，<br/>拥有“骨灵冷火”（后赠与萧炎）。星陨阁极少露面的阁主。初为九转斗尊巅峰强者，九品炼药宗师。<br/>因遭叛徒韩枫出卖而落难成为灵魂状态，潜伏于一个戒指中，后戒指辗转落入萧炎之手，<br/>在吸收萧炎三年斗之气后恢复意识。之后药尘一路帮助萧炎成长，将毕生斗技和炼药术倾囊相授，<br/>多次救萧炎于危难之中，成为萧炎一生中最敬重的老师。经萧炎炼制斗尊强者骨骸外加造化圣者手臂骨而复活，<br/>其实力提升至半圣，在服用了萧炎带回来的黄泉妖圣精血后晋阶成一星斗圣。',
                            itemStyle: {
     
                                normal: {
     
                                    color: '#FF1493'
                                }
                            }
                        }, {
     
                            name: '古薰儿',
                            des: '清纯可人，高傲冷漠。古族的大小姐，其身份背景为古族族长（古元）千金，<br/>是古族难得神品血脉拥有者，天赋异禀，拥有异火“金帝焚天炎”，<br/>依靠传承的斗帝血脉和古族家族力量实力暴涨得很快。<br/>先在迦南学院等萧炎两年，后又为保护萧炎而返回古界。',
                            itemStyle: {
     
                                normal: {
     
                                    color: '#FF1493'
                                }
                            }
                        }, {

最低0.47元/天解锁文章