大数据分析之数据下钻上卷
声明：本次任务简单所以没有前后端分离去做，因此不需要异步处理（cors）
根据Python将数据合并清洗，分析之后，将得到的数据存入数据库，数据库中就是各行业的类别以及数量。
前端用java的相关知识利用echarts绘制数据下钻和上卷图
前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option;
option = {
xAxis: {
data: ['北京', '河北', '天津']
},
yAxis: {},
dataGroupId: '',
animationDurationUpdate: 500,
series: {
type: 'bar',
id: 'sales',
data: [
{
value: 5,
groupId: 'bj'
},
{
value: 2,
groupId: 'hb'
},
{
value: 4,
groupId: 'tj'
}
],
universalTransition: {
enabled: true,
divideShape: 'clone'
}
}
};
//
// const drilldownData = [
// {
// dataGroupId: 'bj',
// data: [
// ['应用技术', 89],
// ['自选课题', 1],
// ]
// },
// {
// dataGroupId: 'hb',
// data: [
// // ['Apples', 4],
// // ['Oranges', 2]
// ['地方计划', 36],
// ['其他', 150,],
// ['自选课题', 78],
// ['自选课题', 78],
// ['地方基金', 2,],
// ['国家科技计划', 305],
// ['资源与环境', 3],
// ['生物与医药', 4],
// ['电子信息', 61],
// ['地方基金', 2,],
// ['现代农业', 60],
// ['资源与环境', 1],
// ['先进制造与自动化',40],
// ['材料与化工', 5],
// ['航空与航天', 5],
// ['能源与交通', 2],
// ['社会公益', 27],
// ['应用技术', 8,],
// ]
// },
// {
// dataGroupId: 'tj',
// data: [
// ['先进制造与自动化',121],
// ['现代农业',425,],
// ['材料与化工',179],
// ['资源与环境',500],
// ['电子信息',160],
// ['生物与医药',130],
// ['能源与交通',54],
// ['国内先进',1],
// ['社会公益',115],
// ['其他',108],
// ['新型材料',2],
// ['生物技术医药'],
// ['应用技术',57],
//
// ]
// }
// ];
const drilldownData = [];
function fetchDataAndProcess(groupId) {
axios.get(`http://localhost:8088/${groupId}`)
.then(function (response) {
// 将后端返回的数据转换为前端所需格式
const formattedData = response.data.map(item => [item.type, parseInt(item.number)]);
// 添加到drilldownData中
const group = {
dataGroupId: groupId,
data: formattedData
};
drilldownData.push(group);
// 如果所有数据都已加载，则进行后续处理（例如渲染ECharts图表）
if (drilldownData.length === 3) {
console.log(drilldownData);
// 这里可以使用drilldownData来初始化或更新你的ECharts图表
// ...
}
})
.catch(function (error) {
console.error(`Error fetching data for group ${groupId}:`, error);
});
}
// 分别获取并处理bj、hb、tj三类数据
fetchDataAndProcess('bj');
fetchDataAndProcess('hb');
fetchDataAndProcess('tj');
myChart.on('click', function (event) {
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
xAxis: {
data: subData.data.map(function (item) {
return item[0];
})
},
series: {
type: 'bar',
id: 'sales',
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return item[1];
}),
universalTransition: {
enabled: true,
divideShape: 'clone'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
// 对于原始数据（省份），params.data 应该是一个对象，例如 { value: 5, groupId: 'bj' }
if (params.componentType === 'series' && params.seriesType === 'bar') {
return params.name + ': ' + params.value;
}
// 对于下钻数据（具体项目），params.data 应该是一个数组，例如 ['应用技术', 89]
else if (params.componentType === 'series' && params.data) {
return params.data[0] + ': ' + params.data[1];
}
// 如果都不符合，则返回空字符串防止错误提示
return '';
}
},
graphic: [
{
type: 'text',
left: 50,
top: 20,
style: {
text: 'Back',
fontSize: 18
},
onclick: function () {
myChart.setOption(option);
}
}
]
});
}
});
option && myChart.setOption(option);
</script>
</body>
</html>
思路：首先准备一个空的集合，集合里预留两个关键字dataGroupId和data，id字段用于点击事件下钻到下一级，data存放后续后端的数据。
定义一个函数格局id调用获取后端的数据，如果前后端数据格式不一样可以使用response.data.map(item => [item.‘’, parseInt(item.number)]);转换一下.
