初始化数据可视化项目
This commit is contained in:
199
experiment_5/task4/echarts模板/2_sales_product对照模板.html
Executable file
199
experiment_5/task4/echarts模板/2_sales_product对照模板.html
Executable file
@@ -0,0 +1,199 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user