185 lines
5.0 KiB
Vue
185 lines
5.0 KiB
Vue
<template>
|
||
<view class="business-structure">
|
||
<!-- 业态结构占比标题 -->
|
||
<view class="section-header">
|
||
<text class="section-title">业态结构占比</text>
|
||
</view>
|
||
|
||
<!-- 业态结构占比图表 -->
|
||
<view class="chart-container">
|
||
<QiunDataCharts type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
|
||
canvasId="businessStructureChart" :animation="false" :ontap="true" :ontouch="true"
|
||
tooltipFormat="businessStructureChart" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||
import request from "@/util/index.js";
|
||
import moment from 'moment'
|
||
|
||
export default {
|
||
components: {
|
||
QiunDataCharts
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
// 图表原始数据
|
||
rawData: {
|
||
seriesData: [],
|
||
legendData: []
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// 图表数据
|
||
chartData() {
|
||
return {
|
||
series: [{
|
||
data: this.rawData.seriesData
|
||
}]
|
||
}
|
||
},
|
||
|
||
// 图表配置
|
||
chartOpts() {
|
||
return {
|
||
padding: [15, 15, 15, 15],
|
||
dataLabel: false,
|
||
legend: {
|
||
show: true,
|
||
position: 'right',
|
||
float: 'center',
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
borderColor: 'rgba(0,0,0,0)',
|
||
fontSize: 12,
|
||
fontColor: '#333333',
|
||
margin: 0,
|
||
padding: 0,
|
||
itemGap: 10,
|
||
textAlign: 'left'
|
||
},
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 0,
|
||
border: false,
|
||
borderWidth: 2,
|
||
borderColor: '#FFFFFF',
|
||
linearType: 'custom'
|
||
}
|
||
},
|
||
realData: this.rawData.seriesData
|
||
}
|
||
}
|
||
},
|
||
|
||
onReady() {
|
||
this.handleGetBusinessStructureData()
|
||
},
|
||
|
||
methods: {
|
||
// 获取业态结构占比数据
|
||
async handleGetBusinessStructureData() {
|
||
const req = {
|
||
ProvinceCode: '530000',
|
||
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||
BusinessTradeIds: -1,
|
||
ServerpartId: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
|
||
}
|
||
|
||
const data = await this.getBusinessTradeRevenue(req);
|
||
|
||
// 处理数据
|
||
this.processChartData(data.Result_Data)
|
||
},
|
||
|
||
// 发起API请求获取业态结构占比数据
|
||
async getBusinessTradeRevenue(params) {
|
||
const data = await request.$webGet(
|
||
"CommercialApi/Revenue/GetBusinessTradeRevenue",
|
||
params
|
||
);
|
||
return data || {}
|
||
},
|
||
|
||
// 处理图表数据
|
||
processChartData(data) {
|
||
|
||
let seriesData = []
|
||
let legendData = []
|
||
|
||
// 处理数据：获取业态结构占比数据
|
||
if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
|
||
let list = data.BusinessTradeRank
|
||
list.forEach((item) => {
|
||
seriesData.push({
|
||
name: item.name,
|
||
value: Number(item.value),
|
||
data: item.data
|
||
})
|
||
|
||
legendData.push({
|
||
name: item.name,
|
||
value: item.value + '%'
|
||
})
|
||
})
|
||
}
|
||
|
||
// 更新图表数据
|
||
this.rawData = {
|
||
seriesData: seriesData,
|
||
legendData: legendData
|
||
}
|
||
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@primary-color: #46B8F3;
|
||
@secondary-color: #3CD495;
|
||
@danger-color: #FF5E5E;
|
||
@success-color: #52C41A;
|
||
@text-primary: #333;
|
||
@text-secondary: #666;
|
||
@text-light: #999;
|
||
@bg-white: #ffffff;
|
||
@border-radius: 16rpx;
|
||
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
|
||
.business-structure {
|
||
margin-top: 24rpx;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 8rpx;
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
}
|
||
}
|
||
|
||
.chart-container {
|
||
background: @bg-white;
|
||
border-radius: @border-radius;
|
||
padding: 24rpx;
|
||
box-shadow: @shadow;
|
||
margin-bottom: 24rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
</style> |