1153 lines
30 KiB
Vue
1153 lines
30 KiB
Vue
<template>
|
||
<view>
|
||
<view style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
|
||
<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 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="detailOptionC flex" style="padding: 20rpx;">
|
||
<view class="flex1" style="font-size: 28rpx;">查看详细数据</view>
|
||
<view :class="'option '+(profitabilitySingleQuarterAllIndex==0?'select':'')" @click="clickProfitabilitySingleQuarterOrAll(0)">单季度</view>
|
||
<view :class="'flex option '+(profitabilitySingleQuarterAllIndex==1?'select':'')" @click="clickProfitabilitySingleQuarterOrAll(1)">
|
||
<image v-if="profitabilitySingleQuarterAllIndex==1" class="icon" src="/pagesStock/static/icon/all-icon-ed.png"
|
||
mode="widthFix"></image>
|
||
<image v-else class="icon" src="/pagesStock/static/icon/all-icon.png"
|
||
mode="widthFix"></image>
|
||
<view style="margin: 0 10rpx; color: #999999; font-size: 22rpx;">全部</view>
|
||
<image v-if="profitabilitySingleQuarterAllIndex==1" class="arrow" src="/pagesStock/static/icon/all-down-ed.png" mode="widthFix"></image>
|
||
<image v-else class="arrow" src="/pagesStock/static/icon/all-down.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<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"
|
||
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 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>
|
||
|
||
<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
|
||
<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;">
|
||
单季度</view>
|
||
<view
|
||
style="display: flex; align-items: center; padding: 3rpx 10rpx; box-sizing: border-box; border: 1rpx solid #D2D2D2;">
|
||
<image style="width: 23rpx; height: 23rpx;" src="/pagesStock/static/icon/all-icon.png"
|
||
mode="widthFix"></image>
|
||
<view style="margin: 0 10rpx; color: #999999; font-size: 22rpx;">全部</view>
|
||
<image style="width: 11rpx; height: 6rpx;" src="/pagesStock/static/icon/all-down.png"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view style="height: 500rpx;">
|
||
<l-echart ref="chartRef2"></l-echart>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { accAdd, accDiv, accMul, accSub, getNumStr } from '@/utils/util';
|
||
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,
|
||
profitabilitySingleQuarterAllIndex:0,
|
||
perShareIndicatorList:[{
|
||
title:'每股收益(EPS)',
|
||
},
|
||
{
|
||
title:'基本每股收益',
|
||
},
|
||
{
|
||
title:'稀释每股收益',
|
||
},
|
||
{
|
||
title:'扣非每股收益',
|
||
},
|
||
{
|
||
title:'每股净资产',
|
||
},
|
||
{
|
||
title:'每股经营现金流',
|
||
},
|
||
{
|
||
title:'每股资本公积',
|
||
},
|
||
{
|
||
title:'每股未分配利润'
|
||
}],
|
||
perShareIndicatorIndex:0,
|
||
perShareSingleQuarterAllIndex:0,
|
||
option1:{
|
||
legend:{
|
||
show:true,
|
||
data:['ROE','同比(右)']
|
||
},
|
||
grid:{
|
||
left:'2%',
|
||
right:'2%',
|
||
top:'5%',
|
||
bottom:'30%'
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: [],
|
||
axisLabel:{
|
||
fontSize:10,
|
||
}
|
||
},
|
||
{
|
||
type: 'category',
|
||
data: [],
|
||
axisLine:{
|
||
show:false,
|
||
},
|
||
axisTick:{
|
||
show:false
|
||
},
|
||
axisLabel:{
|
||
show:false,
|
||
}
|
||
}],
|
||
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
|
||
}
|
||
]
|
||
},
|
||
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
|
||
}
|
||
]
|
||
},
|
||
accDiv:accDiv,
|
||
accSub:accSub,
|
||
accMul:accMul
|
||
};
|
||
},
|
||
props: {
|
||
dataList:Array,
|
||
},
|
||
watch:{
|
||
dataList(newValue) {
|
||
if(this.profitabilitySingleQuarterAllIndex==0) {
|
||
//单季度
|
||
this.getROESingleQuarterData()
|
||
} else
|
||
{
|
||
//全部
|
||
this.getROEAllData()
|
||
}
|
||
this.profitabilityInit()
|
||
// this.option2.xAxis.data = category
|
||
// this.option2.series[0].data = data2
|
||
// this.perShareInit()
|
||
}
|
||
},
|
||
methods:{
|
||
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) {
|
||
//净资产收益率
|
||
if(this.profitabilitySingleQuarterAllIndex==0) {
|
||
//单季度
|
||
this.getROESingleQuarterData()
|
||
} else
|
||
{
|
||
//全部
|
||
this.getROEAllData()
|
||
}
|
||
}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_weighted)
|
||
{
|
||
data.push(item.profitability.roe_weighted.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()
|
||
}
|
||
},
|
||
/**
|
||
* 盈利能力切换单季度还是全部
|
||
*/
|
||
clickProfitabilitySingleQuarterOrAll(index) {
|
||
if(this.profitabilitySingleQuarterAllIndex != index) {
|
||
this.profitabilitySingleQuarterAllIndex = index;
|
||
if(index==0) {
|
||
//单季度
|
||
if(this.profitabilityIndicatorIndex==0) {
|
||
//净资产收益率
|
||
this.getROESingleQuarterData()
|
||
}else if(this.profitabilityIndicatorIndex==1)
|
||
{
|
||
//净资产收益率(扣非)
|
||
this.getOwnerEquitySingleQuarterData()
|
||
}else if(this.profitabilityIndicatorIndex==2)
|
||
{
|
||
//净资产收益率(加权)
|
||
this.getOwnerEquitySingleQuarterData()
|
||
}
|
||
|
||
} else {
|
||
//全部
|
||
if(this.profitabilityIndicatorIndex==0) {
|
||
//净资产收益率
|
||
this.getROEAllData()
|
||
}else if(this.profitabilityIndicatorIndex==1)
|
||
{
|
||
//所有者权益
|
||
this.getOwnerEquityAllData()
|
||
}
|
||
}
|
||
this.profitabilityInit()
|
||
}
|
||
},
|
||
/**
|
||
* 获取净资产收益率单季度数据
|
||
*/
|
||
getROESingleQuarterData() {
|
||
let category = []
|
||
let currentYear = this.dataList[0].period.split('-')[0]
|
||
var currentYearCount = 0
|
||
for (let item of this.dataList) {
|
||
let year = item.period.split('-')[0]
|
||
if(year==currentYear) {
|
||
currentYearCount ++
|
||
}
|
||
}
|
||
let years = (16 - currentYearCount)/4
|
||
let showDataCount = years*4+currentYearCount
|
||
let showDataList = this.dataList.slice(0,showDataCount)
|
||
for (var i = 0; i <= years; i++) {
|
||
category.unshift(currentYear-i)
|
||
}
|
||
//第一季度
|
||
let data1 = []
|
||
//第二季度
|
||
let data2 = []
|
||
//第三季度
|
||
let data3 = []
|
||
//第四季度
|
||
let data4 = []
|
||
for (let item of showDataList) {
|
||
for (let item1 of category) {
|
||
let index = showDataList.indexOf(item)
|
||
let lastItem = showDataList[index+1]
|
||
if(item1+'年一季报'==item.report_type){
|
||
if(item.profitability.roe)
|
||
{
|
||
data1.unshift(item.profitability.roe.toFixed(2))
|
||
}else
|
||
data1.unshift(0)
|
||
}
|
||
if(item1+'年中报'==item.report_type){
|
||
if(item.profitability.roe)
|
||
{
|
||
data2.unshift(accSub(item.profitability.roe,lastItem.profitability.roe))
|
||
}else
|
||
data2.unshift(0)
|
||
}
|
||
if(item1+'年三季报'==item.report_type){
|
||
if(item.profitability.roe)
|
||
{
|
||
data3.unshift(accSub(item.profitability.roe,lastItem.profitability.roe))
|
||
}else
|
||
data3.unshift(0)
|
||
}
|
||
if(item1+'年年报'==item.report_type){
|
||
if(item.profitability.roe)
|
||
{
|
||
data4.unshift(accSub(item.profitability.roe,lastItem.profitability.roe))
|
||
}else
|
||
data4.unshift(0)
|
||
}
|
||
}
|
||
}
|
||
console.log(data1,data2,data3,data4)
|
||
let sumData = []
|
||
for (var i = 0; i < data1.length; i++) {
|
||
let sum = data1[i]
|
||
sum = accAdd(sum,data2[i]?data2[i]:0)
|
||
sum = accAdd(sum,data3[i]?data3[i]:0)
|
||
sum = accAdd(sum,data4[i]?data4[i]:0).toFixed(2)
|
||
if(sum>10000) {
|
||
sumData.push((sum/10000).toFixed(2)+'万')
|
||
}else
|
||
sumData.push(sum)
|
||
}
|
||
this.option1.legend.data = ['第一季度','第二季度','第三季度','第四季度']
|
||
this.option1.xAxis[0].data = category
|
||
this.option1.xAxis[1].data = category
|
||
this.option1.series = [{
|
||
type: 'bar',
|
||
name:'第一季度',
|
||
barWidth:'15%',
|
||
data: data1,
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第二季度',
|
||
barWidth:'15%',
|
||
data: data2,
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第三季度',
|
||
barWidth:'15%',
|
||
data: data3,
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第四季度',
|
||
barWidth:'15%',
|
||
data: data4,
|
||
yAxisIndex:0,
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'总值',
|
||
data: sumData,
|
||
barWidth:'70%',
|
||
xAxisIndex:1,
|
||
yAxisIndex:0,
|
||
itemStyle:{
|
||
color:'rgba(0,0,0,0.2)',
|
||
},
|
||
label:{
|
||
show:true,
|
||
position:'top'
|
||
}
|
||
}]
|
||
},
|
||
/**
|
||
* 获取净资产收益率全部数据
|
||
*/
|
||
getROEAllData() {
|
||
let showDataList = this.dataList.slice(0,8)
|
||
let category = []
|
||
let data1 = []
|
||
let data2 = []
|
||
let data3 = []
|
||
let data4 = []
|
||
for (let item of showDataList) {
|
||
let index = showDataList.indexOf(item)
|
||
if(index<showDataList.length-3)
|
||
{
|
||
let type = item.report_type
|
||
type = type.replaceAll('三季报','\n三季报')
|
||
type = type.replaceAll('年报','\n年报')
|
||
type = type.replaceAll('中报','\n中报')
|
||
type = type.replaceAll('一季报','\n一季报')
|
||
category.unshift(type)
|
||
let lastItem1 = showDataList[index+1]
|
||
let lastItem2 = showDataList[index+2]
|
||
let lastItem3 = showDataList[index+3]
|
||
if(item.report_type.indexOf('三季报')>-1)
|
||
{
|
||
if(item.profitability.roe)
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(accSub(item.profitability.roe,lastItem1.profitability.roe).toFixed(2))
|
||
data2.unshift(accDiv(accSub(lastItem1.profitability.roe,lastItem2.profitability.roe),100000000).toFixed(2))
|
||
data1.unshift(accDiv(lastItem2.profitability.roe,100000000).toFixed(2))
|
||
}else
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(0)
|
||
}
|
||
}else if(item.report_type.indexOf('中报')>-1)
|
||
{
|
||
if(item.profitability.roe)
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(accDiv(accSub(item.profitability.roe,lastItem1.profitability.roe),100000000).toFixed(2))
|
||
data1.unshift(accDiv(lastItem1.profitability.roe,100000000).toFixed(2))
|
||
}else
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(0)
|
||
}
|
||
}else if(item.report_type.indexOf('一季报')>-1)
|
||
{
|
||
if(item.profitability.roe)
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(accDiv(item.profitability.roe,100000000).toFixed(2))
|
||
}else
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(0)
|
||
}
|
||
}else if(item.report_type.indexOf('年报')>-1)
|
||
{
|
||
if(item.profitability.roe)
|
||
{
|
||
data4.unshift(accDiv(accSub(item.profitability.roe,lastItem1.profitability.roe),100000000).toFixed(2))
|
||
data3.unshift(accDiv(accSub(lastItem1.profitability.roe,lastItem2.profitability.roe),100000000).toFixed(2))
|
||
data2.unshift(accDiv(accSub(lastItem2.profitability.roe,lastItem3.profitability.roe),100000000).toFixed(2))
|
||
data1.unshift(accDiv(lastItem3.profitability.roe,100000000).toFixed(2))
|
||
}else
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(0)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
let sumData = []
|
||
for (var i = 0; i < data1.length; i++) {
|
||
let sum = data1[i]
|
||
sum = accAdd(sum,data2[i])
|
||
sum = accAdd(sum,data3[i])
|
||
sum = accAdd(sum,data4[i]).toFixed(2)
|
||
if(sum>10000) {
|
||
sumData.push((sum/10000).toFixed(2)+'万')
|
||
}else
|
||
sumData.push(sum)
|
||
}
|
||
this.option1.xAxis[0].data = category
|
||
let ratioList = []
|
||
for (let item of showDataList) {
|
||
let index = showDataList.indexOf(item)
|
||
if(index<showDataList.length-3)
|
||
{
|
||
let lastItem = this.dataList[index+4]
|
||
ratioList.unshift(accMul(accDiv(accSub(item.profitability.roe,lastItem.profitability.roe),Math.abs(lastItem.profitability.roe)),100).toFixed(2))
|
||
}
|
||
}
|
||
this.option1.tooltip = {
|
||
show:true,
|
||
confine:true,
|
||
formatter(params) {
|
||
let index = params.dataIndex
|
||
let str = params.name+':'+sumData[index]
|
||
if(data1[index]!=0)
|
||
{
|
||
str += '\n第一季度：'+data1[index]
|
||
}
|
||
if(data2[index]!=0)
|
||
{
|
||
str += '\n第二季度：'+data2[index]
|
||
}
|
||
if(data3[index]!=0)
|
||
{
|
||
str += '\n第三季度：'+data3[index]
|
||
}
|
||
if(data4[index]!=0)
|
||
{
|
||
str += '\n第四季度：'+data4[index]
|
||
}
|
||
str += '\n同比(右)'+ratioList[index]
|
||
return str
|
||
}
|
||
}
|
||
this.option1.series = [{
|
||
type: 'bar',
|
||
name:'第一季度',
|
||
data: data1,
|
||
stack:'quarter',
|
||
yAxisIndex:0,
|
||
label:{
|
||
show:true,
|
||
position:'top',
|
||
formatter(params) {
|
||
return sumData[params.dataIndex]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第二季度',
|
||
data: data2,
|
||
stack:'quarter',
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第三季度',
|
||
data: data3,
|
||
yAxisIndex:0,
|
||
stack:'quarter',
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第四季度',
|
||
data: data4,
|
||
yAxisIndex:0,
|
||
stack:'quarter',
|
||
},
|
||
{
|
||
type: 'line',
|
||
name:'同比(右)',
|
||
data: ratioList,
|
||
yAxisIndex:1,
|
||
}]
|
||
},
|
||
/**
|
||
* 切换每股指标
|
||
* @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()
|
||
}
|
||
},
|
||
/**
|
||
* 获取期间费用单季度数据
|
||
*/
|
||
getPeriodExpensesSingleQuarterData() {
|
||
let category = []
|
||
let currentYear = this.incomeStatementList[0].period.split('-')[0]
|
||
var currentYearCount = 0
|
||
for (let item of this.incomeStatementList) {
|
||
let year = item.period.split('-')[0]
|
||
if(year==currentYear) {
|
||
currentYearCount ++
|
||
}
|
||
}
|
||
let years = (16 - currentYearCount)/4
|
||
let showDataCount = years*4+currentYearCount
|
||
let showDataList = this.incomeStatementList.slice(0,showDataCount)
|
||
for (var i = 0; i <= years; i++) {
|
||
category.unshift(currentYear-i)
|
||
}
|
||
//第一季度
|
||
let data1 = []
|
||
//第二季度
|
||
let data2 = []
|
||
//第三季度
|
||
let data3 = []
|
||
//第四季度
|
||
let data4 = []
|
||
for (let item of showDataList) {
|
||
for (let item1 of category) {
|
||
let index = showDataList.indexOf(item)
|
||
let lastItem = showDataList[index+1]
|
||
let total1 = accAdd(accAdd(accAdd(item.costs.selling_expenses,item.costs.admin_expenses), item.costs.rd_expenses), item.costs.financial_expenses)
|
||
let total2 = 0
|
||
if(lastItem)
|
||
{
|
||
total2 = accAdd(accAdd(accAdd(lastItem.costs.selling_expenses,lastItem.costs.admin_expenses), lastItem.costs.rd_expenses), lastItem.costs.financial_expenses)
|
||
}
|
||
if(item1+'年一季报'==item.report_type){
|
||
if(total1)
|
||
{
|
||
data1.unshift(accDiv(total1,100000000).toFixed(2))
|
||
}else
|
||
data1.unshift(0)
|
||
}
|
||
if(item1+'年中报'==item.report_type){
|
||
if(total1&&total2)
|
||
{
|
||
data2.unshift(accDiv(accSub(total1,total2),100000000).toFixed(2))
|
||
}else
|
||
data2.unshift(0)
|
||
}
|
||
if(item1+'年三季报'==item.report_type){
|
||
if(total1&&total2)
|
||
{
|
||
data3.unshift(accDiv(accSub(total1,total2),100000000).toFixed(2))
|
||
}else
|
||
data3.unshift(0)
|
||
}
|
||
if(item1+'年年报'==item.report_type){
|
||
if(total1&&total2)
|
||
{
|
||
data4.unshift(accDiv(accSub(total1,total2),100000000).toFixed(2))
|
||
}else
|
||
data4.unshift(0)
|
||
}
|
||
}
|
||
}
|
||
let sumData = []
|
||
for (var i = 0; i < data1.length; i++) {
|
||
let sum = data1[i]
|
||
sum = accAdd(sum,data2[i]?data2[i]:0)
|
||
sum = accAdd(sum,data3[i]?data3[i]:0)
|
||
sum = accAdd(sum,data4[i]?data4[i]:0).toFixed(2)
|
||
if(sum>10000) {
|
||
sumData.push((sum/10000).toFixed(2)+'万')
|
||
}else
|
||
sumData.push(sum)
|
||
}
|
||
this.option2.legend.data = ['第一季度','第二季度','第三季度','第四季度']
|
||
this.option3.xAxis[0].data = category
|
||
this.option3.xAxis[1].data = category
|
||
this.option3.series = [{
|
||
type: 'bar',
|
||
name:'第一季度',
|
||
barWidth:'15%',
|
||
data: data1,
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第二季度',
|
||
barWidth:'15%',
|
||
data: data2,
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第三季度',
|
||
barWidth:'15%',
|
||
data: data3,
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第四季度',
|
||
barWidth:'15%',
|
||
data: data4,
|
||
yAxisIndex:0,
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'总值',
|
||
data: sumData,
|
||
barWidth:'70%',
|
||
xAxisIndex:1,
|
||
yAxisIndex:0,
|
||
itemStyle:{
|
||
color:'rgba(0,0,0,0.2)',
|
||
},
|
||
label:{
|
||
show:true,
|
||
position:'top'
|
||
}
|
||
}]
|
||
},
|
||
/**
|
||
* 获取期间费用全部数据
|
||
*/
|
||
getPeriodExpensesAllData() {
|
||
let showDataList = this.incomeStatementList.slice(0,8)
|
||
let category = []
|
||
let data1 = []
|
||
let data2 = []
|
||
let data3 = []
|
||
let data4 = []
|
||
for (let item of showDataList) {
|
||
let index = showDataList.indexOf(item)
|
||
if(index<showDataList.length-3)
|
||
{
|
||
let type = item.report_type
|
||
type = type.replaceAll('三季报','\n三季报')
|
||
type = type.replaceAll('年报','\n年报')
|
||
type = type.replaceAll('中报','\n中报')
|
||
type = type.replaceAll('一季报','\n一季报')
|
||
category.unshift(type)
|
||
let lastItem1 = showDataList[index+1]
|
||
let lastItem2 = showDataList[index+2]
|
||
let lastItem3 = showDataList[index+3]
|
||
let total1 = accAdd(accAdd(accAdd(item.costs.selling_expenses,item.costs.admin_expenses), item.costs.rd_expenses), item.costs.financial_expenses)
|
||
let total2 = accAdd(accAdd(accAdd(lastItem1.costs.selling_expenses,lastItem1.costs.admin_expenses), lastItem1.costs.rd_expenses), lastItem1.costs.financial_expenses)
|
||
let total3 = accAdd(accAdd(accAdd(lastItem2.costs.selling_expenses,lastItem2.costs.admin_expenses), lastItem2.costs.rd_expenses), lastItem2.costs.financial_expenses)
|
||
let total4 = accAdd(accAdd(accAdd(lastItem3.costs.selling_expenses,lastItem3.costs.admin_expenses), lastItem3.costs.rd_expenses), lastItem3.costs.financial_expenses)
|
||
if(item.report_type.indexOf('三季报')>-1)
|
||
{
|
||
if(total1&&total2&&total3)
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(accDiv(accSub(total1,total2),100000000).toFixed(2))
|
||
data2.unshift(accDiv(accSub(total2,total3),100000000).toFixed(2))
|
||
data1.unshift(accDiv(total3,100000000).toFixed(2))
|
||
}else
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(0)
|
||
}
|
||
}else if(item.report_type.indexOf('中报')>-1)
|
||
{
|
||
if(total1&&total2)
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(accDiv(accSub(total1,total2),100000000).toFixed(2))
|
||
data1.unshift(accDiv(total2,100000000).toFixed(2))
|
||
}else
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(0)
|
||
}
|
||
}else if(item.report_type.indexOf('一季报')>-1)
|
||
{
|
||
if(total1)
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(accDiv(total1,100000000).toFixed(2))
|
||
}else
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(0)
|
||
}
|
||
}else if(item.report_type.indexOf('年报')>-1)
|
||
{
|
||
if(total1&&total2&&total3&&total4)
|
||
{
|
||
data4.unshift(accDiv(accSub(total1,total2),100000000).toFixed(2))
|
||
data3.unshift(accDiv(accSub(total2,total3),100000000).toFixed(2))
|
||
data2.unshift(accDiv(accSub(total3,total4),100000000).toFixed(2))
|
||
data1.unshift(accDiv(total4,100000000).toFixed(2))
|
||
}else
|
||
{
|
||
data4.unshift(0)
|
||
data3.unshift(0)
|
||
data2.unshift(0)
|
||
data1.unshift(0)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
let sumData = []
|
||
for (var i = 0; i < data1.length; i++) {
|
||
let sum = data1[i]
|
||
sum = accAdd(sum,data2[i])
|
||
sum = accAdd(sum,data3[i])
|
||
sum = accAdd(sum,data4[i]).toFixed(2)
|
||
if(sum>10000) {
|
||
sumData.push((sum/10000).toFixed(2)+'万')
|
||
}else
|
||
sumData.push(sum)
|
||
}
|
||
this.option3.xAxis[0].data = category
|
||
let ratioList = []
|
||
for (let item of showDataList) {
|
||
let index = showDataList.indexOf(item)
|
||
if(index<showDataList.length-3)
|
||
{
|
||
let lastItem = this.incomeStatementList[index+4]
|
||
let total1 = accAdd(accAdd(accAdd(item.costs.selling_expenses,item.costs.admin_expenses), item.costs.rd_expenses), item.costs.financial_expenses)
|
||
let total2 = accAdd(accAdd(accAdd(lastItem.costs.selling_expenses,lastItem.costs.admin_expenses), lastItem.costs.rd_expenses), lastItem.costs.financial_expenses)
|
||
ratioList.unshift(accMul(accDiv(accSub(total1,total2),Math.abs(total2)),100).toFixed(2))
|
||
}
|
||
}
|
||
this.option3.tooltip = {
|
||
show:true,
|
||
confine:true,
|
||
formatter(params) {
|
||
let index = params.dataIndex
|
||
let str = params.name+':'+sumData[index]
|
||
if(data1[index]!=0)
|
||
{
|
||
str += '\n第一季度：'+data1[index]
|
||
}
|
||
if(data2[index]!=0)
|
||
{
|
||
str += '\n第二季度：'+data2[index]
|
||
}
|
||
if(data3[index]!=0)
|
||
{
|
||
str += '\n第三季度：'+data3[index]
|
||
}
|
||
if(data4[index]!=0)
|
||
{
|
||
str += '\n第四季度：'+data4[index]
|
||
}
|
||
str += '\n同比(右)'+ratioList[index]
|
||
return str
|
||
}
|
||
}
|
||
this.option3.series = [{
|
||
type: 'bar',
|
||
name:'第一季度',
|
||
data: data1,
|
||
stack:'quarter',
|
||
yAxisIndex:0,
|
||
label:{
|
||
show:true,
|
||
position:'top',
|
||
formatter(params) {
|
||
return sumData[params.dataIndex]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第二季度',
|
||
data: data2,
|
||
stack:'quarter',
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第三季度',
|
||
data: data3,
|
||
yAxisIndex:0,
|
||
stack:'quarter',
|
||
},
|
||
{
|
||
type: 'bar',
|
||
name:'第四季度',
|
||
data: data4,
|
||
yAxisIndex:0,
|
||
stack:'quarter',
|
||
},
|
||
{
|
||
type: 'line',
|
||
name:'同比(右)',
|
||
data: ratioList,
|
||
yAxisIndex:1,
|
||
}]
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<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;
|
||
}
|
||
}
|
||
.detailOptionC
|
||
{
|
||
.option
|
||
{
|
||
margin: 0 10rpx;
|
||
line-height: 36rpx;
|
||
padding: 0 10rpx;
|
||
border-radius: 5rpx;
|
||
border: 1rpx solid #D2D2D2;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
text-align: center;
|
||
.icon
|
||
{
|
||
width: 23rpx;
|
||
height: auto;
|
||
}
|
||
.arrow
|
||
{
|
||
width: 11rpx;
|
||
height: auto;
|
||
}
|
||
}
|
||
.option.select
|
||
{
|
||
border: solid 1rpx #F2C369;
|
||
color: #F2C369;
|
||
}
|
||
}
|
||
</style> |