数据:
let mockData = {
// nodes 控制元素排列的顺序和 元素的样式
'nodes': [{
'name': '海口市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '三亚市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '三沙市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '儋州市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '五指山市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '文昌市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '琼海市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '万宁市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '东方市',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '定安县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '屯昌县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '澄迈县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '临高县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '白沙黎族自治县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '昌江黎族自治县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '乐东黎族自治县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '陵水黎族自治县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '保亭黎族苗族自治县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '琼中苗族黎族自治县',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '省属企业',
'itemStyle': { 'color': '#e15123', 'borderColor': '#e15123' }
},
{
'name': '非黑名单',
'itemStyle': { 'color': '#367ae4', 'borderColor': '#367ae4' }
},
{
'name': '黑名单',
'itemStyle': { 'color': '#367ae4', 'borderColor': '#367ae4' }
},
{
'name': '非行政处罚',
'itemStyle': { 'color': '#c68124', 'borderColor': '#c68124' }
}, {
'name': '行政处罚',
'itemStyle': { 'color': '#c68124', 'borderColor': '#c68124' }
}, {
'name': '非经营异常',
'itemStyle': { 'color': '#7323e1', 'borderColor': '#7323e1' }
},
{
'name': '经营异常',
'itemStyle': { 'color': '#7323e1', 'borderColor': '#7323e1' }
},
{
'name': '非税收违法',
'itemStyle': { 'color': '#3fb769', 'borderColor': '#3fb769' }
}, {
'name': '税收违法',
'itemStyle': { 'color': '#3fb769', 'borderColor': '#3fb769' }
},
{
'name': '非失信被执行人',
'itemStyle': { 'color': '#8dabff', 'borderColor': '#8dabff' }
}, {
'name': '失信被执行人',
'itemStyle': { 'color': '#8dabff', 'borderColor': '#8dabff' }
}
],
// links控制元素排列的数据和线条方向
'links': [
{'source': '海口市', 'target': '非黑名单', 'value': 164}, //海口市中有非黑名单企业 164家
{'source': '海口市', 'target': '黑名单', 'value': 8}, //海口市中有非黑名单企业 8家
{'source': '三亚市', 'target': '黑名单', 'value': 3},
{'source': '三亚市', 'target': '非黑名单', 'value': 52},
{'source': '三沙市', 'target': '黑名单', 'value': 0},
{'source': '三沙市', 'target': '非黑名单', 'value': 0},
{'source': '儋州市', 'target': '黑名单', 'value': 1},
{'source': '儋州市', 'target': '非黑名单', 'value': 19},
{'source': '五指山市', 'target': '黑名单', 'value': 0},
{'source': '五指山市', 'target': '非黑名单', 'value': 3},
{'source': '文昌市', 'target': '黑名单', 'value': 1},
{'source': '文昌市', 'target': '非黑名单', 'value': 15},
{'source': '琼海市', 'target': '黑名单', 'value': 1},
{'source': '琼海市', 'target': '非黑名单', 'value': 16},
{'source': '万宁市', 'target': '黑名单', 'value': 1},
{'source': '万宁市', 'target': '非黑名单', 'value': 14},
{'source': '东方市', 'target': '黑名单', 'value': 1},
{'source': '东方市', 'target': '非黑名单', 'value': 12},
{'source': '定安县', 'target': '黑名单', 'value': 0},
{'source': '定安县', 'target': '非黑名单', 'value': 8},
{'source': '屯昌县', 'target': '黑名单', 'value': 0},
{'source': '屯昌县', 'target': '非黑名单', 'value': 7},
{'source': '澄迈县', 'target': '黑名单', 'value': 1},
{'source': '澄迈县', 'target': '非黑名单', 'value': 13},
{'source': '临高县', 'target': '黑名单', 'value': 0},
{'source': '临高县', 'target': '非黑名单', 'value': 7},
{'source': '白沙黎族自治县', 'target': '黑名单', 'value': 0},
{'source': '白沙黎族自治县', 'target': '非黑名单', 'value': 3},
{'source': '昌江黎族自治县', 'target': '黑名单', 'value': 0},
{'source': '昌江黎族自治县', 'target': '非黑名单', 'value': 5},
{'source': '乐东黎族自治县', 'target': '黑名单', 'value': 0},
{'source': '乐东黎族自治县', 'target': '非黑名单', 'value': 9},
{'source': '陵水黎族自治县', 'target': '黑名单', 'value': 1},
{'source': '陵水黎族自治县', 'target': '非黑名单', 'value': 12},
{'source': '保亭黎族苗族自治县', 'target': '黑名单', 'value': 0},
{'source': '保亭黎族苗族自治县', 'target': '非黑名单', 'value': 4},
{'source': '琼中苗族黎族自治县', 'target': '黑名单', 'value': 0},
{'source': '琼中苗族黎族自治县', 'target': '非黑名单', 'value': 4},
{'source': '省属企业', 'target': '黑名单', 'value': 0},
{'source': '省属企业', 'target': '黑名单', 'value': 7},
{'source': '黑名单', 'target': '行政处罚', 'value': 2},
{'source': '黑名单', 'target': '非行政处罚', 'value': 0},
{'source': '非黑名单', 'target': '行政处罚', 'value': 4},
{'source': '非黑名单', 'target': '非行政处罚', 'value': 369},
{'source': '行政处罚', 'target': '经营异常', 'value': 1},
{'source': '行政处罚', 'target': '非经营异常', 'value': 6},
{'source': '非行政处罚', 'target': '经营异常', 'value': 18},
{'source': '非行政处罚', 'target': '非经营异常', 'value': 368},
{'source': '经营异常', 'target': '税收违法', 'value': 0},
{'source': '经营异常', 'target': '非税收违法', 'value': 18},
{'source': '非经营异常', 'target': '税收违法', 'value': 1},
{'source': '非经营异常', 'target': '非税收违法', 'value': 373},
{'source': '税收违法', 'target': '失信被执行人', 'value': 0},
{'source': '税收违法', 'target': '非失信被执行人', 'value': 1},
{'source': '非税收违法', 'target': '失信被执行人', 'value': 3},
{'source': '非税收违法', 'target': '非失信被执行人', 'value': 388}
]
};
let option = {
title: {
show: false
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
textStyle: {
color: '#666',
fontWeight: 'bold'
},
formatter: function (v) {
return `<div class="screenTooltip riskMap"><div class="content">${v.name}:<span style='color: #00BAFF'>${thousands(v.value)}</span></div></div>`;
}
},
series: [
{
type: 'sankey',
focusNodeAdjacency: 'allEdges',
nodeAlign: 'left',
data: mockData.nodes,
links: mockData.links,
lineStyle: {
normal: {
color: 'source',
curveness: 0.5
}
},
label: {
normal: {
textStyle: {
color: '#1AE3FF',
fontSize: 12
}
}
}
}
]
};
效果图:

网友评论