const items = [
'资产负债率',
'剔除预收款项后的资产负债率',
'长期资本负债率',
'长期资产适合率',
'权益乘数',
'流动负债权益比率',
'带息债务/全部投入资本',
'流动负债/负债合计',
'资本固定化比率',
'期望违约频率EDF'
];
const rawData = [
1.0, 0.594527, 0.492963, -0.160995, 0.723664, 0.658646, -0.857474, 0.320706, -0.284634, -0.091423, 0.594527, 1.0,
0.724546, -0.099318, 0.540639, 0.49214, -0.554039, 0.17127, -0.265259, 0.068577, 0.492963, 0.724546, 1.0, -0.091338,
0.450542, 0.375839, -0.524955, 0.300627, -0.198362, 0.033209, -0.160995, -0.099318, -0.091338, 1.0, -0.049872,
-0.028452, 0.157157, 0.009742, -0.162374, 0.155095, 0.723664, 0.540639, 0.450542, -0.049872, 1.0, 0.951933, -0.651767,
0.079052, -0.535984, 0.00798, 0.658646, 0.49214, 0.375839, -0.028452, 0.951933, 1.0, -0.543147, -0.106139, -0.52232,
0.011466, -0.857474, -0.554039, -0.524955, 0.157157, -0.651767, -0.543147, 1.0, -0.595016, 0.310521, 0.066397,
0.320706, 0.17127, 0.300627, 0.009742, 0.079052, -0.106139, -0.595016, 1.0, -0.105199, -0.064886, -0.284634,
-0.265259, -0.198362, -0.162374, -0.535984, -0.52232, 0.310521, -0.105199, 1.0, -0.080153, -0.091423, 0.068577,
0.033209, 0.155095, 0.00798, 0.011466, 0.066397, -0.064886, -0.080153, 1.0
];
const data = [];
for (let i = 0; i < items.length; i++) {
for (let j = 0; j < items.length; j++) {
data.push({
var1: items[i],
var2: items[j],
value: rawData[i * items.length + j]
});
}
}
const spec = {
type: 'common',
padding: 12,
data: [
{
id: 'data0',
values: data
}
],
series: [
{
type: 'heatmap',
regionId: 'region0',
xField: 'var1',
yField: 'var2',
valueField: 'value',
cell: {
style: {
fill: {
field: 'value',
scale: 'color'
}
}
}
}
],
region: [
{
id: 'region0',
width: 300, // 限定 region 的宽度
height: 300 // 限定 region 的高度
}
],
color: {
type: 'linear',
domain: [
{
dataId: 'data0',
fields: ['value']
}
],
range: ['#feedde', '#fdbe85', '#fd8d3c', '#e6550d', '#a63603']
},
axes: [
{
orient: 'bottom',
type: 'band',
grid: {
visible: false
},
domainLine: {
visible: false
},
label: {
space: 10,
style: {
textAlign: 'left',
textBaseline: 'middle',
angle: 90
}
},
bandPadding: 0,
height: layoutRect => {
// 将底部轴的高度设置为画布的高度 - region 高度 - paddingTop - paddingBottom
return layoutRect.height - 324;
}
},
{
orient: 'left',
type: 'band',
grid: {
visible: false
},
domainLine: {
visible: false
},
label: {
space: 10
},
bandPadding: 0
}
],
legends: {
visible: true,
orient: 'right',
type: 'color',
field: 'value',
title: {
visible: true,
text: `Correlation Coefficient`
}
}
};
It should display all the label on the bottom axis.
preproduce spec: