【金融数据分析】计算沪深300指数行业权重分布并用饼图展示

前言

前面的文章我们已经介绍了如何获取沪深300成分股所述行业以及权重的数据，想要了解这部分内容的小伙伴可以阅读上一篇文章

springboot+jdbcTemplate+sqlite编程示例——以沪深300成分股数据处理为例-CSDN博客

那么有了上文获取的数据，我们实际上可以计算一下沪深300按照行业分布的权重占比数据，最后的成果如下所示

 是不是效果还挺酷的，下面就来介绍一下技术细节。

后端技术细节

首先来讲一下后端的技术细节，其实后端需要做的就是从表中获取按行业区分的权重数据，我们先来看一下数据表

数据表中包含了所述行业和权重占比，那么思路就很明确了，我们只需要查出所有的行业，然后按照行业统计权重之和就行了。

我们的实体类非常简单，就是所属行业和对应的权重

@Data
@AllArgsConstructor
@NoArgsConstructor
public class CSI300DistVO {

    private String industry;
    private Double weight;

}

接着就是使用JdbcTemplate将数据查出来

    public List<CSI300DistVO> queryDist() {
        // 首先查询所有的行业
        String sql = "SELECT DISTINCT industry FROM "+ tableName;
        List<String> industrys = jdbcTemplate.queryForList(sql, String.class);
        // 查询每个行业的权重和
        List<CSI300DistVO> csi300DistVOList = new ArrayList<>();
        for(int i=0; i<industrys.size(); i++) {
            sql = "SELECT SUM(weight) FROM " + tableName +
                    " WHERE industry=?";
            Object[] params = new Object[] {
                industrys.get(i),
            };
            Double weight = jdbcTemplate.queryForObject(sql, params,Double.class);
            // 保留四位小数
            String tmp = String.format("%.4f", weight);
            weight = Double.parseDouble(tmp);
            CSI300DistVO entity = new CSI300DistVO(industrys.get(i), weight);
            csi300DistVOList.add(entity);
            log.info(entity.toString());
        }
        return csi300DistVOList;
    }

 然后通过get请求提供查询服务

    @RequestMapping("/queryDist")
    @ResponseBody
    public String queryDist() {
        List<CSI300DistVO> csi300DistVOS = sqlIteCSI300Dao.queryDist();
        return JSON.toJSONString(csi300DistVOS);
    }

最后获取的数据如下

[{
	"industry": "金融业",
	"weight": 21.714
}, {
	"industry": "房地产业",
	"weight": 1.342
}, {
	"industry": "制造业",
	"weight": 55.217
}, {
	"industry": "批发和零售业",
	"weight": 0.324
}, {
	"industry": "采矿业",
	"weight": 4.333
}, {
	"industry": "电力、热力、燃气及水的生产和供应业",
	"weight": 3.193
}, {
	"industry": "租赁和商务服务业",
	"weight": 0.889
}, {
	"industry": "交通运输、仓储和邮政业",
	"weight": 3.242
}, {
	"industry": "信息传输、软件和信息技术服务业",
	"weight": 4.308
}, {
	"industry": "农、林、牧、渔业",
	"weight": 1.206
}, {
	"industry": "卫生和社会工作业",
	"weight": 0.569
}, {
	"industry": "科学研究和技术服务业",
	"weight": 1.346
}, {
	"industry": "文化、体育和娱乐业",
	"weight": 0.112
}, {
	"industry": "建筑业",
	"weight": 2.109
}, {
	"industry": "住宿和餐饮业",
	"weight": 0.09
}]

后端的逻辑非常简单，下面来介绍一下前端的技术细节。 

前端技术细节

前端我们采用的技术栈是vue+elemenet-plus+axios+echarts，思路大概就是都使用axios请求后端的数据，等到数据获取到了然后再将echarts图标绘制到页面上。

这里面主要是echart饼图的绘制，这里面我研究了好久，参数还挺多的，我会着重介绍一下。

我们之前说过，整个过程就是首先使用axios通过get请求获取后端数据，然后再进行图标的渲染，我们知道axios的请求是异步的，我们需要首先请求数据，等到数据请求成功后再进行图表的绘制。

