美文网首页
echarts 桑基图

echarts 桑基图

作者: 家有饿犬和聋猫 | 来源:发表于2019-12-16 10:47 被阅读0次

数据:

 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
                            }
                        }
                    }
                }

            ]
        };
效果图: image.png

相关文章

网友评论

      本文标题:echarts 桑基图

      本文链接:https://www.haomeiwen.com/subject/bbufnctx.html