179 lines
4.9 KiB
Vue
179 lines
4.9 KiB
Vue
<template>
|
|
<view class="festival-revenue-sum-info">
|
|
<view class="section-header">
|
|
<text class="section-title">节假日营收汇总</text>
|
|
</view>
|
|
<!-- 节假日营收汇总图表 -->
|
|
<view class="chart-container">
|
|
<!-- 图表加载效果 -->
|
|
<ChartLoading v-if="!hasChartData" text="数据加载中..." />
|
|
<!-- 实际图表 -->
|
|
<QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
|
|
:inScrollView="true" canvasId="festivalRevenueSumInfoChart" :animation="false" :ontap="true"
|
|
:ontouch="true" tooltipFormat="festivalRevenueSumInfoChart" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
|
import ChartLoading from './ChartLoading.vue'
|
|
import request from "@/util/index.js";
|
|
import moment from 'moment'
|
|
import { wrapTreeNode } from "@/util/dateTime";
|
|
|
|
export default {
|
|
components: {
|
|
QiunDataCharts,
|
|
ChartLoading
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
// 图表原始数据
|
|
rawData: {
|
|
seriesData: []
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
// 检查是否有图表数据
|
|
hasChartData() {
|
|
return this.rawData.seriesData && this.rawData.seriesData.length > 0
|
|
},
|
|
|
|
// 图表数据
|
|
chartData() {
|
|
return {
|
|
series: [{
|
|
data: this.rawData.seriesData
|
|
}]
|
|
}
|
|
},
|
|
|
|
// 图表配置
|
|
chartOpts() {
|
|
return {
|
|
padding: [15, 48, 15, 15], // 增加右侧padding为图例留空间
|
|
dataLabel: false,
|
|
legend: {
|
|
show: true,
|
|
position: 'right',
|
|
float: 'center',
|
|
fontSize: 11,
|
|
fontColor: '#333333',
|
|
},
|
|
extra: {
|
|
pie: {
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 0,
|
|
border: false,
|
|
borderWidth: 2,
|
|
}
|
|
},
|
|
}
|
|
}
|
|
},
|
|
|
|
onReady() {
|
|
this.handleGetFestivalRevenueSumInfoData()
|
|
},
|
|
|
|
methods: {
|
|
// 获取节假日营收汇总数据
|
|
async handleGetFestivalRevenueSumInfoData() {
|
|
const req = {
|
|
ProvinceCode: '530000'
|
|
}
|
|
|
|
const data = await this.getHolidayRevenueRatio(req);
|
|
let res = wrapTreeNode(data.Result_Data.List)
|
|
console.log('resdada', res);
|
|
|
|
// let res = wrapTreeNode(data.Result_Data.List[1])
|
|
// 处理数据
|
|
this.processChartData([res[1]])
|
|
},
|
|
|
|
// 发起API请求获取节假日营收汇总数据
|
|
async getHolidayRevenueRatio(params) {
|
|
const data = await request.$webGet(
|
|
"CommercialApi/Revenue/GetHolidayRevenueRatio",
|
|
params
|
|
);
|
|
return data || []
|
|
},
|
|
|
|
// 处理图表数据
|
|
processChartData(data) {
|
|
|
|
let seriesData = []
|
|
|
|
// 处理数据：只使用具体节假日数据（内部饼图数据）
|
|
if (data && data.length > 0) {
|
|
data.forEach((item) => {
|
|
// 只使用节假日具体细分数据
|
|
if (item.children && item.children.length > 0) {
|
|
item.children.forEach((subItem, subIndex) => {
|
|
seriesData.push({
|
|
name: `${subItem.name} ${subItem.value}%`,
|
|
value: Number(subItem.value),
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
// 更新图表数据
|
|
this.rawData = {
|
|
seriesData: seriesData
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</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);
|
|
|
|
.festival-revenue-sum-info {
|
|
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> |