Scatterplot heatmapecharts scatter配置项内容和展示
散点热力图，用于相关性分析
配置项如下
var res = {"strengths":[{"statistic":0.0036903921895775713,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.17567272974858317,"feature2":"MonthlyIncome","feature1":"DebtRatio"},{"statistic":0.01573909886917953,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"MonthlyIncome"},{"statistic":0.01249373686131188,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfDependents"},{"statistic":0.1575589637470856,"feature2":"NumberRealEstateLoansOrLines","feature1":"DebtRatio"},{"statistic":0.04144961430582204,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.10787656788085649,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.0018614744047926967,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.0089822558291601,"feature2":"age","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.00488901151849058,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.041366761763551065,"feature2":"NumberRealEstateLoansOrLines","feature1":"MonthlyIncome"},{"statistic":0.0023799978594728605,"feature2":"SeriousDlqin2yrs","feature1":"NumberRealEstateLoansOrLines"},{"statistic":0.0030258706647910754,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"MonthlyIncome"},{"statistic":0.09715714888907517,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.009930333777959124,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"DebtRatio"},{"statistic":0.0010249234375378697,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfDependents"},{"statistic":0.012549537267683541,"feature2":"age","feature1":"SeriousDlqin2yrs"},{"statistic":0.055319629543347654,"feature2":"NumberOfOpenCreditLinesAndLoans","feature1":"DebtRatio"},{"statistic":0.025005800922790766,"feature2":"NumberOfOpenCreditLinesAndLoans","feature1":"MonthlyIncome"},{"statistic":0.0057237166878586635,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.003526265169118471,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"MonthlyIncome"},{"statistic":0.014619479460319901,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.002414979643707577,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.007111870204712414,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfDependents"},{"statistic":0.03275795561971808,"feature2":"NumberOfDependents","feature1":"MonthlyIncome"},{"statistic":0.01428103746713262,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberRealEstateLoansOrLines"},{"statistic":0.025940948189331844,"feature2":"age","feature1":"DebtRatio"},{"statistic":0.06284895830719812,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.031191472081927674,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.0017899809887417233,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfDependents"},{"statistic":0.007597736925386851,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfTimes90DaysLate"},{"statistic":0.02239609965352787,"feature2":"age","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.00189765343588152,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"DebtRatio"},{"statistic":0.12199058272246016,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfTimes90DaysLate"},{"statistic":0.00542024860592497,"feature2":"SeriousDlqin2yrs","feature1":"DebtRatio"},{"statistic":0.08845064270040555,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.0007162928189992007,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"NumberOfDependents"},{"statistic":0.02840304696272171,"feature2":"age","feature1":"MonthlyIncome"},{"statistic":0.04173153417695137,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfTimes90DaysLate"},{"statistic":0.03820212579640317,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"DebtRatio"},{"statistic":0.07268954923297358,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.038533429215975995,"feature2":"age","feature1":"NumberRealEstateLoansOrLines"},{"statistic":0.042678620386606435,"feature2":"age","feature1":"NumberOfDependents"},{"statistic":0.02494854964058496,"feature2":"age","feature1":"RevolvingUtilizationOfUnsecuredLines"},{"statistic":0.02487048481401141,"feature2":"NumberOfDependents","feature1":"DebtRatio"},{"statistic":0.07873798366571479,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.007634817270720645,"feature2":"NumberOfTimes90DaysLate","feature1":"MonthlyIncome"},{"statistic":0.004258023210208942,"feature2":"age","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.029024561776422084,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.0027919318516345494,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"NumberOfDependents"},{"statistic":0.007014220660241561,"feature2":"NumberOfOpenCreditLinesAndLoans","feature1":"NumberOfDependents"},{"statistic":0.006028401684362547,"feature2":"NumberOfTimes90DaysLate","feature1":"DebtRatio"},{"statistic":0.00482428444674937,"feature2":"SeriousDlqin2yrs","feature1":"MonthlyIncome"},{"statistic":0.0084792025417689,"feature2":"age","feature1":"NumberOfTimes90DaysLate"},{"statistic":0.040080111790151585,"feature2":"SeriousDlqin2yrs","feature1":"RevolvingUtilizationOfUnsecuredLines"},{"statistic":1,"feature2":"DebtRatio","feature1":"DebtRatio"},{"statistic":1,"feature2":"MonthlyIncome","feature1":"MonthlyIncome"},{"statistic":1,"feature2":"NumberOfDependents","feature1":"NumberOfDependents"},{"statistic":1,"feature2":"NumberOfOpenCreditLinesAndLoans","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":1,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":1,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":1,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfTimes90DaysLate"},{"statistic":1,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberRealEstateLoansOrLines"},{"statistic":1,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"RevolvingUtilizationOfUnsecuredLines"},{"statistic":1,"feature2":"SeriousDlqin2yrs","feature1":"SeriousDlqin2yrs"},{"statistic":1,"feature2":"age","feature1":"age"}],"features":[{"feature":"NumberRealEstateLoansOrLines","strengthSortIndex":2,"alphabeticSortIndex":7,"importanceSortIndex":2,"clusterSortIndex":0,"clusterId":0,"clusterName":"DebtRatio-cluster"},{"feature":"DebtRatio","strengthSortIndex":0,"alphabeticSortIndex":0,"importanceSortIndex":1,"clusterSortIndex":1,"clusterId":0,"clusterName":"DebtRatio-cluster"},{"feature":"MonthlyIncome","strengthSortIndex":3,"alphabeticSortIndex":1,"importanceSortIndex":5,"clusterSortIndex":2,"clusterId":0,"clusterName":"DebtRatio-cluster"},{"feature":"SeriousDlqin2yrs","strengthSortIndex":4,"alphabeticSortIndex":9,"importanceSortIndex":0,"clusterSortIndex":3,"clusterId":1,"clusterName":"SeriousDlqin2yrs-cluster"},{"feature":"NumberOfTime60_89DaysPastDueNotWorse","strengthSortIndex":5,"alphabeticSortIndex":5,"importanceSortIndex":6,"clusterSortIndex":4,"clusterId":1,"clusterName":"SeriousDlqin2yrs-cluster"},{"feature":"NumberOfTimes90DaysLate","strengthSortIndex":1,"alphabeticSortIndex":6,"importanceSortIndex":8,"clusterSortIndex":5,"clusterId":1,"clusterName":"SeriousDlqin2yrs-cluster"},{"feature":"NumberOfTime30_59DaysPastDueNotWorse","strengthSortIndex":6,"alphabeticSortIndex":4,"importanceSortIndex":9,"clusterSortIndex":6,"clusterId":null},{"feature":"age","strengthSortIndex":9,"alphabeticSortIndex":10,"importanceSortIndex":7,"clusterSortIndex":7,"clusterId":null},{"feature":"NumberOfOpenCreditLinesAndLoans","strengthSortIndex":8,"alphabeticSortIndex":3,"importanceSortIndex":4,"clusterSortIndex":8,"clusterId":null},{"feature":"RevolvingUtilizationOfUnsecuredLines","strengthSortIndex":7,"alphabeticSortIndex":8,"importanceSortIndex":10,"clusterSortIndex":9,"clusterId":null},{"feature":"NumberOfDependents","strengthSortIndex":10,"alphabeticSortIndex":2,"importanceSortIndex":3,"clusterSortIndex":10,"clusterId":null}]}
const keys = res.features.map((m) => m.feature);
const map = { key_null: [] };
let uniqueId = 0
res.features.forEach((item, i) => {
const key = `key_${item.clusterId}`;
if (!map[key]) {
map[key] = [];
}
res.features.forEach((item2, j) => {
const f = res.strengths.find((m) => m.feature1 === item.feature && m.feature2 === item2.feature);
if (item.clusterId === item2.clusterId) {
map[key].push({
name: 'id_' + uniqueId++,
value: [i, keys.length - 1 - j, f ? f.statistic : 0],
meta: {...item}
});
} else {
// [i, keys.length - 1 - j, f ? f.statistic : 0]
map.key_null.push({
name: 'id_' + uniqueId++,
value: [i, keys.length - 1 - j, f ? f.statistic : 0],
meta: {...item}
});
}
});
});
// console.log(map, map['key_0'])
// return
option = {
grid: {
height: '50%',
top: '12%',
left: '25%',
right: '25%',
},
xAxis: {
type: 'category',
data: keys,
axisTick: {
show: false
},
axisLabel: {
rotate: 90
},
axisLine: {
show: false
}
},
yAxis: {
type: 'category',
data: keys,
axisTick: {
show: false
},
axisLine: {
show: false
}
},
tooltip: {
axisPointer: {
type: 'none'
}
},
visualMap: [
{
show: false,
min: 0,
max: 1,
precision: 6,
calculable: false,
orient: 'horizontal',
inRange: {
color: ['#ffe6e8','#ffa3af','#ff7a91','#f54e70','#e82553','#db003a'],
symbolSize: 20
},
seriesIndex: 0,
},
{
show: false,
min: 0,
max: 1,
precision: 6,
calculable: false,
orient: 'horizontal',
inRange: {
color: ['#dce8da','#cfdbce','#a5cfa3','#7ac27a','#55b558','#34a83b'],
symbolSize: 20
},
seriesIndex: 1,
},
{
min: 0,
max: 1,
precision: 6,
calculable: false,
orient: 'horizontal',
left: 'center',
top: '5%',
inRange: {
color: [ '#f5f5f5','#d9d9d9','#8c8c8c','#434343','#1f1f1f', '#000000'],
symbolSize: 20
},
seriesIndex: 2,
text:['强','弱'],
textStyle: {
color: '#707070'
}
},
],
series: [
{
name: 'Punch Card1',
type: 'scatter',
data: map.key_0,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
selectedMode: 'single',
select: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name: 'Punch Card2',
type: 'scatter',
data: map.key_1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
selectedMode: 'single',
select: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name: 'Punch Card3',
type: 'scatter',
data: map.key_null,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
selectedMode: 'single',
select: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
]
};
var ids = []
// myChart.on('click', function (params) {
// console.log(params);
// myChart.dispatchAction({
// type: 'downplay',
// seriesIndex: ids[0],
// dataIndex: ids[1]
// });
// if(ids[0] != params.seriesIndex || ids[1] != params.dataIndex) {
// myChart.dispatchAction({
// type: 'highlight',
// seriesIndex: params.seriesIndex,
// dataIndex: params.dataIndex
// });
// ids = [params.seriesIndex,params.dataIndex]
// } else {
// ids = []
// }
// });
// setTimeout(function() {
// myChart.dispatchAction({
// type: 'highlight',
// seriesIndex: 0,
// dataIndex: [1]
// });
// myChart.dispatchAction({
// type: 'select',
// seriesIndex: 0,
// dataIndex: 0
// });
// }, 2000);
截图如下
