坪地网站建设,国外免费psd网站,北京环评在那个网站上做,wordpress 输入表单前言
前面的文章我们已经介绍了如何获取沪深300成分股所述行业以及权重的数据#xff0c;想要了解这部分内容的小伙伴可以阅读上一篇文章
springbootjdbcTemplatesqlite编程示例——以沪深300成分股数据处理为例-CSDN博客
那么有了上文获取的数据#xff0c;我们实际上可以…前言
前面的文章我们已经介绍了如何获取沪深300成分股所述行业以及权重的数据想要了解这部分内容的小伙伴可以阅读上一篇文章
springbootjdbcTemplatesqlite编程示例——以沪深300成分股数据处理为例-CSDN博客
那么有了上文获取的数据我们实际上可以计算一下沪深300按照行业分布的权重占比数据最后的成果如下所示 是不是效果还挺酷的下面就来介绍一下技术细节。
后端技术细节
首先来讲一下后端的技术细节其实后端需要做的就是从表中获取按行业区分的权重数据我们先来看一下数据表 数据表中包含了所述行业和权重占比那么思路就很明确了我们只需要查出所有的行业然后按照行业统计权重之和就行了。
我们的实体类非常简单就是所属行业和对应的权重
Data
AllArgsConstructor
NoArgsConstructor
public class CSI300DistVO {private String industry;private Double weight;}
接着就是使用JdbcTemplate将数据查出来 public ListCSI300DistVO queryDist() {// 首先查询所有的行业String sql SELECT DISTINCT industry FROM tableName;ListString industrys jdbcTemplate.queryForList(sql, String.class);// 查询每个行业的权重和ListCSI300DistVO csi300DistVOList new ArrayList();for(int i0; iindustrys.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)ResponseBodypublic String queryDist() {ListCSI300DistVO 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
}]
后端的逻辑非常简单下面来介绍一下前端的技术细节。
前端技术细节
前端我们采用的技术栈是vueelemenet-plusaxiosecharts思路大概就是都使用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或者multipleselectedOffset: 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还有非常多的属性可以设置感兴趣的可以自行探索。
下面是这个页面的完整代码
templatedivel-row classcontainerdiv classleft-gridel-cardel-table:datatable_data:show-headertrue:max-height615stripeel-table-columnpropidlabel序号width65%/el-table-columnel-table-column propcode label股票代码/el-table-columnel-table-column propname label公司简称/el-table-columnel-table-column propindustry label所属行业/el-table-columnel-table-column propweight label权重占比/el-table-column/el-table/el-card/divdiv classright-grid refmyChart/div/el-row/div
/templatescript
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或者multipleselectedOffset: 10, //偏离圆心的一小段距离},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}).catch((error) {console.log(error);});},},
};
/scriptstyle 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指数构成来看是这样的。
好了本文就到这里了有什么想说的欢迎留言和我交流。
