echarts treemap配置项内容和展示
配置项如下
var struct_colors = [
'#c73437', '#2e4553', '#6e7073', '#5ba0a7', '#8cc8af',
'#f59731', '#bfa29b', '#709f84', '#d88268'
];
RICH = {
name: {
color: '#fdfa3e',
fontSize: 30,
lineHeight: 30
},
basic: {
color: '#fff',
fontSize: 18,
lineHeight: 18
}
};
var info2 = {
'children': [
{
'asset_num': 50000,
'name': '20~25岁',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#c73437',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
}, {
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
}, {
'name': '二级-03',
'asset_num': 20,
'manage': 'liang-02',
}
],
},
{
'asset_num': 40000,
'name': '25~30岁',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#2e4553',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级-03',
'manage': 'liang-02',
'children': [
{
'name': '三级-1',
'asset_num': 10,
'manage': 'liang-01',
},
{
'name': '三级-2',
'asset_num': 20,
'manage': 'liang-01',
}
],
}
],
},
{
'asset_num': 25000,
'name': '30~35岁',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#6e7073',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级-03',
'manage': 'liang-02',
'children': [
{
'name': '三级-1',
'asset_num': 10,
'manage': 'liang-01',
},
{
'name': '三级-2',
'asset_num': 20,
'manage': 'liang-01',
}
],
}
],
},
{
'asset_num': 25000,
'name': '35~40岁',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#5ba0a7',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级-03',
'manage': 'liang-02',
'children': [
{
'name': '三级-1',
'asset_num': 10,
'manage': 'liang-01',
},
{
'name': '三级-2',
'asset_num': 20,
'manage': 'liang-01',
}
],
}
],
},
{
'asset_num': 25000,
'name': '40~45岁',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#8cc8af',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级-03',
'manage': 'liang-02',
'children': [
{
'name': '三级-1',
'asset_num': 10,
'manage': 'liang-01',
},
{
'name': '三级-2',
'asset_num': 20,
'manage': 'liang-01',
}
],
}
],
},
{
'asset_num': 35000,
'name': '45~50岁',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#f59731',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级-03',
'manage': 'liang-02',
'children': [
{
'name': '三级-1',
'asset_num': 10,
'manage': 'liang-01',
},
{
'name': '三级-2',
'asset_num': 20,
'manage': 'liang-01',
}
],
}
],
},
{
'asset_num': 35000,
'name': '50~55岁',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#bfa29b',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级-03',
'manage': 'liang-02',
'children': [
{
'name': '三级-1',
'asset_num': 10,
'manage': 'liang-01',
},
{
'name': '三级-2',
'asset_num': 20,
'manage': 'liang-01',
}
],
}
],
},
{
'asset_num': 35000,
'name': '55~60岁',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#709f84',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级-03',
'manage': 'liang-02',
'children': [
{
'name': '三级-1',
'asset_num': 10,
'manage': 'liang-01',
},
{
'name': '三级-2',
'asset_num': 20,
'manage': 'liang-01',
}
],
}
],
},
{
'asset_num': 25000,
'name': '60岁以上',
'manage': '平均价格',
itemStyle: {
normal: {
color: '#d88268',
}
},
'children': [
{
'name': '二级组织结构-1',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级组织结构-2',
'asset_num': 20,
'manage': 'liang-01',
},
{
'name': '二级-03',
'manage': 'liang-02',
'children': [
{
'name': '三级-1',
'asset_num': 10,
'manage': 'liang-01',
},
{
'name': '三级-2',
'asset_num': 20,
'manage': 'liang-01',
}
],
}
],
},
]
};
var structs_datas = [];
var formatUtil = echarts.format;
function format_struct_data(children, structs_datas) {
// 添加每个单位的颜色
for (var prop in children) {
var index = Math.floor(Math.random() * 20);
var value = 1;
if (children[prop].asset_num !== 0) {
value = children[prop].asset_num;
}
var tmp = {
name: children[prop].name,
manage: children[prop].manage,
children: [],
asset_num: children[prop].asset_num,
value: value
}
format_struct_data(children[prop].children, tmp.children);
if (tmp.children.length === 0) {
delete tmp.children;
}
structs_datas.push(tmp);
// return structs_datas;
}
}
function showMenu(param) {
// 可在此处添加右击操作内容
console.log('showMenu==============', param);
var event = param.event;
var pageX = event.offsetX;
var pageY = event.offsetY;
console.log('showMenu========', pageX, pageY);
}
format_struct_data(info2.children, structs_datas);
myChart.setOption(option = {
title: {
text: '',
subtext: '',
left: 'leafDepth'
},
grid: {
left: '0%',
top:'0%',
right: '0%',
bottom: '0%',
containLabel: true
},
tooltip: {
formatter: function(info) {
console.log('tool------', info);
var asset_num = info.data.asset_num;
var name = info.name;
return [
'<h4>' + name + '</h4>',
'<div>资产数量：' + asset_num + '</div>',
].join('\n');
// return [
// '{name|' + name + '}',
// '{basic| 资产数量：' + asset_num + '}',
// ].join('\n');
},
// rich: RICH, tooltip不支持富文本
},
series: [{
name: '客户特征',
type: 'treemap',
visibleMin: 300,
// data: format_struct_data(info2.children, structs_datas),
data: structs_datas,
leafDepth: 1,
label: {
normal: {
show: true,
position: 'insideTopLeft',
formatter: function(a) {
console.log('formatter==label=======', a);
return '{name|' + a.name + '}' + "\n\n" + "{basic|平均价格 : " + a.data.asset_num + '㎡/元}';
},
textStyle: {
// color: '', label的字体颜色
fontSize: '18',
fontWeight: 'bold'
},
rich: RICH,
},
},
levels: [{
itemStyle: {
normal: {
borderWidth: 0,
gapWidth: 3,
borderColor:'#111'
}
}
}, {
itemStyle: {
normal: {
gapWidth: 1,
borderColor:'#fff'
}
}
}],
breadcrumb: {
show: true,
// "height": 22,
left: "5%",
top: "0%",
emptyItemWidth: 25,
itemStyle: {
normal: {
color: "#fff",
borderColor: "rgba(13,25,33,0)",
borderWidth: 1,
shadowColor: "rgba(150,150,150,0)",
shadowBlur: 3,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: "#000",
fontWeight: 'bold'
}
},
emphasis: {
textStyle: {}
}
}
},
}]
});
document.oncontextmenu = function() {
return false;
};
myChart.on('contextmenu', showMenu);
截图如下
