数据分布-亮色-带标签ECharts Gallery

20:11:45图表已生成
代码
var formatUtil = echarts.format;

var dtlData = [{
    name: '一账通',
    value: 2474,
    children: [{
        name: 'JKOSS',
        value: 426
    }, {
        name: 'JKTOA',
        value: 73
    }, {
        name: 'JKTOALF_EBD',
        value: 12
    }, {
        name: 'JKTOALF_TOASER',
        value: 101
    }, {
        name: 'TOA',
        value: 1083
    }, {
        name: 'TOAMALL',
        value: 709
    }, {
        name: 'TOAWEB_CMS',
        value: 58
    }, {
        name: 'TOAFLLF_MAAM',
        value: 12
    }]
}, {
    name: '中小企业',
    value: 1053,
    children: [{
        name: 'SMELPCORE_CORE',
        value: 347
    }, {
        name: 'SMELPCORE_FINANCE',
        value: 230
    }, {
        name: 'SMELPCORE_SMELPMCHT',
        value: 14
    }, {
        name: 'SMELPCORE_SMELPWG',
        value: 28
    }, {
        name: 'SMELPCORE_WEB',
        value: 50
    }, {
        name: 'SMELPFATAEX',
        value: 14
    }, {
        name: 'SMELPRISK_RISK',
        value: 370
    }]
}, {
    name: '同业',
    value: 1635,
    children: [{
        name: 'FIC2',
        value: 1128
    }, {
        name: 'LSMMS',
        value: 194
    }, {
        name: 'MFICAW',
        value: 91
    }, {
        name: 'YZTTA',
        value: 222
    }]
}, {
    name: '开放平台',
    value: 9422,
    children: [{
        name: 'CDE',
        value: 259
    }, {
        name: 'CMPCC',
        value: 1161
    }, {
        name: 'PACCF1',
        value: 3564
    }, {
        name: 'PAEBD_PAEBD',
        value: 2231
    }, {
        name: 'QHZX',
        value: 384
    }, {
        name: 'PCDP_CDP',
        value: 205
    }, {
        name: 'PIMP_PIMP',
        value: 51
    }, {
        name: 'ZXAR',
        value: 94
    }, {
        name: 'ZXCD1',
        value: 918
    }, {
        name: 'ZXPD1',
        value: 555
    }]
}, {
    name: '贷款',
    value: 2156,
    children: [{
        name: 'MYUE',
        value: 56
    }, {
        name: 'P2PLM',
        value: 351
    }, {
        name: 'P2PPD',
        value: 1619
    }, {
        name: 'PDAP_PDAP',
        value: 112
    }, {
        name: 'PCACORE_QJJ',
        value: 16
    }, {
        name: 'MP2PPD',
        value: 2
    }]
}, {
    name: '银行一账通',
    value: 6576,
    children: [{
        name: 'FO007',
        value: 1078
    }, {
        name: 'FO008',
        value: 799
    }, {
        name: 'FO009',
        value: 483
    }, {
        name: 'FO023',
        value: 665
    }, {
        name: 'FO024',
        value: 644
    }, {
        name: 'FO025',
        value: 1040
    }, {
        name: 'FO027',
        value: 685
    }, {
        name: 'FCES01',
        value: 215
    }, {
        name: 'FPPG_MIP',
        value: 61
    }, {
        name: 'NMPMS_NMPMS',
        value: 32
    }, {
        name: 'FOGZ',
        value: 546
    }, {
        name: 'FO047',
        value: 328
    }]
}];

var mapping = {
    'CDE': '引擎管理系统',
    'CMPCC': 'CBD核心系统',
    'FCES01': 'F渠道拓展系统',
    'FIC2': '适配器系统',
    'FO007': 'F渠道作业系统',
    'FO008': 'F项目配置系统',
    'FO009': '业务运营管理系统',
    'FO023': 'A银行系统',
    'FO024': 'B银行系统',
    'FO025': 'C银行系统',
    'FO027': '营销活动系统',
    'FO047': '业务运营系统',
    'FOGZ': '理财产品管理系统',
    'FPPG_MIP': '内容管理系统',
    'JKOSS': '认证中心',
    'JKTOA': '活动系统',
    'JKTOALF_EBD': '事务系统',
    'JKTOALF_TOASER': '后台服务系统',
    'LSMMS': '应用服务平台',
    'MFICAW': '产品中心系统',
    'MP2PPD': '贷款进件平台',
    'MYUE': '贷款跃老板子系统',
    'NMPMS_NMPMS': '电子账户管理系统',
    'P2PLM': '信贷贷后管理系统',
    'P2PPD': '信保系统',
    'PACCF1': '金科API服务',
    'PAEBD_PAEBD': '金科空间站',
    'PCACORE_QJJ': '贷款C端服务系统',
    'PCDP_CDP': '客户系统',
    'PDAP_PDAP': '贷款平台业务报表系统',
    'PIMP_PIMP': '风险监测系统',
    'QHZX': '征信数据超市',
    'SMELPCORE_CORE': '信贷管理系统',
    'SMELPCORE_FINANCE': '规则执行系统',
    'SMELPCORE_SMELPMCHT': '网关应用系统',
    'SMELPCORE_SMELPWG': '数据管理系统',
    'SMELPCORE_WEB': '公共服务系统',
    'SMELPFATAEX': '风险控制系统',
    'SMELPRISK_RISK': '门户系统',
    'TOA': '一账通系统',
    'TOAFLLF_MAAM': '移动广告管理平台',
    'TOAMALL': '商城系统',
    'TOAWEB_CMS': '公共运营支撑系统',
    'YZTTA': '运营管理系统',
    'ZXAR': '数据接口系统',
    'ZXCD1': '好信盔甲',
    'ZXPD1': '前海征信爱迪生系统'
};


