首页 > 其他分享 >echart 血缘图 引用

echart 血缘图 引用

时间:2022-11-02 17:37:12浏览次数:67  
标签:index echart tableName let 引用 parentId tableId 血缘 data

let tableId = 1;
const data = [
    [
        {
            tableId:2,
            tableName:'我是祖先表AAAAAAAAAA',
        },{
            tableId:3,
            tableName:'我是祖先表B',
        }
    ],
    [
        {
            tableId:4,
            parentId:[2],
            tableName:'我是父亲表A',
        },{
            tableId:5,
            parentId:[2,3,22],
            tableName:'我是父亲表BAAAAAA',
        },{
            tableId:6,
            parentId:[3],
            tableName:'我是父亲表C',
        },{
            tableId:7,
            parentId:[3],
            tableName:'我是父亲表D',
        }
    ],
  [
        {
            parentId: [4,5,6,7],
            tableId:1,
            tableName:'我是被选中的表',
        }
    ],
    [
        {
            tableId:8,
            parentId: [1],
            tableName:'我是子表AAAAA',
        },{
            tableId:9,
            parentId: [1],
            tableName:'我是子表B',
        }
    ],
    [
        {
            tableId:10,
            parentId:[8,1],
            tableName:'我是孙子表A',
        },{
            tableId:11,
            parentId:[8,9],
            tableName:'我是孙子表B',
        },{
            tableId:12,
            parentId:[8,9],
            tableName:'我是孙子表CCCCC',
        },{
            tableId:13,
            parentId:[9],
            tableName:'我是孙子表D',
        }
    ],
];
let gleft = 150, gtop = 100;

let allTable = [];

let allLine = [];

// let hasDataKeys = ['grandfatherTableList','fatherTableList','selfList','childTableList','grandsonTableList'];
// hasDataKeys.forEach((val,index) => {
//     if(data[val] && data[val].length < 0) {
//         hasDataKeys.splice(index, 1)
//     }
// })

// console.log('hasDataKeys',hasDataKeys)
let lengthKey = [];
let lengthKeyList = [];
for(let i = 0; i < data.length; i++){
    lengthKeyList[i] = data[i].map(val => val.tableName.length*15);
    lengthKey[i] = data[i].map(val => val.tableName).join('').length*25;
}
function getW(lengthList, listLength, index) {
    let w = 0;
    let datafloor = listLength/2;
    let middleNum = Math.floor(listLength/2);
    // console.log(middleNum)
    if (index < datafloor) {
        for(let i = index; i < middleNum; i++) {
            if (i === index) {
                w += lengthList[i] / 2
            } else {
                w += lengthList[i]
            }
        }
        w = -w
    } else if (index >= datafloor) {
      for(let i = middleNum; i < index + 1; i++) {
            if (i === index) {
                w += lengthList[i]/2
            } else {
                w += lengthList[i]
            }
        }
    }
    return w
}
const maxLengthMid = Math.max(...lengthKey) / 2;
console.log(maxLengthMid)
for(let i = 0; i < data.length; i++){
    let datalist = data[i];
    let lengthList = lengthKeyList[i];
    if (datalist) {
        let listLength = datalist.length;
        let middleNum = listLength/2;
        let leftLength = 0, rightLength = 0;
        let sumW = gleft;
        for(let j = 0; j < datalist.length; j++){
            let _data = datalist[j];
            let nameW = _data.tableName.length*12;
            if (j < middleNum) {
                leftLength--;
            } else if (j >= middleNum) {
                rightLength++;
            }
            let moveLength = getW(lengthList, listLength, j)
            if (moveLength < 0) {
                moveLength += leftLength*5
            } else if (moveLength > 0) {
                moveLength += rightLength*5
            }
            allTable.push({
                id: _data.tableId,
                level: i,
                name: _data.tableName,
                tableName: _data.tableName,
                data: _data,
                parentId: _data.parentId,
                value: [maxLengthMid + moveLength, gtop + i*100],
                symbol: 'rect',
                symbolSize: [nameW, 25],
                itemStyle: {
                    normal: {
                        color: _data.tableId === tableId?'red': "#337ab7"
                    }
                }
            })
            
        }
    }
}
console.log(allTable)

for(let i = 0; i < allTable.length; i++) {
    let data = allTable[i];
    let _line = [];
    data.parentId && data.parentId.forEach(val => {
        let parentData = allTable.find(item => item.id == val)
        if(parentData){
            _line.push({
                fromName: parentData.tableName,
                toName: data.tableName,
                coords: [
                    parentData.value,
                    data.value
                ]
            })
        }
    })
    allLine = allLine.concat(_line)
}
console.log(allLine)
const temp = {
    id:'',
    name: "数据表A",
    value: [gleft+0, gtop+0],
    symbol: 'rect',
    symbolSize: [80, 25],
    itemStyle: {
        normal: {
            color: "#337ab7"
        }
    }
};
const line = {
    fromName: "数据表A",
    toName: "数据表AA",
    coords: [
        [112, 215],
        [232, 215]
    ]
};

            
            

