dev_xulongjin
2f39064475
- 移除 iris.csv 和 marketing.sql 文件 - 新增 sales_manager.csv 和 sales_month.csv 文件 - 添加 sales_manager.js 文件，实现销售数据的图表展示
81 lines
3.4 KiB
JavaScript
81 lines
3.4 KiB
JavaScript
d3.json("data/sales_product.json", function (error, data) {
|
||
// console.log(data);
|
||
var myChart = echarts.init(document.getElementById('data_product'));
|
||
|
||
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: data// 数据源
|
||
}]
|
||
};
|
||
myChart.setOption(option)
|
||
|
||
|
||
}) |