1.29 财务分析模块完善

components/cwfx-view/cwfx-view.vue

@@ -1,23 +1,21 @@
 <template>
 	<view>
 		<view style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
-			<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
+			<view class="flex" style="padding: 20rpx;">
 				<image src="/pagesStock/static/icon/cwfx-1.png" mode="widthFix"
 					style="width: 40rpx; height: 40rpx;"></image>
 				<view class="flex1" style="margin: 0 10rpx; font-size: 28rpx;">盈利能力</view>
 				<image src="/static/icon/home/conceptCenter/next.png" mode="widthFix"
 					style="width: 13rpx; height: 22rpx;"></image>
 			</view>
-			<view style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
-				<view
-					style="display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20rpx; color: #999999; border: 1rpx solid #D2D2D2; padding: 3rpx 5rpx; box-sizing: border-box;"
-					:style="{color: index == 0 ? '#BB8520' : '#999999', border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`,  'background-color': (index == 0 ? '#FFFAF1' : '#FFFFFF')}"
-					v-for="(item,index) in ['净资产收益率(ROE)%', '净资产收益率(扣非)%', '净资产收益率(加权)%', '总资产报酬率(ROA)%', '毛利率%', '净利率%', '营业利润率%', '成本费用利润率%']"
-					:key="index">
-					{{item}}
+			<view class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
+				<view :class="'item flex '+(profitabilityIndicatorIndex==index?'select':'')"
+					style="justify-content: center; text-align: center;padding: 3rpx 5rpx;"
+					v-for="(item,index) in profitabilityIndicatorList" :key="index" @click="clickProfitabilityIndicatorItem(index)">
+					{{item.title}}
 				</view>
 			</view>
-			<view class="flex" style="padding: 20rpx; box-sizing: border-box;">
+			<view class="flex" style="padding: 20rpx;">
 				<view class="flex1" style="font-size: 28rpx;">查看详细数据</view>
 				<view
 					style="color: #F2C369; font-size: 22rpx; padding: 2rpx 10rpx; border-radius: 5rpx; border: 1rpx solid #F2C369; text-align: center; margin: 0 10rpx;">
@@ -35,9 +33,7 @@
 			<view style="height: 500rpx;">
 				<l-echart ref="chartRef1"></l-echart>
 			</view>
-	
 		</view>
-	
 		<view style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
 			<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
 				<image src="/pagesStock/static/icon/cwfx-2.png" mode="widthFix"
@@ -47,13 +43,10 @@
 					style="width: 13rpx; height: 22rpx;"></image>
 			</view>
 	
-			<view style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
-				<view
-					style="display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20rpx; color: #999999; border: 1rpx solid #D2D2D2; padding: 3rpx 5rpx; box-sizing: border-box;"
-					:style="{color: index == 0 ? '#BB8520' : '#999999', border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`,  'background-color': (index == 0 ? '#FFFAF1' : '#FFFFFF')}"
-					v-for="(item,index) in ['每股收益(EPS)', '基本每股收益', '稀释每股收益', '扣非每股收益', '每股净资产', '每股经营现金流', '每股资本公积', '每股未分配利润']"
-					:key="index">
-					{{item}}
+			<view class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
+				<view :class="'item flexCenter '+(perShareIndicatorIndex==index?'select':'')"
+					v-for="(item,index) in perShareIndicatorList" :key="index" @click="clickPerShareIndicatorItem(index)">
+					{{item.title}}
 				</view>
 			</view>
 	
@@ -80,10 +73,61 @@
 </template>
 
 <script>
