（超详细）2024年全国职业院校技能大赛-大数据应用开发-数据可视化-子任务1，2_大数据应用开发比赛工业数据可视化(2)

最新推荐文章于 2024-05-30 23:10:41 发布

沉默的王二

最新推荐文章于 2024-05-30 23:10:41 发布

阅读量290

点赞数 7

文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2301_76379606/article/details/138958016

版权

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

// app.js

// 创建一个Vue实例
new Vue({
  el: '#app', // 将Vue实例挂载到id为'app'的元素上

  // 在Vue实例挂载后执行的方法
  mounted() {
    this.fetchDataFromLocalFile() // 调用方法fetchDataFromLocalFile()
  },

  methods: {
    // 从本地文件获取数据的方法
    fetchDataFromLocalFile() {
      fetch('./111.json') // 使用fetch函数获取本地的111.json文件的数据
      // 重要：这里使用的是本地json文件，比赛会提供接口，
      // 只需要将参数换成接口的地址即可
        .then(response => response.json()) // 将获取到的数据转换为JSON格式
        .then(data => {
          // 从数据中提取出需要的消费数据，并按照finalTotalAmount字段进行排序
          const consumptionData = data[0].data
            .sort((a, b) => a.finalTotalAmount - b.finalTotalAmount)
            .slice(0, 5)
            .map(item => ({
              province: item.provinceName, // 提取省份名称
              amount: item.finalTotalAmount // 提取消费金额
            }))

          console.log(consumptionData) // 在控制台打印处理后的消费数据

          // 使用ECharts库初始化一个图表，并设置图表的标题和x轴、y轴的数据
          const chart = echarts.init(document.getElementById('chart'))
          const option = {
            title: {
              text: '2020年消费额最低的5个省份',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: consumptionData.map(item => item.province) // 设置x轴的数据为省份名称
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                fontSize: 8 // 设置y轴标签的字号大小为8px
              }
            },
            series: [{
              data: consumptionData.map(item => item.amount), // 设置柱状图的数据为消费金额
              type: 'bar', // 设置图表类型为柱状图
              label: {
                show: true, // 显示标签
                position: 'top' // 标签显示在柱状图的顶部
              }
            }]
          }
          chart.setOption(option) // 将图表的配置应用到图表上
        })
        .catch(error => console.error(error)) // 捕捉并打印错误信息
    }
  }
})

3,附上本地html代码，如下

<!-- index.html -->
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="en"> <!-- 设置文档语言为英语 -->
<head> <!-- 文档头部 -->
  <meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度和初始缩放比例 -->
  <title>Consumption Analysis</title> <!-- 设置文档标题 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!-- 引入Vue.js库 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> <!-- 引入ECharts库 -->
  <script src="https://cdn.jsdelivr.net/npm/axios@0.21.4/dist/axios.min.js"></script> <!-- 引入Axios库 -->
</head>
<body> <!-- 文档主体 -->
  <div id="app"> <!-- 创建一个id为app的div元素 -->
    <div id="chart" style="width: 600px;height:400px;"></div> <!-- 创建一个id为chart的div元素，设置宽度和高度 -->
  </div>

  <script src="./111.js"></script> <!-- 引入111.js脚本文件 -->
</body>
</html>

4，附上本地json代码如下：

[
  {
    "msg": "操作成功",
    "code": 200,
    "data": [
      {
        "outTradeNo": "762726941436512",
        "finalTotalAmount": 784432.0,
        "provinceName": "广东",
        "regionName": "华东",
        "userName": "西门清",
        "id": 78444
      },
      {
        "outTradeNo": "122515318746846",
        "finalTotalAmount": 207260.0,
        "provinceName": "贵州",
        "regionName": "滕成",
        "userName": "滕成",
        "id": 78445
      },
      {
        "outTradeNo": "189377665987296",
        "finalTotalAmount": 240486.0,
        "provinceName": "澳门",
        "regionName": "西南",
        "userName": "尉迟莉",
        "id": 78446
      },
      {
        "outTradeNo": "727564233416679",
        "finalTotalAmount": 62997.0,
        "provinceName": "山东",
        "regionName": "华东",
        "userName": "庞茂",
        "id": 78447
      },
      {
        "outTradeNo": "712939938964818",
        "finalTotalAmount": 509385.0,
        "provinceName": "湖北",
        "regionName": "华中",
        "userName": "司马言若",
        "id": 78448
      },
      {
        "outTradeNo": "366811414371877",
        "finalTotalAmount": 40392.0,
        "provinceName": "吉林",
        "regionName": "华中",
        "userName": "卫娅琦",
        "id": 78449
      },
      {
        "outTradeNo": "625397617582265",
        "finalTotalAmount": 333611.0,
        "provinceName": "云南",
        "regionName": "东北",
        "userName": "司马真",
        "id": 78450


![img](https://img-blog.csdnimg.cn/img_convert/157d76ca24e397f714aab14aa3c7d4e2.png)
![img](https://img-blog.csdnimg.cn/img_convert/d40da94cdd42471e32f58acb4a5eca64.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**