大資料分析之資料下鑽上卷

cojames發表於2024-03-19
大資料

宣告：本次任務簡單所以沒有前後端分離去做，因此不需要非同步處理（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)]);轉換一下.

相關文章