首页 前端知识 2023年全国职业院校技能大赛-大数据应用开发-数据可视化

2023年全国职业院校技能大赛-大数据应用开发-数据可视化

2024-01-24 15:01:24 前端知识 前端哥 435 777 我要收藏

        可视化题目与以往相同,做法类似,我这里展示得到语句后处理优化以后的代码,以函数式来写可视化,比以前400-500多行代码简洁到100多行。其他题目见本栏目,那里面的代码都是没有优化后的,这次主要以效率和精简给大家提供更多的思路。

        我们得到的接口数据类似这种 :

25e8024aad5e4e0880d3a8789a513bad.png

子任务一:用柱状图展示消费额最高的省份

        编写Vue工程代码,根据接口,用柱状图展示2020年消费额最高的5个省份,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴

cf37cbfacd1445ffb62e76f1fbb85c86.png

6dbfc0a8171640f782aeaf0b98f604bd.png

<template>
  <div id="main" style="width: 1000px; height: 400px"></div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";

export default {
  mounted() {
    let url = "http://localhost:5000/first";
    axios.get(url).then((res) => {
      let datas = res.data.data;

      //取出所有省份的消费额度
      let xfe = function (array, name, value) {
        let a = [];
        let zhi = false;
        for (let i in array) {
          for (let j in a) {
            if (array[i][name] == a[j].name) {
              a[j].value += array[i][value];
              a[j].count += 1;
              zhi = true;
              break;
            } else {
              zhi = false;
            }
          }
          if (!zhi) {
            a.push({
              name: array[i][name],
              value: array[i][value],
              count: 1,
              // name:array[i][name],value:value
            });
          }
        }
        return a;
      };

      //分割
      let qwg = function (array, num) {
        let a = [];
        for (let i = 0; i < num; i++) {
          a.push(array[i]);
        }
        return a;
      };

      //取值
      let data = function (array, value, bool) {
        let a = [];
        if (bool) {
          for (let i in array) {
            a.push((array[i][value] / array[i].count).toFixed(2));
          }
        }else{
          for (let i in array) {
            a.push(array[i][value]);
          }
        }

        return a;
      };


      //定义第一个图的数据
      let sf = xfe(datas,'provinceName','finalTotalAmount')
      //排序
      sf.sort((a,b)=>{
        return b.value - a.value
      })
      //取5个最高的省份
      sf = qwg(sf,5)
      console.log(sf);

      let options1 = {
        title:{
          text:'柱状图展示2020年消费额最高的5个省份'
        },
        xAxis:{
          name:'省份',
          data:data(sf,'name')
        },
        yAxis:{
          name:'消费额'
        },
        series:{
          type:'bar',
          data:data(sf,'value')
        }
      }

      let myChats = echarts.init(document.getElementById("main"));
      myChats.setOption(options1)

  },
};

子任务二:用饼状图展示各地区消费能力

        编写Vue工程代码,根据接口,用饼状图展示2020年各地区的消费总额占比,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴

3cb3c654e20e4fa1ab1dce0c33e85fd3.png 

b5f796aeaf344821b463a482e5e39399.png 

      //各地区
      let dq = xfe(datas,'regionName','finalTotalAmount')
      console.log(dq);

      let options2 = {
        title:{
          text:'饼状图展示2020年各地区的消费总额占比'
        },
        series:{
          type:'pie',
          data:dq,
        }
      }

      myChats.setOption(options2)

子任务三:用折线图展示每年上架商品数量的变化

编写Vue工程代码,根据接口,用折线图展示每年上架商品数量的变化情况,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴

8c825e0ee0274b5aa97b63359c464fd8.png 

670a217708ce4e0db7e9399c1002179d.png 

      //每年上架商品数量的变化情况

      let spbhua = xfe(datas,'year',1)
      //这里用到的接口数据不一样,所以我把value设置为1,在xfe里面有一个注释的
        // name:array[i][name],value:value就是这里的用途。

      console.log(spbhua);

      let options3 = {
        title:{
          text:"折线图展示每年上架商品数量的变化情况"
        },
        xAxis:{
          name:'年份',
          data:data(spbhua,'name')
        },
        yAxis:{},
        series:{
          type:'line',
          data:data(spbhua,'value')
        }
      }

      myChats.setOption(options3)

 

子任务四:用条形图展示消费额最高的地区

编写Vue工程代码,根据接口,用条形图展示2020年消费额最高的5个地区,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴51727485b0914a90b606658ad490107f.png 

5f92462227ec498b806f89911ec36aa1.png 

      //条形图展示2020年消费额最高的5个地区

      let zgdq = xfe(datas,'regionName','finalTotalAmount')
      zgdq.sort((a,b)=>{
        return b.value - a.value
      })
      zgdq = qwg(zgdq,5)
      console.log(zgdq);

      let options4 = {
        title:{
          text:'条形图展示2020年消费额最高的5个地区'
        },
        xAxis:{
          name:'消费额'
        },
        yAxis:{
          name:'地区',
          data:data(zgdq,'name')
        },
        series:{
          type:'bar',
          data:data(zgdq,'value')
        }
      }

      myChats.setOption(options4)

子任务五:用散点图展示省份平均消费额

编写Vue工程代码,根据接口,用基础散点图展示2020年最高10个省份平均消费额(四舍五入保留两位小数),同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴2cb5b7117cb64ff68b427ea0af4456f5.png 

c2f19c186e304013ad94610dc1e5d6d9.png 

//散点图展示2020年最高10个省份平均消费额
      let sdt = xfe(datas, "provinceName", "finalTotalAmount");
      sdt.sort((a, b) => {
        return b.value - a.value;
      });
      sdt = qwg(sdt, 10);
      console.log(data(sdt, "name", false));
      console.log(data(sdt, "value", true));

      let options5 = {
        title: {
          text: "散点图展示2020年最高10个省份平均消费额",
        },
        xAxis: {
          name: "省份",
          data: data(sdt, "name", false),
        },
        yAxis: {
          name: "平均消费额",
        },
        series: {
          type: "scatter",
          data: data(sdt, "value", true),
        },
      };

      myChats.setOption(options5)

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/226.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!