+	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
 	export default {
 		name:"cwfx-view",
 		data() {
 			return {
+				profitabilityIndicatorList:[{
+					title:'净资产收益率(ROE)%',
+				},
+				{
+					title:'净资产收益率(扣非)%',
+				},
+				{
+					title:'净资产收益率(加权)%', 
+				},
+				{
+					title:'总资产报酬率(ROA)%',
+				},
+				{
+					title:'毛利率%',
+				},
+				{
+					title:'净利率%',
+				},
+				{
+					title:'营业利润率%',
+				},
+				{
+					title:'成本费用利润率%'
+				}],
+				profitabilityIndicatorIndex:0,
+				perShareIndicatorList:[{
+					title:'每股收益(EPS)',
+				},
+				{
+					title:'基本每股收益',
+				},
+				{
+					title:'稀释每股收益', 
+				},
+				{
+					title:'扣非每股收益',
+				},
+				{
+					title:'每股净资产',
+				},
+				{
+					title:'每股经营现金流',
+				},
+				{
+					title:'每股资本公积',
+				},
+				{
+					title:'每股未分配利润'
+				}],
+				perShareIndicatorIndex:0,
 				option1:{
 					legend:{
 						show:true,
@@ -99,41 +143,96 @@
 					    type: 'category',
 					    data: [],
 						axisLabel:{
-							// interval:0
+							fontSize:10,
+							rotate:45
 						}
 					},
 					yAxis: [{
-							type: 'value',
-							name:'(%)',
-							position:'left',
-							alignTicks:true,
-							axisLine:{
-								onZero:false
-							}
-						},
-						{
-							type: 'value',
-							name:'(%)',
-							position:'right',
-							alignTicks:true,
-							axisLine:{
-							  onZero:false
-							}
+						type: 'value',
+						name:'(%)',
+						position:'left',
+						alignTicks:true,
+						axisLine:{
+							onZero:false
 						}
-					],
+					},
+					{
+						type: 'value',
+						name:'(%)',
+						position:'right',
+						alignTicks:true,
+						axisLine:{
+						  onZero:false
+						}
+					}],
 					dataZoom:[{
 						type:'slider'
 					}],
 					series: [
 					    {
 					      type: 'bar',
-						  name:'营业收入',
+						  name:'ROE',
 					      data: [],
 						  yAxisIndex:0
 					    },
 						{
 						  type: 'line',
-						  name:'净利润',
+						  name:'同比',
+						  data: [],
+						  yAxisIndex:1
+						}
+					]
+				},
+				option2:{
+					legend:{
+						show:true,
+						data:['ROE','同比(右)']
+					},
+					grid:{
+						left:'2%',
+						right:'2%',
+						top:'5%',
+						bottom:'30%'
+					},
+					xAxis: {
+					    type: 'category',
+					    data: [],
+						axisLabel:{
+							rotate:45,
+							fontSize:10
+						}
+					},
+					yAxis: [{
+						type: 'value',
+						name:'(%)',
+						position:'left',
+						alignTicks:true,
+						axisLine:{
+							onZero:false
+						}
+					},
+					{
+						type: 'value',
+						name:'(%)',
+						position:'right',
+						alignTicks:true,
+						axisLine:{
+						  onZero:false
+						}
+					}],
+					dataZoom:[{
+						type:'slider'
+					}],
+					series: [
+					    {
+					      type: 'bar',
+						  name:'ROE',
+					      data: [],
+						  yAxisIndex:0
+					    },
+						{
+						  type: 'line',
+						  name:'同比',
 						  data: [],
 						  yAxisIndex:1
 						}
@@ -142,20 +241,247 @@
 			};
 		},
 		props: {
-			barCategoryList1:Array,
-			barList1:Array,
-			lineList:Array,		//折线图数据
-			barCategoryList1:Array,
-			barList1:Array,
+			dataList:Array,
+		},
+		watch:{
+			dataList(newValue) {
+				let category = []
+				let data1 = []
+				let data2 = []
+				for (let item of newValue) {
+					var type = item.report_type
+					type = type.replace('年三季报','Q3')
+					type = type.replace('年一季报','Q1')
+					type = type.replace('年中报','中报')
+					type = type.replace('年年报','年报')
+					category.push(type)
+					if(item.profitability.roe)
+					{
+						data1.push(item.profitability.roe.toFixed(2))
+					}else 
+						data1.push(0)
+					if(item.per_share_metrics.eps)
+					{
+						data2.push(item.per_share_metrics.eps.toFixed(2))
+					}else 
+						data2.push(0)
+				}
+				this.option1.xAxis.data = category
+				this.option1.series[0].data = data1
+				this.profitabilityInit()
+				this.option2.series[0].data = data2
+				this.perShareInit()
+			}
 		},
 		methods:{
-			clickProfitabilityIndicators(item) {
-				
+			async profitabilityInit() {
+				// chart 图表实例不能存在data里
+				const chart = await this.$refs.chartRef1.init(echarts);
+				// chart.on('click',function (params) {
+				// 	console.log(params)
+				// })
+				chart.setOption(this.option1)
+			},
+			async perShareInit() {
+				// chart 图表实例不能存在data里
+				const chart = await this.$refs.chartRef2.init(echarts);
+				// chart.on('click',function (params) {
+				// 	console.log(params)
+				// })
+				chart.setOption(this.option2)
+			},
+			/**
+			 * 切换盈利能力指标
+			 * @param {Object} item
+			 */
+			clickProfitabilityIndicatorItem(index) {
+				if(this.profitabilityIndicatorIndex!=index) {
+					this.profitabilityIndicatorIndex = index
+					let data = []
+					if(index==0) {
+						//净资产收益率
+						for (let item of this.dataList) {
+							if(item.profitability.roe)
+							{
+								data.push(item.profitability.roe.toFixed(2))
+							}else 
+								data.push(0)
+						}
+						
+					}else if(index==1) {
+						//净资产收益率(扣非)
+						for (let item of this.dataList) {
+							if(item.profitability.roe_deducted)
+							{
+								data.push(item.profitability.roe_deducted.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==2) {
+						//净资产收益率(加权)
+						for (let item of this.dataList) {
+							if(item.profitability.roe_deducted)
+							{
+								data.push(item.profitability.roe_deducted.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==3) {
+						//总资产报酬率
+						for (let item of this.dataList) {
+							if(item.profitability.roa)
+							{
+								data.push(item.profitability.roa.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==4) {
+						//毛利率
+						for (let item of this.dataList) {
+							if(item.profitability.gross_margin)
+							{
+								data.push(item.profitability.gross_margin.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==5) {
+						//净利率
+						for (let item of this.dataList) {
+							if(item.profitability.net_profit_margin)
+							{
+								data.push(item.profitability.net_profit_margin.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==6) {
+						//营业利润率
+						for (let item of this.dataList) {
+							if(item.profitability.operating_profit_margin)
+							{
+								data.push(item.profitability.operating_profit_margin.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==7) {
+						//成本费用利润率
+						for (let item of this.dataList) {
+							if(item.profitability.cost_profit_ratio)
+							{
+								data.push(item.profitability.cost_profit_ratio.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}
+					this.option1.series[0].data = data
+					this.profitabilityInit()
+				}
+			},
+			/**
+			 * 切换每股指标
+			 * @param {Object} item
+			 */
+			clickPerShareIndicatorItem(index) {
+				if(this.perShareIndicatorIndex!=index) {
+					this.perShareIndicatorIndex = index
+					let data = []
+					if(index==0) {
+						//每股收益(EPS)
+						for (let item of this.dataList) {
+							if(item.per_share_metrics.eps)
+							{
+								data.push(item.per_share_metrics.eps.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==1) {
+						//基本每股收益
+						for (let item of this.dataList) {
+							if(item.per_share_metrics.basic_eps)
+							{
+								data.push(item.per_share_metrics.basic_eps.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==2) {
+						//稀释每股收益
+						for (let item of this.dataList) {
+							if(item.per_share_metrics.diluted_eps)
+							{
+								data.push(item.per_share_metrics.diluted_eps.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==3) {
+						//扣非每股收益
+						for (let item of this.dataList) {
+							if(item.per_share_metrics.deducted_eps)
+							{
+								data.push(item.per_share_metrics.deducted_eps.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==4) {
+						//每股净资产
+						for (let item of this.dataList) {
+							if(item.per_share_metrics.bvps)
+							{
+								data.push(item.per_share_metrics.bvps.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==5) {
+						//每股经营现金流
+						for (let item of this.dataList) {
+							if(item.per_share_metrics.operating_cash_flow_ps)
+							{
+								data.push(item.per_share_metrics.operating_cash_flow_ps.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==6) {
+						//每股资本公积
+						for (let item of this.dataList) {
+							if(item.per_share_metrics.capital_reserve_ps)
+							{
+								data.push(item.per_share_metrics.capital_reserve_ps.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}else if(index==7) {
+						//每股未分配利润
+						for (let item of this.dataList) {
+							if(item.per_share_metrics.undistributed_profit_ps)
+							{
+								data.push(item.per_share_metrics.undistributed_profit_ps.toFixed(2))
+							}else 
+								data.push(0)
+						}
+					}
+					this.option2.series[0].data = data
+					this.perShareInit()
+				}
 			}
 		}
 	}
 </script>
 
-<style>
-
+<style lang="less">
+.indicatorC 
+{
+	.item 
+	{
+		background-color: #FFFFFF;
+		padding: 3rpx 5rpx;
+		border: 1rpx solid #D2D2D2;
+		font-size: 20rpx;
+		color: #999;
+		text-align: center;
+	}
+	.item.select 
+	{
+		background-color: #FFFAF1;
+		border: 1rpx solid #F2C369;
+		color: #BB8520;
+	}
+}
 </style>

components/zlfx-view/zlfx-view.vue

@@ -169,7 +169,6 @@
 		watch:{
 			data(newValue)
 			{
-				console.log(newValue)
 				this.option.series[0].data = newValue
 				this.init()
 			}

components/zysj-view/zysj-view.vue

@@ -96,7 +96,6 @@
 
 <script>
 	import { getChgRateStr, getNumStr } from '@/utils/util.js';
-
 	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
 	
 	export default {