下面我将绘制饼状图的代码都贴出来

    // 绘制饼状图
    create_pie() {
      var url = "http://localhost:9001/queryDist";
      axios
        .get(url)
        .then((response) => {
          console.log(response);
          for (var i = 0; i < response.data.length; i++) {
            this.pie_data.push({
              value: response.data[i].weight,
              name: response.data[i].industry,
            });
          }
          console.log(this.pie_data);
          var myChart = this.echarts.init(this.$refs["myChart"]);
          var option = {
            title: {
              text: "沪深300行业权重分布", //标题
            },
            tooltip: {},
            legend: {
              y: 50,
              textStyle: {
                fontSize: 14,
              },
            },
            label: {
              show: true,
            },
            series: [
              {
                name: "分布", //数据的名字
                type: "pie", //表示柱状图
                radius: "70%", //圆的半径
                center: ["50%", "60%"],
                label: {
                  formatter: function (params) {
                    console.log(params.name + " " + params.value + "%");
                    return params.name + " " + params.value + "%";
                  },
                  textStyle: {
                    fontSize: 14,
                    fontWeight: "bolder",
                  },
                  color: "inherit",
                },
                data: this.pie_data,
                selectedMode: "single", //选中效果，使选中区域偏离圆心一小段距离，single或者multiple
                selectedOffset: 10, //偏离圆心的一小段距离
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
        .catch((error) => {
          console.log(error);
        });
    },

我们介绍一些比较重要的参数，绘制的时候比较重要的参数都在series中

series中对应的参数如下： 

  • name：名称
  • type：图标的类型，当设置成"pie"的时候表示饼状图
  • radues：表示饼状图半径的大小
  • center：表示圆心在画面中的位置，横着的是x轴，竖着的是y轴，我这样设置就会让饼状图中屏幕中间偏下的位置，方便上方标签的显示
  • label：表示饼状图中标签的文字显示
    • formatter表示我们要显示标签的格式，我们可以自定义要显示的内容
    • textStyle可以设置文字的大小和样式
    • color可以设置文字的颜色，"inherit"表示颜色跟随对应的扇形的颜色
  • data：我们要展示的数据
  • selectedMode：表示选中的效果
  • selectedOffset：扇形被选中的时候放大的幅度

我们目前只是用了这些属性，当然echart还有非常多的属性可以设置，感兴趣的可以自行探索。

下面是这个页面的完整代码

<template>
  <div>
    <el-row class="container">
      <div class="left-grid">
        <el-card>
          <el-table
            :data="table_data"
            :show-header="true"
            :max-height="615"
            stripe
          >
            <el-table-column
              prop="id"
              label="序号"
              width="65%"
            ></el-table-column>
            <el-table-column prop="code" label="股票代码"></el-table-column>
            <el-table-column prop="name" label="公司简称"></el-table-column>
            <el-table-column prop="industry" label="所属行业"></el-table-column>
            <el-table-column prop="weight" label="权重占比"></el-table-column>
          </el-table>
        </el-card>
      </div>

      <div class="right-grid" ref="myChart"></div>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import { getCurrentInstance } from "vue";
export default {
  data() {
    return {
      table_data: [],
      pie_data: [],
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var url = "http://localhost:9001/queryAll";
      axios
        .get(url)
        .then((response) => {
          this.table_data = response.data;
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
      this.create_pie();
    },
    // 绘制饼状图
    create_pie() {
      var url = "http://localhost:9001/queryDist";
      axios
        .get(url)
        .then((response) => {
          console.log(response);
          for (var i = 0; i < response.data.length; i++) {
            this.pie_data.push({
              value: response.data[i].weight,
              name: response.data[i].industry,
            });
          }
          console.log(this.pie_data);
          var myChart = this.echarts.init(this.$refs["myChart"]);
          var option = {
            title: {
              text: "沪深300行业权重分布", //标题
            },
            tooltip: {},
            legend: {
              y: 50,
              textStyle: {
                fontSize: 14,
              },
            },
            label: {
              show: true,
            },
            series: [
              {
                name: "分布", //数据的名字
                type: "pie", //表示柱状图
                radius: "70%", //圆的半径
                center: ["50%", "60%"],
                label: {
                  formatter: function (params) {
                    console.log(params.name + " " + params.value + "%");
                    return params.name + " " + params.value + "%";
                  },
                  textStyle: {
                    fontSize: 14,
                    fontWeight: "bolder",
                  },
                  color: "inherit",
                },
                data: this.pie_data,
                selectedMode: "single", //选中效果，使选中区域偏离圆心一小段距离，single或者multiple
                selectedOffset: 10, //偏离圆心的一小段距离
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 35% 65%;
  width: 100%;
  height: 80vh;
}
.left-grid {
  background-color: #f0f0f0;
  border-radius: 2%;
  padding: 10px;
  height: 95%;
}
.right-grid {
  background-color: #f9ecc3;
  border-radius: 2%;
  padding: 10px;
  height: 95%;
}
</style>

最后再放一张显示的效果

数据分析

这部分我们进行一下简单的数据分析。

从数据中可以看出来，目前沪深300指数中制造业占比最高，高达55.217%；金融业第二，占比21.714%；排名第三的是采矿业，占比4.333%；排名第四的是信息技术服务业，占比4.308%；排名第五的是物流行业，占比3.242%；排名第六的是电力等基础设施行业，占比3.193%，剩下的一些行业占比就比较低了。

从这组数据中我们可以看出来，我们国家的经济发展还是以制造业为主，金融业为辅的模式，至少沪深300指数构成来看是这样的。

好了，本文就到这里了，有什么想说的欢迎留言和我交流。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/233604.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

FL Studio20版本水果软件永久免费激活码

FL Studio20版本水果软件永久免费激活码

FL Studio21水果编曲软件汉化版是一款专业的音乐制作软件&#xff0c;被广泛地应用于电子音乐、hip-hop、流行乐等多种音乐类型的制作。该软件提供了丰富的音频编曲工具和音乐效果器&#xff0c;让用户可以轻松地创作出高品质的音乐作品。同时&#xff0c;这也是一款非常易于上…
阅读更多...
CMake是什么

CMake是什么

文章目录 一.什么是CMake二.CMake安装三.CMake一个HelloWord-的语法介绍3.1 PROJECT关键字3.2 SET关键字3.3 MESSAGE关键字3.4 ADD_EXECUTABLE关键字3.5 include_directories关键字3.6 aux_source_directory 四.语法的基本原则4.1 语法注意事项 五.内部构建和外部构建5.1 外部构…
阅读更多...
C++『异常』

C++『异常』

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; C修行之路 &#x1f383;操作环境&#xff1a; Visual Studio 2022 版本 17.6.5 文章目录 &#x1f307;前言&#x1f3d9;️正文1.异常基本概念1.1.C语言异常处理方式1.2.C异常处理方式 2.异常的使用2.1.异常…
阅读更多...
2023济南大学acm新生赛题解

2023济南大学acm新生赛题解

通过答题情况的难度系数&#xff1a; 签到&#xff1a;ACI 铜牌题&#xff1a;BG 银牌题&#xff1a;EF 金牌题&#xff1a;DHJKO 赛中暂未有人通过&#xff1a;LMNP A - AB Problem 直接根据公式计算就行。 #include<stdio.h> int main(){int a,b;scanf("%…
阅读更多...
综合练习（OSPF+BGP+ISIS+单臂路由）

综合练习（OSPF+BGP+ISIS+单臂路由）

一、知识补充 1、链路聚合 为了满足不同服务器之间的数据交互&#xff0c;交换机之间必须具有更高的带宽&#xff0c;同时需要具备链路的冗余备份&#xff1b; 通常可以增加核心交换机之间的物理链路数量&#xff0c;以提高核心交换机之间的链路带宽&#xff1b;在启用STP的…
阅读更多...
Flutter视频播放器在iOS端和Android端都能实现全屏播放

Flutter视频播放器在iOS端和Android端都能实现全屏播放

Flutter开发过程中&#xff0c;对于视频播放的三方组件有很多&#xff0c;在Android端适配都挺好&#xff0c;但是在适配iPhone手机的时候&#xff0c;如果设置了UIInterfaceOrientationLandscapeLeft和UIInterfaceOrientationLandscapeRight都为false的情况下&#xff0c;无法…
阅读更多...
怎么用vue创建一个项目，并使用Element组件

怎么用vue创建一个项目，并使用Element组件

要使用element组件的话要先安装一个node&#xff0c;然后再输入下面一系列指令安装vue脚手架&#xff0c;这样比较方便 然后输入vue iu指令进入可视化界面创建项目&#xff0c;创建项目的操作流程我已经做好放在下面了&#xff0c;此处省略..............N个字...............&…
阅读更多...
【USB、串口、COM口、TTL、RS-232、RS-485区别详解】

【USB、串口、COM口、TTL、RS-232、RS-485区别详解】

USB&#xff0c;串口&#xff0c;COM口&#xff0c;TTL&#xff0c;RS-232&#xff0c;RS-485区别详解 1. USB&#xff0c;串口&#xff0c;COM口&#xff0c;TTL&#xff0c;RS-232&#xff0c;RS-485区别详解2 USB转TTL2 RS-232转TTL3 USB4 UART5 STM32串口异步通讯需要定义的…
阅读更多...
Stable Diffusion 系列教程 - 2 WebUI 参数详解

Stable Diffusion 系列教程 - 2 WebUI 参数详解

Stable Diffusion 的整个算法组合为&#xff1a; UNet VAE 文本编码器 UNet&#xff1a;就是我们大模型里的核心。 文本编码器&#xff1a;将我们的prompt进行encoder为算法能理解的内容&#xff08;可以理解为SD外包出去的项目CLIP&#xff09;。 VAE&#xff1a;对UNet生…
阅读更多...
Linux权限理解

Linux权限理解

文章目录 前言概述Linux下的权限Linux权限管理文件访问者的分类&#xff1a;属性&#xff1a;文件权限值表示方法&#xff1a; 文件类型&#xff1a; 权限的修改chmod对 text.txt 文件的权限进行修改法1&#xff1a;法2&#xff1a; chownchgrpumaskfile指令目录权限粘滞位 前言…
阅读更多...
socket 套接字

socket 套接字

1、套接字介绍 socket起源于Unix&#xff0c;遵循“一切皆文件”出发点&#xff0c;都可以用“打开open –> 读写write/read –> 关闭close”模式来操作。 在设计模式中&#xff0c;Socket把复杂的TCP/IP协议族隐藏在Socket接口后面&#xff0c;Socket去组织数据&#xf…
阅读更多...
端口复用和重映射

端口复用和重映射

一、端口复用 &#xff08;1&#xff09;端口复用概念 端口复用是将一个I/O赋予多个功能&#xff0c;通过设置I/O的工作模式来切换不同的功能。 STM32有很多的内置外设&#xff0c;这些外设的外部引脚都是与GPIO复用的。也就是说&#xff0c;一个GPIO如果可以复用为内置外设的…
阅读更多...
【rabbitMQ】rabbitMQ用户，虚拟机地址(添加，修改，删除操作）

【rabbitMQ】rabbitMQ用户，虚拟机地址(添加，修改，删除操作）

rabbitMQ的下载&#xff0c;安装和配置 https://blog.csdn.net/m0_67930426/article/details/134892759?spm1001.2014.3001.5502 rabbitMQ控制台模拟收发消息 https://blog.csdn.net/m0_67930426/article/details/134904365?spm1001.2014.3001.5502 目录 用户 添加用户…
阅读更多...
simulink MATLABFunction模块中实时函数调用函数的使用

simulink MATLABFunction模块中实时函数调用函数的使用

样例 function Predyy matlabceshi(input, Time_s) input1 input; Time_s1 Time_s; Predyy ee(input1) mm(Time_s1); end 上面是主要部分&#xff0c;下面是被调用部分 function A ee(input1) A input1 * 100; end function B mm(Time_s1) B Time_s1 * 100; end 模型…
阅读更多...
jvm内存分配机制

jvm内存分配机制

内存分配机制 1.一般机制 ​ 如果对象在Eden出生并且经过第一次Minor后仍然存活,并且能被survivor容纳的话,将被移动到survivor空间中,并将对象年龄设为1 对象每熬过一次MinnorGC,年龄就增加一岁,当他的年龄增加到一定程度(默认15岁)就会被晋升到老年代 直接进入老年代的情…
阅读更多...
sap增强

sap增强

四代增强 2种显示增强1种隐式增强 隐式增强 光标放在增强点或其中的代码点击修改即可修改代码 显示增强 1.ENHANCEMENT-POINT 在代码修改界面选择空行 光标所在位置 可以创建多个增强实施且激活后都会执行. 2.ENHANCEMENT-SECTION 1,选中程序中空行 2.编辑->创建选项 …
阅读更多...
「JavaScript每日一练」系列——提高你的JS技能（第三天）

「JavaScript每日一练」系列——提高你的JS技能（第三天）

有什么不懂可以去看我前两天的笔记 https://blog.csdn.net/weixin_70007095/article/details/134905674 目录 有什么不懂可以去看我前两天的笔记 JavaScript 进阶 - 第3天笔记 编程思想 面向过程 面向对象 构造函数 原型对象 constructor 属性 对象原型 原型继承 原型链 JavaSc…
阅读更多...
肾精不足，湿浊难去！老中医教你简单1招，藏养肾精、祛寒祛湿！

肾精不足，湿浊难去！老中医教你简单1招，藏养肾精、祛寒祛湿！

前言 冬季祛湿养肾精&#xff0c;做好2件事能事半功倍 湿毒是慢病的温床 有「七十二变」的法力 如果我们善于观察大自然&#xff0c;那么就会发现&#xff0c;在阴雨天&#xff0c;尤其在南方的回南天之时&#xff0c;那些隐蔽的草丛或者腐朽的木桩之上&#xff0c;会长出很…
阅读更多...
排序算法-选择/堆排序(C语言)

排序算法-选择/堆排序(C语言)

1基本思想&#xff1a; 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的 数据元素排完 。 2 直接选择排序: 在元素集合 array[i]--array[n-1] 中选择关键码最大 ( 小 ) 的数据元素…
阅读更多...
AI：99-基于深度学习的飞机故障检测与维修

AI：99-基于深度学习的飞机故障检测与维修

🚀 本文选自专栏：人工智能领域200例教程专栏 从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的核心代码，详细讲解供大家学习，希望可以帮到大家。欢迎订阅支持，正在不断更新…
阅读更多...
最新文章

Copyright @ 2022~2023