var color = [
    "#6F3FE1",
    "#5781FD",
    "#4DB1CB",
    "#3EBD7C",
    "#F7A925",
    "#bda29a",
    "#ca8622",
    "#749f83",
    "#6e7074",
    "#546570",
    "#c4ccd3"
];

var bsLine = [];
var bsLineV = {};
for (var key in dtlData) {
    bsLine.push(dtlData[key].name);
    bsLineV[dtlData[key].name] = dtlData[key].value;
}
var sbsLineV = Object.keys(bsLineV).sort(function(a, b) {
    return -(bsLineV[a] - bsLineV[b]);
});


// 层级样式
function getLevelOption1() {
    return [{
            color: color,
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    borderColor: '#fff',
                    gapWidth: 2
                }
            }
        },
        {
            //colorSaturation: [0.35, 0.6],
            colorAlpha: [1, 0.5],
            upperLabel: {
                normal: {
                    color: '#555555',
                    show: true,
                    height: 30
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    borderColor: '#EFEFEF',
                    gapWidth: 1
                },
                emphasis: {
                    borderColor: '#ccc'
                }
            }
        }
    ];
}


function getLevelOption2() {
    return [{
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    borderColor: '#fff',
                    gapWidth: 2
                }
            }
        },
        {
            color: [],
            //colorSaturation: [0.35, 0.6],
            //colorAlpha: [0.5, 1],
            //colorMappingBy: 'value',
            upperLabel: {
                normal: {
                    color: '#555555',
                    show: true,
                    height: 30
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    borderColor: '#EFEFEF',
                    gapWidth: 1
                },
                emphasis: {
                    borderColor: '#ccc'
                }
            }
        }
    ];
}

var series0 = {
    name: '数据库',
    type: 'treemap',
    itemStyle: {
        normal: {
            borderColor: '#fff'
        }
    },
    levels: getLevelOption1(),
    leafDepth: 2,
    data: dtlData
};

var series11 = {
    name: '数据库',
    type: 'treemap',
    itemStyle: {
        normal: {
            borderColor: '#fff'
        }
    },
    right: '50%',
    width: '48%',
    levels: getLevelOption1(),
    leafDepth: 2,
    data: dtlData
};

var series12 = {
    name: '数据库',
    type: 'treemap',
    itemStyle: {
        normal: {
            borderColor: '#fff'
        }
    },
    left: '55%',
    width: '40%',
    levels: getLevelOption2(),
    leafDepth: 2,
    data: [dtlData[0]]
};

option = {
    backgroundColor: '#fff',
    title: {
        text: '数据分布',
        left: 'center'
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {},
            restore: {},
            dataView: {}
        }
    },
    tooltip: {
        formatter: function(info) {
            var value = info.value;
            var treePathInfo = info.treePathInfo;
            var treePath = [];

            for (var i = 1; i < treePathInfo.length; i++) {
                treePath.push(treePathInfo[i].name);
            }

            var nodeCN = '';
            if (treePath.length == 2) {
                treePath[1] = mapping[treePath[1]];
            }

            return [
                '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join(' - ')) + '</div>',
                '表数量: ' + formatUtil.addCommas(value),
            ].join('');
        }
    },
    series: [series0]
};

myChart.setOption(option, true);

// 点击事件
myChart.on("click", function(param) {
    var selectedItem = param.name;
    //alert(selectedItem);
    for (var key in dtlData) {
        if (dtlData[key].name === selectedItem) {
            for (var ki in sbsLineV) {
                if (sbsLineV[ki] === selectedItem) {
                    bsColor = color[ki]
                }
            }
            series12.levels[1].color = [bsColor]
            series12.data = [dtlData[key]]
            option.series = [series11, series12]
            myChart.setOption(option, true);
        }
    }

    if (bsLine.indexOf(selectedItem) < 0) {
        option.series = [series0]
        myChart.setOption(option, true);
    }
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
