161 lines
5.5 KiB
Vue
161 lines
5.5 KiB
Vue
<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;">
|
|
<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>
|
|
</view>
|
|
<view class="flex" style="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 class="flex"
|
|
style="padding: 3rpx 10rpx;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="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 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>
|
|
</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>
|
|
export default {
|
|
name:"cwfx-view",
|
|
data() {
|
|
return {
|
|
option1:{
|
|
legend:{
|
|
show:true,
|
|
data:['ROE','同比(右)']
|
|
},
|
|
grid:{
|
|
left:'2%',
|
|
right:'2%',
|
|
top:'5%',
|
|
bottom:'30%'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: [],
|
|
axisLabel:{
|
|
// interval:0
|
|
}
|
|
},
|
|
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:'营业收入',
|
|
data: [],
|
|
yAxisIndex:0
|
|
},
|
|
{
|
|
type: 'line',
|
|
name:'净利润',
|
|
data: [],
|
|
yAxisIndex:1
|
|
}
|
|
]
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
barCategoryList1:Array,
|
|
barList1:Array,
|
|
lineList:Array, //折线图数据
|
|
barCategoryList1:Array,
|
|
barList1:Array,
|
|
},
|
|
methods:{
|
|
clickProfitabilityIndicators(item) {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |