vue前端思维导图，jsMind使用，配置每项颜色，节点是否默认展开，点击事件监听，jsMind资源文件

凉豆菌

已于 2024-08-08 11:20:14 修改

阅读量92

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-08-08 11:16:23 首次发布

本文链接：https://blog.csdn.net/m0_67755668/article/details/141021697

版权

动态配置背景，连接线颜色，节点是否默认展开，示例代码，解析详见代码，有问题可留言。

资源地址：jsmind资源文件

效果图：

代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>思维导图</title>
    <link type="text/css" rel="stylesheet" href="/css/jsmind.css">
    <script src="/js/vue.min.js"></script>
    <script type="text/javascript" src="/js/jsmind.js"></script>
</head>

<body>
    <div id="jsmindApp">
        <div class="main">
            <div id="jsmind_container" style="width: 100%;height: 1400px;" class="mindBox"></div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#jsmindApp',
            data () {
                return {
                    mindTree:{}
                }
            },
            mounted () {
                this.getInfo()
            },
            methods: {
                 // 获取思维导图数据
                getInfo(){
                    // 模拟接口获取数据
                    setTimeout(()=>{
                        this.mindTree = {
                            name:'现代纺织与服装产业集群（2695项标准）',
                            id:'root',
                            path:'/123/123',
                            children:[
                                {
                                    name:'纺织业（1848项标准）',
                                    id:'root2_1',
                                    path:'/123/123',
                                    children:[
                                        {
                                            name:'纺织品及其制品(1395项标准)',
                                            id:'root2_1_1',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'纱线(218项标准)',
                                            id:'root2_1_2',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'产业用纺织品(114项标准)',
                                            id:'root2_1_3',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'纤维(91项标准)',
                                            id:'root2_1_4',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'羽绒羽毛及其制品(13项标准)',
                                            id:'root2_1_5',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'防护用品(7项标准)',
                                            id:'root2_1_6',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'纺织服装其他(6项标准)',
                                            id:'root2_1_7',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'棉纤维(4项标准)',
                                            id:'root2_1_8',
                                            path:'/123/123',
                                            children:[]
                                        },
                                    ]
                                },
                                {
                                    name:'纺织服装、服饰业（231项标准）',
                                    id:'root2_2',
                                    path:'/123/123',
                                    children:[
                                        {
                                            name:'纺织品及其制品(208项标准)',
                                            id:'root2_2_1',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'防护用品(19项标准)',
                                            id:'root2_2_2',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'羽绒羽毛及其制品(4项标准)',
                                            id:'root2_2_3',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'纤维(91项标准)',
                                            id:'root2_2_4',
                                            path:'/123/123',
                                            children:[]
                                        },
                                        {
                                            name:'羽绒羽毛及其制品(13项标准)',
                                            id:'root2_2_5',
                                            path:'/123/123',
                                            children:[]
                                        },
                                    ]
                                },
                                {
                                    name:'皮革、皮毛服装制造（235项标准）',
                                    id:'root2_3',
                                    path:'/123/123',
                                    children:[
                                        {
                                            name:'皮革、皮毛服装制造(235项标准)',
                                            id:'root2_3_1',
                                            path:'/123/123',
                                            children:[]
                                        },
                                    ]
                                },
                            ]
                        }
                        this.initTree()
                        this.initMindMap()
                    },1000)
                },
                // 格式化数据
                initTree(){
                    // 颜色数据集
                    var colorList = [
                        // 第一行
                        {
                            bgc:'#8457e8',//第一列
                            bgc2:'#ece7fb',//第二列
                            bgc3:'#f9f6ff',//第三列
                        },
                        // 第二行
                        {
                            bgc:'#27c4f7',//第一列
                            bgc2:'#d8f3fa',//第二列
                            bgc3:'#f2fcfd',//第三列
                        },
                        {
                            bgc:'#38cb7b',
                            bgc2:'#ddf3e7',
                            bgc3:'#f2fbf6',
                        },
                        {
                            bgc:'#fea24e',
                            bgc2:'#fdebdb',
                            bgc3:'#fff9f2',
                        },
                        {
                            bgc:'#ef629f',
                            bgc2:'#fddbea',
                            bgc3:'#fff1f7',
                        },
                        {
                            bgc:'#5091ff',
                            bgc2:'#e4eeff',
                            bgc3:'#f7faff',
                        },
                    ]
                    // 字体大小
                    var fontSize = '14'
                    // 设置第一层
                    this.mindTree.name = this.limit(this.mindTree.name)
                    this.mindTree.topic = this.mindTree.name
                    this.mindTree.id = this.mindTree.id
                    this.mindTree.direction = 'right' //位置
                    this.mindTree["background-color"] = '#2c70ed' //背景色
                    this.mindTree["font-size"] = fontSize //字体大小
                    // 设置第二层
                    // 需要折叠的id
                    let expandedIds = ['root2_1']
                    if(this.mindTree.children.length){
                        this.mindTree.children.forEach((e,i) => {
                            e.name = this.limit(e.name)
                            e.topic = e.name
                            e.id = e.id
                            e.expanded = expandedIds.includes(e.id)?false:true//是否折叠后面的子节点
                            e.direction = 'right'
                            e["background-color"] = colorList[i].bgc
                            console.log(colorList[i].bgc,i);
                            e["font-size"] = fontSize
                            e["leading-line-color"] = '#2c70ed' //连接线颜色
                            // 设置第三层
                            this.deepTree(e.children,colorList,fontSize,i,2)
                        });
                    } 
                },
                // 递归Tree
                deepTree(arr,colorList,fontSize,i,p){
                    if(arr&&arr.length){
                        if(p>3){
                            p=3
                        }
                        arr.forEach(e=>{
                            e.name = this.limit(e.name)
                            e.topic = e.name
                            e.id = e.id
                            e.direction = 'right'
                            e["background-color"] = colorList[i]['bgc'+p]
                            e["font-size"] = fontSize
                            e["leading-line-color"] = colorList[i].bgc
                            e["foreground-color"] = colorList[i].bgc
                            this.deepTree(e.children,colorList,fontSize,i,p+1)
                        })
                    }
                },
                // 初始化思维导图
                initMindMap(){
                    var mind = { 
                        /* 元数据，定义思维导图的名称、作者、版本等信息 */
                        "meta":{
                            "name":"mindMap",
                            "author":"jh",
                            "version":"0.1"
                        },
                        /* 数据格式声明 */
                        "format":"node_tree",
                        /* 数据内容 */
                        "data":this.mindTree
                    };

                    var options = {                   // options 将在下一章中详细介绍
                        container:'jsmind_container', // [必选] 容器的ID，或者为容器的对象
                        editable:false,                // [可选] 是否启用编辑
                        theme:'orange'                // [可选] 主题
                    };
                    var jm = new jsMind(options);
                    jm.show(mind);
                    document.getElementById('jsmind_container').addEventListener('click',async()=> {   //监听jsmind设置id的点击事件
                        console.log(jm.get_selected_node());    //获得被选中节点信息
                        if(jm.get_selected_node()&&jm.get_selected_node().id){
                            console.log('id:'+jm.get_selected_node().id);
                        }
                    })
                },
                // 限制字符串长度，超出显示...
                limit(str){
                    let res = ''
                    if(str.length>10){
                        res = str.substring(0,10) + '...'
                    }else{
                        res = str
                    }
                    return res
                },
            }
        })
    </script>
</body>

</html>