2024大数据职业技能竞赛（国赛）模块E，子任务九：用散点图展示省份平均消费额

最新推荐文章于 2024-10-09 15:55:17 发布

xfcloud

最新推荐文章于 2024-10-09 15:55:17 发布

阅读量188

点赞数 8

文章标签：大数据 javascript 前端

本文链接：https://blog.csdn.net/weixin_62687791/article/details/140596254

版权

2024大数据职业技能竞赛（国赛）模块E数据展现题解

编写Vue工程代码，根据接口，用基础散点图展示2020年最高10个省份平均消费额（四舍五入保留两位小数），同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

成果展示：

代码展示：

<template>
  <div><H2>子任务九：用散点图展示省份平均消费额</H2></div>
  <div id="main"></div>
</template>
<script>
import * as echarts from '../assets/echarts.min'
import axios from 'axios'
export default {
  mounted() {
    var myChart = echarts.init(document.getElementById('main'));
    axios.post('/api/selectOrderInfo',{
      "startTime":"2020-01-01T00:00:00+0800",
      "endTime":"2020-12-31T23:59:59+0800"
    }).then(res => {
      var data = res.data.data;
      var provinceData = data.reduce((acc,item) => {
        var provinceName = item.provinceName;
        var finalTotalAmount = item.finalTotalAmount;
        if (acc[provinceName]) {
          acc[provinceName].totalAmount += finalTotalAmount;
          acc[provinceName].orderCount ++;
        } else {
          acc[provinceName] = {
            totalAmount: finalTotalAmount,
            orderCount: 1
          };
        }
        return acc;
      },{});

      var provinceAvg = Object.keys(provinceData).map(province => ({
        province,
        avgAmount: (provinceData[province].totalAmount / provinceData[province].orderCount).toFixed(2)
      }));

      var top10Provinces = provinceAvg
          .sort((a,b) => b.avgAmount - a.avgAmount)
          .slice(0,10);

      var provinces = top10Provinces.map(item => item.province);
      var avgAmounts = top10Provinces.map(item => parseFloat(item.avgAmount));

      console.log(provinces);
      console.log(avgAmounts);

      var option = {
        title:{
          text:'2020年最高10个省份平均消费额',
          left:'center'
        },
        xAxis:{
          type:'category',
          name:'省份',
          data:provinces
        },
        yAxis:{
          type: 'value',
          name: '平均消费额'
        },
        series:[{
          type:'scatter',
          data:avgAmounts,
          symbolSize:10
        }]
      };
      myChart.setOption(option)
    })
  }
}
</script>