美文网首页
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