199 lines
4.4 KiB
HTML
Executable File
199 lines
4.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>绘制第一个图表</title>
|
||
<script src="../js/echarts.min.js"></script>
|
||
<script src="../js/d3.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
|
||
<div id="main" style="width: 600px;height:400px;"></div>
|
||
<script>
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
// 对象数组
|
||
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: 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: 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 color = [
|
||
"#00C6FB",
|
||
"#5781FD",
|
||
"#4DB1CB",
|
||
// "#3EBD7C",
|
||
// "#F7A925",
|
||
// "#bda29a",
|
||
// "#ca8622",
|
||
// "#749f83",
|
||
// "#6e7074",
|
||
// "#546570",
|
||
// "#c4ccd3"
|
||
];
|
||
|
||
option = {
|
||
tooltip: {},
|
||
series: [{
|
||
name: '数据库', // 图表的名称
|
||
type: 'treemap', // 图表的类型树状图
|
||
roam: false, // 是否允许鼠标缩放和平移，这里设置为false，表示不允许
|
||
nodeClick: false, // 是否允许点击节点进行交互，这里设置为false，表示不允许
|
||
breadcrumb: false, // 是否显示导航路径，这里设置为false，表示不显示
|
||
// 分别设置图表的左边距、右边距、上边距和下边距，这里都设置为0。
|
||
left: 0,
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
itemStyle: {
|
||
borderColor: '#062e62' // 定义节点的样式，这里设置了边框颜色为'#062e62'
|
||
},
|
||
// 定义节点标签的样式，这里设置了字体大小为8，颜色为白色
|
||
label: {
|
||
fontSize: 8,
|
||
color: '#fff',
|
||
},
|
||
// 用于定义树状图的层级样式
|
||
levels: [{// 定义了多个层级的样式
|
||
color: color, // 设置节点的颜色
|
||
itemStyle: {// 定义节点的样式
|
||
normal: {// 正常状态下的样式
|
||
borderWidth: 0, // 边框宽度，这里设置为0，表示无边框
|
||
borderColor: '#062e62', // 设置边框颜色
|
||
gapWidth: 5 // 设置节点之间的间隔宽度
|
||
}
|
||
}
|
||
},
|
||
{
|
||
//colorSaturation: [0.35, 0.6],
|
||
colorAlpha: [1, 0.5], // 节点颜色的透明度，这里设置为[1, 0.5]，表示正常状态下节点的颜色透明度为1，鼠标悬停时透明度为0.5。
|
||
upperLabel: {// 定义上层节点标签的样式
|
||
normal: {// 定义正常状态下的样式
|
||
color: '#00C6FB', // 设置标签颜色
|
||
fontSize: 10, // 设置标签字体大小
|
||
show: true, // 是否显示标签，这里设置为true，表示显示
|
||
height: 15 // 设置标签高度
|
||
}
|
||
},
|
||
itemStyle: {// 定义节点的样式
|
||
normal: {// 定义正常状态下的样式
|
||
borderWidth: 5, // 设置边框宽度
|
||
borderColor: '#062e62', // 设置边框颜色
|
||
gapWidth: 1, // 设置节点之间的间隔宽度
|
||
},
|
||
emphasis: {// 定义鼠标悬停时的样式
|
||
borderColor: '#ccc' // 设置边框颜色
|
||
}
|
||
}
|
||
}
|
||
],
|
||
leafDepth: 2, // 树的叶子节点深度，其值为2
|
||
data: dtlData // 数据源
|
||
}]
|
||
};
|
||
myChart.setOption(option)
|
||
</script>
|
||
</body>
|
||
|
||
</html> |