Toggle navigation
数据库表血缘图
By
疯***子
2019-08-09 05:55:06
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
var allData = { "citys": [{ "name": "数据表A", "value": [112, 215], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#337ab7" } } }, { "name": "数据表B", "value": [112, 375, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#337ab7" } } }, { "name": "数据表C", "value": [112, 535, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#337ab7" } } }, { "name": "数据表AA", "value": [232, 215, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#8a33b7" } } }, { "name": "数据表BB", "value": [232, 375, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#8a33b7" } } }, { "name": "数据表CC", "value": [232, 535, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#8a33b7" } } }, { "name": "表a", "value": [492, 335, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#ebdf4a" } } }, { "name": "表b", "value": [492, 415, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#ebdf4a" } } }, { "name": "表c", "value": [492, 175, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#ebdf4a" } } }, { "name": "表d", "value": [492, 255, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#ebdf4a" } } }, { "name": "表e", "value": [492, 495, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#ebdf4a" } } }, { "name": "表f", "value": [492, 575, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#ebdf4a" } } }, { "name": "子表A", "value": [622, 375, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "子表B", "value": [712, 445, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "子表C", "value": [712, 305, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "子表D", "value": [622, 215, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "表1", "value": [352, 175, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "表2", "value": [352, 335, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "表3", "value": [352, 575, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "表3", "value": [352, 255, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "表4", "value": [352, 415, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "表5", "value": [352, 495, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, { "name": "表6", "value": [352, 655, 4], symbol: 'rect', "symbolSize": [80, 25], "itemStyle": { "normal": { "color": "#F58158" } } }, ], "moveLines": [{ "fromName": "数据表A", "toName": "数据表AA", "coords": [ [112, 215], [232, 215] ] }, { "fromName": "数据表A", "toName": "数据表AA", "coords": [ [112, 375], [232, 375] ] }, { "coords": [ [112, 535], [232, 535] ] }, { "coords": [ [352, 255], [492, 255] ] }, { "coords": [ [232, 375], [352, 335] ] }, { "coords": [ [232, 375], [352, 415] ] }, { "coords": [ [232, 535], [352, 495] ] }, { "coords": [ [232, 535], [352, 575] ] }, { "coords": [ [352, 335], [492, 335] ] }, { "coords": [ [352, 415], [492, 415] ] }, { "coords": [ [352, 175], [492, 175] ] }, { "coords": [ [492, 175], [622, 215] ] }, { "coords": [ [492, 495], [622, 215] ] }, { "coords": [ [232, 215], [352, 255] ] }, { "coords": [ [622, 375], [712, 445] ] }, { "coords": [ [622, 375], [712, 305] ] }, ], "newLines": [{ "coords": [ [232, 215], [352, 175] ] }, { "coords": [ [352, 495], [492, 495] ] }, { "coords": [ [352, 575], [492, 575] ] }, { "coords": [ [492, 335], [622, 215] ] }, { "coords": [ [492, 415], [622, 375] ] }, { "coords": [ [492, 255], [622, 375] ] }, { "coords": [ [492, 575], [622, 375] ] }, ] }; 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: allData.citys }, { 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.1 } }, data: allData.moveLines }, { 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: 'red', /* color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#58B3CC' }, { offset: 1, color: '#F58158' }], false),*/ width: 2, opacity: 1, curveness: 0.2 } }, data: allData.newLines } ] };