option = {
    title: {
        text: '数据库表血缘图',
    },
    // legend: {
    //     show: true,
    //     orient: 'vertical',
    //     top: 'bottom',
    //     left: 'right',
    //     data: ['地点', '线路'],
    //     textStyle: {
    //         color: '#fff'
    //     }
    // },
    tooltip: {
        trigger: 'item',
        show: true,
        // alwaysShowContent:true,
        // position:[185,75],
        // formatter:'{b}的表信息,巴拉巴拉'
        formatter: function(params, ticket, callback) {
            // console.log(params)
            if (params.componentSubType === 'scatter') {
                return params.name + '的表信息,巴拉巴拉~~'
            } else if (params.componentSubType === 'lines') {
                return '从' + params.data.fromName + '到' + params.data.toName
            }
        }
    },
    geo: {
        map: '北京市',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
            name: '数据库表',
            //type: 'effectScatter',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke',
                period: 7,
                scale: 26
            },
            label: {
                normal: {
                    show: true,
                    //   position:'top',
                    formatter: '{b}',
                    color: '#000',
                },
                emphasis: {
                    show: true,
                    // position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: 2,
            showEffectOn: 'render',
            itemStyle: {
                normal: {
                    color: '#46bee9'
                }
            },
            data: allTable
        },
        {
            name: '线路',
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 2,
            large: true,
            effect: {
                show: true,
                constantSpeed: 30,
                symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: 6,
                trailLength: 0,
            },

            lineStyle: {
                normal: {
                    color: 'green',
                    /*
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: '#58B3CC'
                        }, {
                            offset: 1, color: '#F58158'
                        }], false),*/
                    width: 2,
                    opacity: 0.6,
                    curveness: 0
                }
            },
            data: allLine
        },
    ]
};
const clickFun = param => {
    console.log(param.event.target)
    param.event.target.style.textFill = "blue"
}

myChart.on("click", clickFun);

 

 

效果: 

 

标签:index,echart,tableName,let,引用,parentId,tableId,血缘,data
From: https://www.cnblogs.com/yan122/p/16851758.html

相关文章

  • js的True is not defined以及c#的未将对象引用设置到对象的实例问题
    C#的true传到javascript变为TrueC#:varvoted=empfinal.Count()>0?true:false;JS:if(@voted){alert("您已经投过票了!");return;}报错:Trueisnot......
  • Android开发之制作圆形头像自定义View,直接引用工具类,加快开发速度。带有源代码学习..
    作者:程序员小冰,Android开发之制作圆形头像自定义View,直接引用工具类,加快开发速度。带有源代码学习大家都知道。现在好多头像都是圆形的,不再是以前的正方形或者长方形。因......
  • C++从入门到精通——引用及其注意事项
    引用基本语法:类型&别名=原名#define_CRT_SECURE_NO_WARNINGS#include<iostream>#include<string>usingnamespacestd;//引用基本语法:类型&别名=原名voidtest01......
  • C++:31---对象引用和赋值
    一、对象移动概述C++11标准引入了“对象移动”的概念对象移动的特性是:可以移动而非拷贝对象在C++旧标准中,没有直接的方法移动对象。因此会有很多不必要的资源拷贝标准库容器......
  • echarts无法进行二次渲染的问题
    其实网上关于echarts图二次渲染失败的解决办法很多,不过我还是想记录一下自己的心路历程这次的需求是在一个网页中有四个tab切换,第一个tab就有四个echarts图每一个echarts......
  • 函数返回值当引用
    对于第一种情况,返回引用时,return的临时变量中存放的是一个指针,此指针指向栈变量的地址,但是实际情况是,随着return 栈中变量将会消亡,但是临时变量中已经存下了这个曾经栈......
  • 在微信小程序上做一个「博客园年度总结」:在小程序上使用echarts
    在博客园年度总结中,有2张柱状图,分别是月度新增随笔趋势和年度新增随笔趋势本文继续介绍一下如何在小程序中使用echarts插入图表1、下载依赖文件地址:echarts-for-weixin......
  • Go开发 之 Go如何引用github包
    Go如何引用github包​​Linux上如何引用​​​​如果定义了环境变量​​​​进入正题​​​​①、创建引用目录​​​​②、拷贝源码​​​​③、引用​​​​Windows上如何......
  • Echarts——VUE中非根节点时不显示图表也无报错
    前言因为之前的封装都是直接作为根节点封装的,使用this.$el,非根组件的时候使用this.$refs.xx指定即可内容简写<divref="container":id="id"style="height:165px;......
  • 方法引用
    (1)方法引用:把已经有的方法拿过来用,当做函数式接口中抽象方法的方法体。(2)能够使用方法引用的四个条件:1.引用处必须是函数式接口;2.被引用的方法必须已经存在;3.被引用方法......