配置项如下
var source = [{"industry":"银行","name":"平安银行","涨跌幅":-0.14,"量比":0.83,"Amount":87362.43},{"industry":"全国地产","name":"万 科A","涨跌幅":1.3,"量比":1.69,"Amount":197637.2},{"industry":"生物制药","name":"国农科技","涨跌幅":-3.39,"量比":0.0,"Amount":3449.41},{"industry":"环境保护","name":"世纪星源","涨跌幅":10.1,"量比":2.89,"Amount":12274.01},{"industry":"区域地产","name":"深振业A","涨跌幅":1.44,"量比":2.39,"Amount":6369.07},{"industry":"酒店餐饮","name":"全新好","涨跌幅":-0.73,"量比":1.3,"Amount":2305.26},{"industry":"运输设备","name":"神州高铁","涨跌幅":0.26,"量比":0.89,"Amount":4129.22},{"industry":"综合类","name":"中国宝安","涨跌幅":-0.52,"量比":0.72,"Amount":5128.63},{"industry":"建筑施工","name":"*ST美丽","涨跌幅":2.04,"量比":0.0,"Amount":729.37},{"industry":"区域地产","name":"深物业A","涨跌幅":4.24,"量比":5.19,"Amount":8691.59},{"industry":"玻璃","name":"南 玻A","涨跌幅":0.24,"量比":0.74,"Amount":2706.7},{"industry":"全国地产","name":"沙河股份","涨跌幅":3.15,"量比":3.65,"Amount":8607.37},{"industry":"家用电器","name":"深康佳A","涨跌幅":0.47,"量比":0.88,"Amount":4960.5},{"industry":"文教休闲","name":"深中华A","涨跌幅":0.44,"量比":0.85,"Amount":1076.83},{"industry":"装修装饰","name":"*ST神城","涨跌幅":5.11,"量比":0.0,"Amount":6582.9},{"industry":"其他商业","name":"深粮控股","涨跌幅":-1.64,"量比":1.3,"Amount":5383.55},{"industry":"元器件","name":"深华发A","涨跌幅":1.93,"量比":2.81,"Amount":2101.73},{"industry":"电脑设备","name":"深科技","涨跌幅":-0.12,"量比":0.6,"Amount":8031.7},{"industry":"其他建材","name":"深天地A","涨跌幅":0.92,"量比":1.4,"Amount":2597.53},{"industry":"汽车服务","name":"特 力A","涨跌幅":-0.58,"量比":0.73,"Amount":5263.19},{"industry":"其他商业","name":"飞亚达A","涨跌幅":0.51,"量比":1.09,"Amount":2195.08},{"industry":"火力发电","name":"深圳能源","涨跌幅":0.64,"量比":0.93,"Amount":3636.08},{"industry":"医药商业","name":"国药一致","涨跌幅":-0.35,"量比":1.22,"Amount":4880.9},{"industry":"汽车配件","name":"富奥股份","涨跌幅":0.42,"量比":0.65,"Amount":695.9},{"industry":"全国地产","name":"大悦城","涨跌幅":2.29,"量比":1.96,"Amount":10547.66},{"industry":"元器件","name":"深桑达A","涨跌幅":1.6,"量比":0.75,"Amount":3038.67},{"industry":"综合类","name":"神州数码","涨跌幅":-0.3,"量比":0.79,"Amount":5104.54},{"industry":"环境保护","name":"中国天楹","涨跌幅":1.76,"量比":0.95,"Amount":43531.08},{"industry":"全国地产","name":"华联控股","涨跌幅":0.2,"量比":0.76,"Amount":4961.56},{"industry":"火力发电","name":"深南电A","涨跌幅":-2.98,"量比":1.18,"Amount":5699.69},{"industry":"广告包装","name":"深大通","涨跌幅":-3.94,"量比":1.38,"Amount":16266.95},{"industry":"轻工机械","name":"中集集团","涨跌幅":0.0,"量比":0.68,"Amount":5116.99}];
/*
var source = [{"industry":"银行","name":"平安银行","涨跌幅":-0.14,"量比":0.83,"Amount":87362.43},{"industry":"全国地产","name":"万 科A","涨跌幅":1.3,"量比":1.69,"Amount":197637.2},{"industry":"生物制药","name":"国农科技","涨跌幅":-3.39,"量比":0.0,"Amount":3449.41},{"industry":"环境保护","name":"世纪星源","涨跌幅":10.1,"量比":2.89,"Amount":12274.01},{"industry":"区域地产","name":"深振业A","涨跌幅":1.44,"量比":2.39,"Amount":6369.07},{"industry":"酒店餐饮","name":"全新好","涨跌幅":-0.73,"量比":1.3,"Amount":2305.26},{"industry":"运输设备","name":"神州高铁","涨跌幅":0.26,"量比":0.89,"Amount":4129.22},{"industry":"综合类","name":"中国宝安","涨跌幅":-0.52,"量比":0.72,"Amount":5128.63},{"industry":"建筑施工","name":"*ST美丽","涨跌幅":2.04,"量比":0.0,"Amount":729.37},{"industry":"区域地产","name":"深物业A","涨跌幅":4.24,"量比":5.19,"Amount":8691.59},{"industry":"玻璃","name":"南 玻A","涨跌幅":0.24,"量比":0.74,"Amount":2706.7},{"industry":"全国地产","name":"沙河股份","涨跌幅":3.15,"量比":3.65,"Amount":8607.37},{"industry":"家用电器","name":"深康佳A","涨跌幅":0.47,"量比":0.88,"Amount":4960.5},{"industry":"文教休闲","name":"深中华A","涨跌幅":0.44,"量比":0.85,"Amount":1076.83},{"industry":"装修装饰","name":"*ST神城","涨跌幅":5.11,"量比":0.0,"Amount":6582.9},{"industry":"其他商业","name":"深粮控股","涨跌幅":-1.64,"量比":1.3,"Amount":5383.55},{"industry":"元器件","name":"深华发A","涨跌幅":1.93,"量比":2.81,"Amount":2101.73},{"industry":"电脑设备","name":"深科技","涨跌幅":-0.12,"量比":0.6,"Amount":8031.7},{"industry":"其他建材","name":"深天地A","涨跌幅":0.92,"量比":1.4,"Amount":2597.53},{"industry":"汽车服务","name":"特 力A","涨跌幅":-0.58,"量比":0.73,"Amount":5263.19}
];
var source = [
{
"industry": "银行",
"name": "平安银行",
"涨跌幅": -0.14
},
{
"industry": "全国地产",
"name": "万 科A",
"涨跌幅": 1.3
},
{
"industry": "生物制药",
"name": "国农科技",
"涨跌幅": -3.39
},
{
"industry": "环境保护",
"name": "世纪星源",
"涨跌幅": 10.1
},
{
"industry": "区域地产",
"name": "深振业A",
"涨跌幅": 1.44
},
{
"industry": "酒店餐饮",
"name": "全新好",
"涨跌幅": -0.73
},
{
"industry": "运输设备",
"name": "神州高铁",
"涨跌幅": 0.26
},
{
"industry": "综合类",
"name": "中国宝安",
"涨跌幅": -0.52
},
{
"industry": "建筑施工",
"name": "*ST美丽",
"涨跌幅": 2.04
},
{
"industry": "区域地产",
"name": "深物业A",
"涨跌幅": 4.24
},
{
"industry": "玻璃",
"name": "南 玻A",
"涨跌幅": 0.24
},
{
"industry": "全国地产",
"name": "沙河股份",
"涨跌幅": 3.15
},
{
"industry": "家用电器",
"name": "深康佳A",
"涨跌幅": 0.47
},
{
"industry": "文教休闲",
"name": "深中华A",
"涨跌幅": 0.44
},
{
"industry": "装修装饰",
"name": "*ST神城",
"涨跌幅": 5.11
},
{
"industry": "其他商业",
"name": "深粮控股",
"涨跌幅": -1.64
},
{
"industry": "元器件",
"name": "深华发A",
"涨跌幅": 1.93
},
{
"industry": "电脑设备",
"name": "深科技",
"涨跌幅": -0.12
},
{
"industry": "其他建材",
"name": "深天地A",
"涨跌幅": 0.92
},
{
"industry": "汽车服务",
"name": "特 力A",
"涨跌幅": -0.58
},
{
"industry": "其他商业",
"name": "飞亚达A",
"涨跌幅": 0.51
},
{
"industry": "火力发电",
"name": "深圳能源",
"涨跌幅": 0.64
},
{
"industry": "医药商业",
"name": "国药一致",
"涨跌幅": -0.35
},
{
"industry": "汽车配件",
"name": "富奥股份",
"涨跌幅": 0.42
},
{
"industry": "全国地产",
"name": "大悦城",
"涨跌幅": 2.29
},
{
"industry": "元器件",
"name": "深桑达A",
"涨跌幅": 1.6
},
{
"industry": "综合类",
"name": "神州数码",
"涨跌幅": -0.3
},
{
"industry": "环境保护",
"name": "中国天楹",
"涨跌幅": 1.76
},
{
"industry": "全国地产",
"name": "华联控股",
"涨跌幅": 0.2
}
];
*/
var temp = {};
for (var i = 0; i < source.length; i++) {
var industry = source[i]["industry"];
if(!temp[industry]) {
temp[industry] = [];
}
temp[industry].push(source[i]);
}
var data = [];
var colors = ['#7591CC', '#5CC9CC', '#CC355B'],
idx = 0;
for(var industry in temp) {
if(!!industry && !!temp[industry] && temp[industry].length > 0) {
var item = {
name: industry,
value:industry.legend,
itemStyle: {
color: colors[idx++ % 3],
},
children: []
}
for (var i = 0; i < temp[industry].length; i++) {
var name = temp[industry][i]["name"],
change = temp[industry][i]["涨跌幅"],
sname = name[i].length;
item["children"].push({
name: industry + '-' + name,
value:sname,
value1:change,
itemStyle: {
colorSaturation: change/10,
colorAlpha: 0.8
}
});
}
data.push(item);
}
}
// var modes = ['2012Budget', '2011Budget', 'Growth'];
var option = {
title: {
left: 0,
top: "4%",
text: ['{c|}' + '{d|(行业分类)}'],
// text:[],
textStyle: {
rich: {
c: {
color: '#0000',
fontSize: 25,
fontWeight: 'bold',
width: 4,
height: 15,
backgroundColor: '#2196f3',
},
d: {
// color: '#3e4956',
fontWeight: 'bold',
fontSize: 17,
padding: [0, 0, 0, 30],
},
}
},
},
tooltip: {},
series: [{
name: '全部',
type: 'treemap',
visibleMin: 300,
data: data,
leafDepth: 4, //呈现层级,若为1加载时仅展开一层,接下来的每一层通过单击进入,如上面的效果图所示,
//每一层级呈现的样式
label: {
show: true ,
fontSize: 10,
// color: '#000000',
formatter: function(params) {
var arr = [
params.name,
'涨跌幅: ' + params.value
];
return arr.join('\n');
}
},
levels: [{
colorSaturation: [0.3, 0.7],
itemStyle: {
normal: {
borderColor: 'black',
borderWidth: 0.5,
gapWidth: 2
}
}
},
{
colorSaturation: [0.3, 0.7],
colorMappingBy: 'id',
itemStyle: {
normal: {
// borderColorSaturation: 0.7,
gapWidth: 1,
borderWidth: 2
}
}
},
]
}]
};