声明：本次任务简单所以没有前后端分离去做，因此不需要异步处理（cors）
根据Python将数据合并清洗，分析之后，将得到的数据存入数据库，数据库中就是各行业的类别以及数量。
前端用java的相关知识利用echarts绘制数据下钻和上卷图
前端：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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)]);转换一下.
标签：数据分析,function,数据,上卷,item,params,dataGroupId,data,groupId From： https://www.cnblogs.com/copyjames/p/18083668