refactor(experiment_5):重构实验 5 数据格式和图表展示
- 移除 iris.csv 和 marketing.sql 文件 - 新增 sales_manager.csv 和 sales_month.csv 文件 - 添加 sales_manager.js 文件，实现销售数据的图表展示
This commit is contained in:
180
experiment_5/task4/js/sales_manager.js
Normal file
180
experiment_5/task4/js/sales_manager.js
Normal file
@@ -0,0 +1,180 @@
|
||||
d3.csv("data/sales_manager.csv", function (error, data) {
|
||||
// console.log(data);
|
||||
|
||||
var sales_data = []
|
||||
var profit_data = []
|
||||
var names = []
|
||||
|
||||
for ( i = 0; i < data.length; i++) {
|
||||
var temp = {}
|
||||
var temp1 = {}
|
||||
|
||||
temp['value'] = parseFloat(data[i].sales);
|
||||
temp['name'] = data[i].sales_manager;
|
||||
|
||||
temp1['value'] = parseFloat(data[i].profit);
|
||||
temp1['name'] = data[i].sales_manager;
|
||||
|
||||
sales_data.push(temp);
|
||||
profit_data.push(temp1);
|
||||
names.push(data[i].sales_manager)
|
||||
}
|
||||
|
||||
// console.log(sales_data)
|
||||
// console.log(profit_data)
|
||||
// console.log(names)
|
||||
|
||||
|
||||
var myChart = echarts.init(document.getElementById('data_manager')); // 初始化一个图表实例
|
||||
|
||||
option = {
|
||||
// 颜色数组，包括6种不同的颜色值
|
||||
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
||||
// 图表的标题，文本为"销售情况 利润情况"，位置在左侧，字体颜色为蓝色（#0099FF），字体大小为10。
|
||||
title: {
|
||||
text: ' 销售情况 利润情况',
|
||||
left: 'left',
|
||||
textStyle: {
|
||||
color: '#0099FF',
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
// 提示框配置
|
||||
tooltip: {
|
||||
// 表示当鼠标悬停在数据项上时触发提示框
|
||||
trigger: 'item',
|
||||
// 定义了提示框的显示格式，包括数据系列的名称（{a}）、数据项的名称（{b}）、数值（{c}）和百分比（{d}%）
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center', // 图例水平居中显示
|
||||
top: 'bottom', // 图例位于图表底部
|
||||
data: names, // 图例的数据项为names数组，即每个数据项的名称
|
||||
// 图例文本的样式，包括颜色数组
|
||||
textStyle: {
|
||||
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
||||
},
|
||||
padding: 0, // 图例的内边距为0
|
||||
itemGap: 3, // 图例项之间的间距为3
|
||||
itemWidth: 30, // 图例项的宽度为30
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售额', // 图表的名称
|
||||
type: 'pie', // 饼图
|
||||
radius: [5, 85], // 饼图的半径范围，从5到85
|
||||
center: ['30%', '50%'], // 饼图的中心位置在容器的30%宽度和50%高度处
|
||||
roseType: 'area', // 使用面积模式绘制玫瑰图
|
||||
// 标签的显示方式，这里设置为不显示标签
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
// 标签线的显示方式，这里设置为不显示标签线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 高亮状态下的样式，这里设置为不显示高亮状态下的标签
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: sales_data, // 饼图的数据为sales_data数组
|
||||
},
|
||||
{
|
||||
name: '利润', // 图表的名称
|
||||
type: 'pie', // 饼图
|
||||
radius: [5, 85], // 饼图的半径范围，从5到85
|
||||
center: ['80%', '50%'], // 饼图的中心位置在容器的80%宽度和50%高度处
|
||||
roseType: 'area', // 使用面积模式绘制玫瑰图
|
||||
// 标签的显示方式，这里设置为不显示标签
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
// 标签线的显示方式，这里设置为不显示标签线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: profit_data, // 饼图的数据为profit_data数组
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
||||
// 这段代码是用于在 ECharts 图表中实现自动轮播的效果。
|
||||
// 每隔2秒钟，图表会自动切换到下一个数据项，并高亮显示当前数据项以及显示对应的提示框（tooltip）。
|
||||
var currentIndex = -1;
|
||||
var pie_index = -1;
|
||||
var pie_index1 = 0
|
||||
setInterval(function () {
|
||||
var dataLen = option.series[1].data.length;
|
||||
console.log(option.series[1].data);
|
||||
console.log(dataLen); // 6
|
||||
/*
|
||||
pie_index
|
||||
-1 0
|
||||
0 1
|
||||
1 2
|
||||
...
|
||||
10 11
|
||||
11 0
|
||||
*/
|
||||
pie_index = pie_index == 11 ? 0 : (pie_index + 1)
|
||||
// console.log(currentIndex1)
|
||||
// 取消之前高亮的图形
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
/*
|
||||
seriesIndex
|
||||
0
|
||||
*/
|
||||
seriesIndex: pie_index1,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
/*
|
||||
currentIndex
|
||||
-1 0
|
||||
0 1
|
||||
1 2
|
||||
...
|
||||
5 0
|
||||
*/
|
||||
currentIndex = (currentIndex + 1) % dataLen;
|
||||
/*
|
||||
pie_index
|
||||
0 0
|
||||
1 0
|
||||
...
|
||||
5 0
|
||||
6 1
|
||||
...
|
||||
11 1
|
||||
*/
|
||||
pie_index1 = parseInt(pie_index / 6)
|
||||
// 高亮当前图形
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: pie_index1,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
// 显示提示框
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: pie_index1,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
|
||||
|
||||
})
|
||||
227
experiment_5/task4/js/sales_month.js
Normal file
227
experiment_5/task4/js/sales_month.js
Normal file
@@ -0,0 +1,227 @@
|
||||
d3.csv("data/sales_month.csv", function (error, data) {
|
||||
// console.log(data);
|
||||
var month = [];
|
||||
var sales = [];
|
||||
var profit = [];
|
||||
for (i = 0; i < data.length; i++) {
|
||||
month.push(data[i].month);
|
||||
sales.push(Math.round(data[i].sales / 100) / 100);
|
||||
profit.push(Math.round(data[i].profit / 100) / 100);
|
||||
}
|
||||
// console.log("---month---")
|
||||
// console.log(month)
|
||||
// console.log("---sales---")
|
||||
// console.log(sales)
|
||||
// console.log("---profit---")
|
||||
// console.log(profit)
|
||||
|
||||
var myChart = echarts.init(document.getElementById('data_month'));
|
||||
var option = {
|
||||
legend: {
|
||||
data: ['销售额（万元）', '利润（万元）'], // 图例的数据为两个指标，注册总量和访问总量
|
||||
x: 'center', // 图例的水平位置为居中
|
||||
y: 'top', // 图例的垂直位置为顶部
|
||||
padding: [5, 0, 0, 0], // 图例的内边距，分别为上、右、下、左，这里设置为上边距为5。
|
||||
textStyle: { // 设置图例文字的样式
|
||||
// color: '00F1F3', // 图例文字的颜色
|
||||
color: ['#E78932', '#2094CA'],
|
||||
fontSize: 10, // 图例文字的字体大小为10
|
||||
},
|
||||
itemWidth: 28, // 图例项的宽度为28
|
||||
itemHeight: 12, // 图例项的高度为12
|
||||
},
|
||||
grid: {
|
||||
show: false, // 表示不显示网格
|
||||
left: 0, // 网格距离容器左侧的距离为0
|
||||
right: 20, // 网格距离容器右侧的距离为20
|
||||
bottom: 0, // 网格距离容器底部的距离为0
|
||||
top: '15%', // 网格距离容器顶部的距离为容器高度的15%
|
||||
containLabel: true, // 网格区域包含数据标签
|
||||
},
|
||||
tooltip: {
|
||||
show: true, // 显示提示框
|
||||
trigger: 'axis', // 提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息
|
||||
|
||||
// 设置坐标轴指示器的样式
|
||||
axisPointer: {
|
||||
type: 'line', // 坐标轴指示器的类型为直线，即在触发点处显示一条直线标记
|
||||
// 设置坐标轴指示器标签的样式
|
||||
label: {
|
||||
show: true, // 显示坐标轴指示器标签
|
||||
// color:'none',
|
||||
fontSize: 8, // 坐标轴指示器标签的字体大小为8
|
||||
},
|
||||
// 设置坐标轴指示器线条的样式
|
||||
lineStyle: {
|
||||
color: '#2094CA', // 坐标轴指示器线条的颜色为蓝色
|
||||
type: 'dotted', // 坐标轴指示器线条的类型为虚线
|
||||
},
|
||||
},
|
||||
|
||||
textStyle: {
|
||||
fontSize: 10, // 提示框文字的字体大小为10
|
||||
},
|
||||
},
|
||||
// 设置x轴的样式和数据
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
|
||||
boundaryGap: false, // 表示x轴两端不留空白
|
||||
// 设置x轴标签的样式
|
||||
axisLabel: {
|
||||
fontSize: 8, // x轴标签的字体大小为8
|
||||
color: '#2094CA', // x轴标签的颜色为蓝色
|
||||
},
|
||||
data: month, // x轴的数据为['A', 'B', 'C', 'D', 'E', 'F']
|
||||
}
|
||||
],
|
||||
// 设置y轴的样式
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: {show: false}, // 不显示y轴的分割线
|
||||
type: 'value', // y轴的类型为数值型，即显示的是连续的数据值
|
||||
// 设置y轴标签的样式
|
||||
axisLabel: {
|
||||
fontSize: 8, // y轴标签的字体大小为8
|
||||
color: '#2094CA', // y轴标签的颜色为蓝色
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '销售额（万元）', // 该图表的名称为"注册总量"
|
||||
type: 'line', // 图表类型为折线图
|
||||
symbol: 'circle', // 数据点的形状为圆形
|
||||
symbolSize: 4, // 数据点的大小为4
|
||||
// 设置数据点的样式
|
||||
itemStyle: {
|
||||
normal: {// 正常状态下的数据点样式
|
||||
color: '#E78932', // 数据点的颜色为橙色
|
||||
},
|
||||
},
|
||||
lineStyle: {// 设置线条的样式
|
||||
color: '#E78932', // 线条的颜色为橙色
|
||||
width: 1, // 线条的宽度为1
|
||||
},
|
||||
label: {// 设置标签的样式
|
||||
show: false, // 表示显示标签
|
||||
position: 'top', // 标签的位置在数据点的上方
|
||||
// 设置标签文字的样式
|
||||
textStyle: {
|
||||
color: '#E78932', // 标签文字的颜色为橙色
|
||||
},
|
||||
fontSize: 8, // 标签文字的字体大小为8
|
||||
},
|
||||
// 设置区域填充的样式
|
||||
areaStyle: {
|
||||
// 区域填充的颜色渐变
|
||||
color: {
|
||||
type: 'linear', // 颜色渐变的类型为线性渐变
|
||||
// 渐变的起点和终点坐标
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
// 渐变的颜色停止点，颜色渐变是从上到下，从深橙色（#D98234）过渡到深灰色（#33313C）
|
||||
colorStops: [{
|
||||
offset: 0, color: '#D98234' // 0% 处的颜色 表示第一个颜色停止点，偏移量为0，颜色为深橙色
|
||||
}, {
|
||||
offset: 1, color: '#33313C' // 100% 处的颜色 表示第二个颜色停止点，偏移量为1，颜色为深灰色
|
||||
}],
|
||||
global: false // 渐变不全局应用
|
||||
},
|
||||
|
||||
// color:'#CE7E35',
|
||||
// color:'#1C7DEE',
|
||||
// color:'#5FB397',
|
||||
opacity: 0.5, // 区域的透明度为0.5
|
||||
},
|
||||
data: sales, // 折线图的数据
|
||||
showAllSymbol: true, // 显示所有数据点
|
||||
},
|
||||
{
|
||||
name: '利润（万元）', // 图表的名称为"访问总量"
|
||||
type: 'line', // 图表类型为折线图
|
||||
symbol: 'circle', // 数据点的形状为圆形
|
||||
symbolSize: 4, // 数据点的大小为4
|
||||
itemStyle: {// 设置数据点的样式
|
||||
normal: {// 正常状态下的数据点样式
|
||||
// borderColor:'#0099FF',
|
||||
color: '#0099FF', // 数据点的颜色为蓝色
|
||||
},
|
||||
},
|
||||
label: {// 设置标签的样式
|
||||
show: false, // 显示标签
|
||||
position: 'top', // 标签的位置在数据点的上方
|
||||
textStyle: {// 设置标签文字的样式
|
||||
color: '#0099FF', // 标签文字的颜色为蓝色
|
||||
},
|
||||
fontSize: 8, // 标签文字的字体大小为8
|
||||
},
|
||||
lineStyle: {// 设置线条的样式
|
||||
color: '#0099FF', // 线条的颜色为蓝色
|
||||
width: 0, // 线条的宽度为0
|
||||
},
|
||||
areaStyle: {// 设置区域填充的样式
|
||||
color: {// 区域填充的颜色渐变
|
||||
type: 'linear', // 颜色渐变的类型为线性渐变
|
||||
// 渐变的起点和终点坐标
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
// 渐变的颜色停止点
|
||||
colorStops: [{
|
||||
offset: 0, color: '#0099FF' // 0% 处的颜色 表示第一个颜色停止点，偏移量为0，颜色为蓝色
|
||||
}, {
|
||||
offset: 1, color: '#394E7F' // 100% 处的颜色 表示第二个颜色停止点，偏移量为1，颜色为深蓝色
|
||||
}],
|
||||
global: false // 渐变不全局应用
|
||||
},
|
||||
opacity: 0.3, // 区域的透明度为0.3
|
||||
},
|
||||
data: profit, // 折线图的数据
|
||||
showAllSymbol: true, // 显示所有数据点
|
||||
},
|
||||
]
|
||||
};
|
||||
// 将配置项和数据应用到图表上
|
||||
myChart.setOption(option)
|
||||
|
||||
// 用于在图表中周期性地高亮显示数据点并显示相应的提示框（tooltip）
|
||||
var currentIndex = -1; // 初始化当前索引为-1
|
||||
// 设置一个定时器，每隔2000毫秒执行一次函数内的代码块
|
||||
setInterval(function () {
|
||||
var dataLen = option.series[0].data.length; // 获取图表中第一个系列的数据长度
|
||||
console.log(option.series[0].data);
|
||||
console.log(dataLen); // 6
|
||||
// 调用 dispatchAction 方法来执行特定的操作，包括取消之前高亮的图形、高亮当前图形和显示提示框。
|
||||
// 取消之前高亮的图形
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0, // 表示操作第一个系列
|
||||
dataIndex: currentIndex // 表示操作的数据索引为当前索引
|
||||
});
|
||||
/*
|
||||
-1 0
|
||||
0 1
|
||||
1 2
|
||||
...
|
||||
5 0
|
||||
*/
|
||||
currentIndex = (currentIndex + 1) % dataLen; // 更新当前索引，使其循环递增，直到达到数据长度
|
||||
// 高亮当前图形
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
// 显示提示框
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
})
|
||||
81
experiment_5/task4/js/sales_product.js
Normal file
81
experiment_5/task4/js/sales_product.js
Normal file
@@ -0,0 +1,81 @@
|
||||
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)
|
||||
|
||||
|
||||
})
|
||||
316
experiment_5/task4/js/sales_province.js
Normal file
316
experiment_5/task4/js/sales_province.js
Normal file
@@ -0,0 +1,316 @@
|
||||
d3.csv("data/sales_province.csv", function (error, data) {
|
||||
console.log(data);
|
||||
|
||||
var sales_province = [];
|
||||
var profit_province = [];
|
||||
var sales = [];
|
||||
|
||||
for (i = 0; i < data.length; i++) {
|
||||
var temp = {};
|
||||
var temp1 = {};
|
||||
temp['name'] = data[i].province;
|
||||
temp['value'] = parseFloat(data[i].sales);
|
||||
temp1['name'] = data[i].province;
|
||||
temp1['value'] = parseFloat(data[i].profit);
|
||||
|
||||
sales_province.push(temp);
|
||||
profit_province.push(temp1);
|
||||
sales.push(parseFloat(data[i].sales));
|
||||
}
|
||||
var sales_total = Math.round(d3.sum(sales) / 10000);
|
||||
|
||||
console.log(sales_province);
|
||||
console.log(profit_province);
|
||||
console.log(sales);
|
||||
|
||||
|
||||
|
||||
var myChart = echarts.init(document.getElementById('data_province'));
|
||||
// 使用ECharts库创建一个中国地图，并显示各个省份的销售数据
|
||||
var mapName = 'china'
|
||||
|
||||
|
||||
var geoCoordMap = {}; // 空对象，用于存储地理坐标信息
|
||||
|
||||
/*获取地图数据*/
|
||||
myChart.showLoading(); // 显示加载动画
|
||||
var mapFeatures = echarts.getMap(mapName).geoJson.features; // 获取地图的地理信息数据
|
||||
console.log("========mapFeatures=========");
|
||||
console.log(mapFeatures);
|
||||
myChart.hideLoading(); // 隐藏加载动画
|
||||
// 遍历地理信息数据中的每个地区，将地区名称和经纬度存储到 geoCoordMap 对象中。
|
||||
// 对于每个地区，首先获取其名称和经纬度，然后将名称作为键，经纬度作为值存储到 geoCoordMap 对象中。
|
||||
mapFeatures.forEach(function (v) {
|
||||
console.log("==========v===========");
|
||||
console.log(v);
|
||||
// 地区名称
|
||||
var name = v.properties.name;
|
||||
// 地区经纬度
|
||||
geoCoordMap[name] = v.properties.cp;
|
||||
|
||||
});
|
||||
console.log("===========geoCoordMap=============");
|
||||
console.log(geoCoordMap);
|
||||
var max = 480,
|
||||
min = 9; // todo
|
||||
var maxSize4Pin = 100,
|
||||
minSize4Pin = 20;
|
||||
|
||||
// 该函数的作用是将输入的数据转换为特定格式的数组。
|
||||
var convertData = function (data) {
|
||||
console.log("=======data========");
|
||||
console.log(data);
|
||||
var res = []; // 创建一个空数组 res
|
||||
// 遍历输入数据 data 中的每个元素
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
console.log("========geoCoord========");
|
||||
console.log(geoCoord);
|
||||
// 将该元素的名称和值（以及经纬度信息）组成一个新的对象，并将其添加到 res 数组中
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
console.log("========res=======");
|
||||
console.log(res);
|
||||
return res;
|
||||
};
|
||||
option = {
|
||||
// backgroundColor: '#013954',
|
||||
// title: {
|
||||
// text: "2019年各省份销售和利润情况", // 标题的文本为 "2019年各省份销售和利润情况"
|
||||
// // 标题文本的样式信息，包括对齐方式（居中）、颜色（白色）和字体大小（20）
|
||||
// textStyle: {
|
||||
// align: 'center',
|
||||
// color: '#fff',
|
||||
// fontSize: 20,
|
||||
// },
|
||||
// top: '5%', // 标题的位置在垂直方向上为距离顶部5%
|
||||
// left: 'center', // 标题的位置在水平方向上为居中
|
||||
// },
|
||||
tooltip: {
|
||||
padding: 0, // 提示框内边距为0
|
||||
enterable: true, // 提示框可以鼠标进入
|
||||
transitionDuration: 1, // 提示框显示和隐藏的过渡时间为1秒
|
||||
// 提示框文本的样式信息，包括颜色（黑色）、装饰（无）
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
decoration: 'none',
|
||||
},
|
||||
// 用于自定义提示框的内容
|
||||
// 通过传入的参数params获取当前数据的名称、销售额和利润，然后拼接成一个HTML字符串作为提示框的内容。
|
||||
formatter: function (params) {
|
||||
console.log("========params========");
|
||||
console.log(params);
|
||||
var tipHtml = '';
|
||||
tipHtml = '<div style="width:180px;height:120px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
|
||||
+ '<div style="width:90%;height:30px;line-height:30px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 10px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:30px;">' + '</i>'
|
||||
+ '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
|
||||
+ '<div style="padding:10px">'
|
||||
+ '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
|
||||
+ '销售额：' + '<span style="color:#11ee7d;margin:0 6px;">' + sales_province[params.dataIndex].value + '</span>' + '元' + '</p>'
|
||||
+ '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
|
||||
+ '利润：' + '<span style="color:#f48225;margin:0 6px;">' + profit_province[params.dataIndex].value + '</span>' + '元' + '</p>'
|
||||
+ '</div>' + '</div>';
|
||||
// console.log("=======tipHtml========");
|
||||
// console.log(tipHtml);
|
||||
return tipHtml;
|
||||
}
|
||||
},
|
||||
|
||||
// 设置视觉映射组件（visualMap）的样式和属性
|
||||
visualMap: {
|
||||
show: true, // 显示视觉映射组件
|
||||
min: 0, // 视觉映射组件的最小值
|
||||
max: 300000, // 视觉映射组件的最大值
|
||||
left: '10%', // 视觉映射组件距离容器左侧的距离为容器宽度的10%
|
||||
top: 'bottom', // 视觉映射组件的位置在容器底部
|
||||
calculable: true, // 视觉映射组件可以计算数据
|
||||
seriesIndex: [1], // 视觉映射组件关联的数据系列索引为1
|
||||
// 视觉映射组件的颜色范围，从蓝色（#04387b）到浅蓝色（#467bc0）
|
||||
inRange: {
|
||||
color: ['#04387b', '#467bc0'] // 蓝绿
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
|
||||
},
|
||||
geo: {
|
||||
show: true, // 显示地理坐标系组件
|
||||
map: mapName, // 使用的地图名称为mapName
|
||||
// 表示不显示标签
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
roam: false, // 禁止鼠标缩放和平移地图
|
||||
// 地图区域的颜色和边框颜色
|
||||
itemStyle: {
|
||||
// 在正常状态下，区域颜色为深蓝色（#023677），边框颜色为浅蓝色（#1180c7）
|
||||
normal: {
|
||||
areaColor: '#023677',
|
||||
borderColor: '#1180c7',
|
||||
},
|
||||
// 在高亮状态下，区域颜色为浅蓝色（#4499d0）
|
||||
emphasis: {
|
||||
areaColor: '#4499d0',
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '散点', // 图表的名称
|
||||
type: 'scatter', // 图表类型为散点图
|
||||
coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
|
||||
data: convertData(profit_province), // 使用convertData函数处理传入的数据作为散点图的数据源
|
||||
symbolSize: function (val) {// 散点的大小由数据的第三个值决定
|
||||
console.log("========val=========");
|
||||
console.log(val);
|
||||
return val[2] / 8000;
|
||||
},
|
||||
// 标签的显示方式
|
||||
label: {
|
||||
// 在正常状态下，标签显示省份名称（{b}），位置在右侧，字体大小为8
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true,
|
||||
fontSize: 8,
|
||||
},
|
||||
// 在高亮状态下，标签始终显示。
|
||||
emphasis: {
|
||||
show: true,
|
||||
|
||||
}
|
||||
},
|
||||
// animation: false,
|
||||
// 散点的颜色为白色
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'map', // 图表类型为地图
|
||||
map: mapName, // 使用的地图名称为mapName
|
||||
geoIndex: 0, // 地理坐标系组件在组件列表中的索引为0
|
||||
aspectScale: 0.5, // 地图的长宽比为0.5
|
||||
showLegendSymbol: false, // 存在图例时不显示图例中的符号
|
||||
// 标签的显示方式
|
||||
label: {
|
||||
// 在正常状态下，标签始终显示
|
||||
normal: {
|
||||
show: true
|
||||
},
|
||||
// 在高亮状态下，标签不显示，并且文本颜色为白色
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
roam: true, // 允许鼠标缩放和平移地图
|
||||
// 地图区域的颜色和边框颜色
|
||||
itemStyle: {
|
||||
// 在正常状态下，区域颜色为深蓝色（#031525），边框颜色为白色（#FFFFFF）
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
// 在高亮状态下，区域颜色为浅蓝色（#2B91B7）。
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
},
|
||||
animation: false, // 不使用动画效果
|
||||
data: sales_province // 地图的数据源
|
||||
},
|
||||
// 设置散点图的样式和属性
|
||||
{
|
||||
name: '点', // 图表的名称
|
||||
type: 'scatter', // 图表类型为散点图
|
||||
coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
|
||||
zlevel: 6, // 散点的层级为6，用于控制散点在图表中的显示顺序
|
||||
},
|
||||
// 设置特效散点图的样式和属性
|
||||
{
|
||||
name: 'Top 5', // 图表的名称
|
||||
type: 'effectScatter', // 图表类型为特效散点图
|
||||
// animation: false,
|
||||
coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
|
||||
data: convertData(profit_province), // 使用convertData函数处理后的数据作为散点图的数据源
|
||||
// 散点的大小由数据的第三个值决定
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 8000;
|
||||
},
|
||||
showEffectOn: 'render', // 在渲染时显示特效
|
||||
rippleEffect: { //涟漪特效
|
||||
period: 4, //动画时间，值越小速度越快
|
||||
brushType: 'stroke', //波纹绘制方式为描边
|
||||
scale: 4 //波纹圆环最大限制，值越大波纹越大
|
||||
},
|
||||
hoverAnimation: true, // 鼠标悬停时显示动画效果
|
||||
// 标签的配置项
|
||||
label: {
|
||||
normal: {// 正常状态下
|
||||
formatter: '{b}', // 标签显示省份名称（{b}）
|
||||
position: 'left', // 标签位置在左侧
|
||||
show: false // 不显示标签
|
||||
}
|
||||
},
|
||||
// 散点样式的配置项
|
||||
itemStyle: {
|
||||
normal: {// 正常状态下
|
||||
color: 'yellow', // 散点颜色为黄色
|
||||
shadowBlur: 10, // 阴影模糊度为10
|
||||
shadowColor: 'yellow' // 阴影颜色为黄色
|
||||
}
|
||||
},
|
||||
zlevel: 1 // 散点的层级为1，用于控制散点在图表中的显示顺序
|
||||
},
|
||||
]
|
||||
};
|
||||
myChart.setOption(option)
|
||||
var currentIndex = -1;
|
||||
setInterval(function () {
|
||||
var dataLen = option.series[0].data.length;
|
||||
// 取消之前高亮的图形
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
currentIndex = (currentIndex + 1) % dataLen;
|
||||
// 高亮当前图形
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
// 显示 tooltip
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
var title1 = document.getElementById("title1");
|
||||
title1.style.fontWeight = "bold";
|
||||
title1.style.color = "#2094CA";
|
||||
title1.style.fontSize = "14px";
|
||||
title1.innerHTML = "2019年全国销售额共 <b style='color:#E78932;font-size:24px'>" + sales_total + " </b>万元"
|
||||
|
||||
|
||||
|
||||
})
|
||||
159
experiment_5/task4/js/sales_region.js
Normal file
159
experiment_5/task4/js/sales_region.js
Normal file
@@ -0,0 +1,159 @@
|
||||
d3.csv("data/sales_region.csv", function (error, data) {
|
||||
// console.log(data);
|
||||
var region = [];
|
||||
var sales = [];
|
||||
var profit = [];
|
||||
|
||||
for (i = 0; i < data.length; i++) {
|
||||
region.push(data[i].region)
|
||||
sales.push(parseFloat(data[i].sales))
|
||||
profit.push(parseFloat(data[i].profit))
|
||||
}
|
||||
|
||||
// console.log(region)
|
||||
// console.log(sales)
|
||||
// console.log(profit)
|
||||
|
||||
var myChart = echarts.init(document.getElementById('data_region'));
|
||||
var option = {
|
||||
// backgroundColor: '#323a5e', // 图表的背景颜色为 '#323a5e'
|
||||
tooltip: {
|
||||
trigger: 'axis', // 表示提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息。
|
||||
axisPointer: {
|
||||
type: 'shadow' // 表示坐标轴指示器的样式为阴影，即鼠标悬停时，会在对应的数据点周围显示一个阴影区域。
|
||||
},
|
||||
textStyle: {// 提示框文本的样式，包括颜色（蓝色）和字体大小（10像素）。
|
||||
color: '#0099FF',
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%', // 图表距离容器左侧的距离为2%
|
||||
right: '4%', // 图表距离容器右侧的距离为4%
|
||||
bottom: '14%', // 图表距离容器底部的距离为14%
|
||||
top: '16%', // 图表距离容器顶部的距离为16%
|
||||
containLabel: true // 是否包含坐标轴刻度标签在内，设置为true表示包含
|
||||
},
|
||||
// 设置图例（legend）的样式和位置
|
||||
legend: {
|
||||
data: ['销售额', '利润'], // 表示图例中包含两个数据项
|
||||
right: 10, // 图例距离容器右侧的距离为10
|
||||
top: 12, // 图例距离容器顶部的距离为12
|
||||
// 图例文本的颜色为白色，字体大小为10
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
|
||||
itemWidth: 12, // 图例中每个数据项的宽度为12
|
||||
itemHeight: 10, // 图例中每个数据项的高度为10
|
||||
// itemGap: 35
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
|
||||
data: region,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'white' // x轴线的颜色为白色
|
||||
|
||||
}
|
||||
},
|
||||
// x轴刻度标签的字体大小为8，颜色为蓝色
|
||||
axisLabel: {
|
||||
fontSize: 8,
|
||||
color: '#2094CA',
|
||||
},
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type: 'value', // y轴的类型为数值型，即显示的是连续的数据点
|
||||
// y轴线显示，并且线的颜色为白色
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
// y轴的分割线显示，分割线的颜色为半透明的白色
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.3)'
|
||||
}
|
||||
},
|
||||
// y轴刻度标签的字体大小为8，颜色为蓝色
|
||||
axisLabel: {
|
||||
fontSize: 8,
|
||||
color: '#2094CA',
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '销售额', // 图表的名称
|
||||
type: 'bar', // 图表类型为柱状图
|
||||
barWidth: '15%', // 柱子的宽度为图表宽度的15%
|
||||
label: {show: false}, // 不显示柱子上的标签
|
||||
// 柱子的颜色使用渐变色，从上到下由黄色（#fccb05）渐变为橙色（#f5804d），并且柱子的边框圆角半径为12
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#fccb05'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#f5804d'
|
||||
}]),
|
||||
barBorderRadius: 12,
|
||||
},
|
||||
|
||||
},
|
||||
data: sales, // 柱状图的数据
|
||||
},
|
||||
{
|
||||
name: '利润', // 图表的名称
|
||||
type: 'bar', // 图表类型为柱状图
|
||||
barWidth: '15%', // 柱子的宽度为图表宽度的15%
|
||||
label: {show: false}, // 不显示柱子上的标签
|
||||
// 柱子的颜色使用渐变色，从上到下由绿色（#8bd46e）渐变为深蓝色（#09bcb7），并且柱子的边框圆角半径为11个单位
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#8bd46e'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#09bcb7'
|
||||
}]),
|
||||
barBorderRadius: 11,
|
||||
}
|
||||
},
|
||||
data: profit, // 柱状图的数据
|
||||
}]
|
||||
};
|
||||
// 这段代码的作用是在 ECharts 图表中每隔 2 秒自动切换高亮的图形，并显示相应的提示框。
|
||||
var currentIndex = -1;
|
||||
setInterval(function () {
|
||||
var dataLen = option.series[0].data.length;
|
||||
// 取消之前高亮的图形
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
currentIndex = (currentIndex + 1) % dataLen;
|
||||
// 高亮当前图形
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
// 显示 tooltip
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
})
|
||||
36
experiment_5/task4/js/test.html
Normal file
36
experiment_5/task4/js/test.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
|
||||
<script src="d3.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
d3.csv("../data/sales_month.csv", function (error, data) {
|
||||
console.log(data);
|
||||
var month = [];
|
||||
var sales = [];
|
||||
var profit = [];
|
||||
for (i = 0; i < data.length; i++){
|
||||
month.push(data[i].month);
|
||||
sales.push(Math.round(data[i].sales / 100) / 100);
|
||||
profit.push(Math.round(data[i].profit / 100) / 100);
|
||||
}
|
||||
console.log("---month---")
|
||||
console.log(month)
|
||||
console.log("---sales---")
|
||||
console.log(sales)
|
||||
console.log("---profit---")
|
||||
console.log(profit)
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user