@@ -493,9 +493,9 @@ export default {
}
console.log('接口响应数据:', response);
- this.summaryData.totalOrderAmount = response.totalOrderAmount;
- this.summaryData.totalOrderCount = response.totalOrderCount;
- this.processResponseData(response.data);
+
+ this.processResponseData(response);
+
} catch (error) {
console.error('获取订单分析数据失败:', error);
this.$message.error('获取数据失败，请重试');
@@ -599,15 +599,17 @@ export default {
break;
}
}
+ // 简单添加标题和最大值标注
+ const maxValue = Math.max(...seriesData);
+ const maxIndex = seriesData.indexOf(maxValue);
const option = {
tooltip: {
trigger: 'axis',
- axisPointer: { type: 'shadow' },
formatter: params => {
const value = params[0].value;
const axisValue = params[0].axisValue;
- return `${axisValue}
订单数量: ${value}`;
+ return `${axisValue}
当前订单量: ${value}`;
}
},
grid: {
@@ -618,20 +620,25 @@ export default {
},
xAxis: {
type: 'category',
+ name:'时间',
data: xAxisData,
+ axisTick: {
+ show: true,
+ inside: true, // 刻度在轴内
+ },
axisLabel: {
rotate: xAxisData.length > 10 ? 45 : 0,
formatter: value => {
switch (this.filter.timeRange) {
case 'day': return value.split('-').slice(1).join('-');
- case 'month': return value.split('-')[1];
- case 'year': return value;
+ case 'month': return value.split('-')[1]+ '月';
+ case 'year': return value+ '年';
default: return value;
}
}
}
},
- yAxis: { type: 'value', minInterval: 1 },
+ yAxis: { type: 'value', minInterval: 1,name: '订单数量'},
series: [{
name: '订单数量',
data: seriesData,
@@ -639,11 +646,23 @@ export default {
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(58, 77, 233, 0.8)' },
- { offset: 1, color: 'rgba(58, 77, 233, 0.1)' }
+ { offset: 0, color: 'rgb(121, 165, 247,0.5)' },
+ { offset: 1, color: 'rgb(234, 241, 253, 0.1)' }
])
},
- itemStyle: { color: '#3a4de9' }
+ axisTick: {
+ show: true,
+ inside: true, // 刻度在轴内
+ },
+ itemStyle: { color: '#4E80EE' },
+ markPoint: {
+ data: [{
+ type: 'max',
+ label: {
+ formatter: '{c}'
+ }
+ }]
+ }
}]
};
@@ -673,13 +692,14 @@ export default {
legend: {
orient: 'vertical',
right: 10,
- top: 'center'
+ top: 'center',
+ itemGap: 10
},
series: [{
- name: '无人机型号分布',
+ name: '无人机型号分布',
type: 'pie',
radius: ['40%', '70%'],
- avoidLabelOverlap: false,
+ center: ['40%', '50%'],
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
@@ -705,72 +725,102 @@ export default {
},
updateRouteChart(routeDistribution) {
- if (!this.routeChart) return;
-
- // 过滤掉数量为0的路线
- const topRoutes = (routeDistribution || [])
- .filter(item => item.count > 0)
- .sort((a, b) => b.count - a.count)
- .slice(0, 10);
-
- if (topRoutes.length === 0) {
- this.routeChart.setOption({
- title: {
- text: '暂无数据',
- left: 'center',
- top: 'center'
- }
- });
- return;
- }
-
- this.routeChart.setOption({
- tooltip: {
- trigger: 'axis',
- axisPointer: { type: 'shadow' },
- formatter: params => {
- const route = topRoutes[params[0].dataIndex];
- return `路线: ${route.routeName || '未知路线'}
景区: ${route.scenicName || '未知景区'}
订单量: ${params[0].data}`;
+ if (!this.routeChart) return;
+
+ // 1. 处理数据：过滤无效值并按值从大到小排序
+ const topRoutes = (routeDistribution || [])
+ .filter(item => item.count > 0)
+ .sort((a, b) => b.count - a.count)
+ .slice(0, 10);
+
+ if (topRoutes.length === 0) {
+ this.routeChart.setOption({
+ title: {
+ text: '暂无数据',
+ left: 'center',
+ top: 'center'
+ }
+ });
+ return;
}
+
+ // 2. 颜色梯度计算（值越大颜色越深）
+ const maxValue = Math.max(...topRoutes.map(item => item.count));
+ const colorGradient = (value) => {
+ const ratio = value / maxValue;
+ return new echarts.graphic.LinearGradient(0, 0, 0,1, [
+ { offset: 0, color: `rgba(9, 71, 179, ${0.3 + ratio * 0.7})` }, // 顶部颜色更深
+ { offset: 1, color: `rgba(58, 119, 233, ${0.3 + ratio * 0.7})` } // 底部颜色更浅
+ ]);
+ };
+
+ // 3. 设置图表配置
+ this.routeChart.setOption({
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' },
+ formatter: (params) => {
+ const data = params[0];
+ return `
+
${data.name}
+
订单量: ${data.value}件
+ ${data.data.percentage ? `
完成率: ${data.data.percentage}
` : ''}
+ `;
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '12%', // 为右侧数值留更多空间
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ name: '订单数量（件）',
+ splitLine: {
+ show: false // 移除背景竖线
+ },
+ axisTick: {
+ show: false // 隐藏刻度
+ },
+ max: Math.max(50, maxValue) // 动态调整最大值
+ },
+ yAxis: {
+ type: 'category',
+ name: '景区路线',
+ nameLocation: 'start',
+ data: topRoutes.map(item => item.routeName),
+ axisLabel: {
+ formatter: (name) => name.length > 8 ? `${name.substring(0, 8)}...` : name
+ },
+ axisTick: {
+ show: false // 隐藏刻度
+ },
+ splitLine: {
+ show: false // 移除背景横线
+ },
+ inverse: true // 反转Y轴使最大值在上方
+ },
+ series: [{
+ name: '订单量',
+ type: 'bar',
+ data: topRoutes.map(item => ({
+ value: item.count,
+ name: item.routeName,
+ percentage: item.count.toString().includes('%') ? item.count : null,
+ itemStyle: {
+ color: colorGradient(item.count)
+ }
+ })),
+ barWidth: '40%',
+ label: {
+ show: true,
+ position: 'right', // 数值显示在右侧
+ formatter: ({ data }) => data.displayValue || `${data.value}`,
+ }
+ }]
+ }, true);
},
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'value',
- boundaryGap: [0, 0.01],
- minInterval: 1 // 确保显示整数
- },
- yAxis: {
- type: 'category',
- data: topRoutes.map(item => item.routeName || `路线 ${item.routeId}`),
- axisLabel: {
- formatter: value => value.length > 6 ? value.substring(0, 6) + '...' : value
- }
- },
- series: [{
- name: '订单量',
- type: 'bar',
- data: topRoutes.map(item => item.count),
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- { offset: 0, color: '#83bff6' },
- { offset: 0.5, color: '#188df0' },
- { offset: 1, color: '#0052d9' }
- ]),
- borderRadius: [0, 5, 5, 0]
- },
- label: {
- show: true,
- position: 'right',
- formatter: '{c}'
- }
- }]
- }, true);
-},
handleJump() {
const page = parseInt(this.jumpPage);
@@ -837,11 +887,9 @@ export default {
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file