177 lines
5.1 KiB
Vue
177 lines
5.1 KiB
Vue
<template>
|
||
<view class="analysis-of-member">
|
||
<!-- 会员分析图表 -->
|
||
<view class="chart-card">
|
||
<view class="chart-container">
|
||
<QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
|
||
:inScrollView="true" canvasId="analysisOfMemberChart" :animation="false" :ontap="true"
|
||
:ontouch="true" tooltipFormat="AnalysisOfMember" />
|
||
</view>
|
||
</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: {
|
||
category: [],
|
||
weeklyData: [], // 每周优品爆款数据
|
||
otherData: [], // 其他类型数据
|
||
addList: [] // 增长率数据
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// 图表数据
|
||
chartData() {
|
||
return {
|
||
categories: this.rawData.category,
|
||
series: [
|
||
{
|
||
name: '每周优品爆款',
|
||
data: this.rawData.weeklyData,
|
||
type: 'column'
|
||
},
|
||
{
|
||
name: '其他类型',
|
||
data: this.rawData.otherData,
|
||
type: 'column'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
// 图表配置
|
||
chartOpts() {
|
||
return {
|
||
padding: [15, 15, 15, 15],
|
||
dataLabel: false,
|
||
enableScroll: true,
|
||
dataPointShape: false,
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 4 // 显示4个分类
|
||
},
|
||
yAxis: {
|
||
data: [{
|
||
min: 0,
|
||
max: 100,
|
||
title: '百分比(%)',
|
||
titleFontSize: 12,
|
||
titleOffsetY: 0,
|
||
unit: '%',
|
||
format: 'value' // 显示纯数字值
|
||
}]
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: 'bottom',
|
||
float: 'center',
|
||
fontSize: 12,
|
||
itemGap: 20
|
||
},
|
||
extra: {
|
||
column: {
|
||
width: 12, // 柱子宽度
|
||
seriesGap: 0, // 系列间距
|
||
colorStop: 0
|
||
}
|
||
},
|
||
}
|
||
}
|
||
},
|
||
|
||
onReady() {
|
||
this.handleGetData()
|
||
},
|
||
|
||
methods: {
|
||
// 获取数据
|
||
async handleGetData() {
|
||
await this.getAnalysisOfMemberData()
|
||
},
|
||
|
||
// 获取会员分析数据
|
||
async getAnalysisOfMemberData() {
|
||
// 原组件目前使用模拟数据，这里也先使用模拟数据保持一致
|
||
// 如果后续有真实API，可以按照TrendOfTrafficFlow.vue的方式调用
|
||
|
||
// 处理数据
|
||
this.processChartData()
|
||
},
|
||
|
||
// 处理图表数据
|
||
processChartData() {
|
||
// 根据原组件的数据结构进行处理
|
||
let category = ["购买数量", "交易金额", "订单笔数", "购买人数"]
|
||
let weeklyData = [50.99, 48.89, 82.95, 85.05] // 每周优品爆款数据
|
||
let otherData = [49.01, 51.11, 17.05, 14.95] // 其他类型数据
|
||
let addList = [] // 增长率数据（原组件逻辑）
|
||
|
||
// 计算增长率（模拟逻辑，与原组件保持一致）
|
||
for (let i = 0; i < category.length; i++) {
|
||
// 这里可以根据实际业务逻辑计算增长率
|
||
// 目前保持与原组件一致的显示逻辑
|
||
addList.push('+' + (Math.random() * 20).toFixed(2)) // 模拟增长率数据
|
||
}
|
||
|
||
// 更新图表数据
|
||
this.rawData = {
|
||
category: category,
|
||
weeklyData: weeklyData,
|
||
otherData: otherData,
|
||
addList: addList
|
||
}
|
||
|
||
},
|
||
|
||
// 更新图表数据
|
||
async handleUpdateChart() {
|
||
await this.handleGetData()
|
||
}
|
||
}
|
||
}
|
||
</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);
|
||
|
||
.analysis-of-member {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.chart-card {
|
||
background: @bg-white;
|
||
border-radius: @border-radius;
|
||
padding: 24rpx;
|
||
box-shadow: @shadow;
|
||
margin-bottom: 24rpx;
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |