Publish apes-Authon-Web via gitea-publish skill
This commit is contained in:
gitea-publish
@@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<div class="panel export-orders">
|
||||
<div class="panel-title">出口订单情况</div>
|
||||
<div class="export-content">
|
||||
<!-- 左侧统计信息 -->
|
||||
<div class="export-stats">
|
||||
<div class="stat-item export-stat-item">
|
||||
<div class="stat-label">出口批次</div>
|
||||
<div class="stat-value">
|
||||
<span class="value">80</span>
|
||||
<span class="unit">批</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item export-stat-item">
|
||||
<div class="stat-label">累计出口</div>
|
||||
<div class="stat-value">
|
||||
<span class="value">588</span>
|
||||
<span class="unit">万斤</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间环形图 -->
|
||||
<div class="export-chart">
|
||||
<div ref="pieChart" class="chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧柱状图 -->
|
||||
<div class="export-countries">
|
||||
<div ref="legendChart" class="legend-chart"></div>
|
||||
<div ref="barChart" class="bar-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ExportOrders",
|
||||
data() {
|
||||
return {
|
||||
pieChartInstance: null,
|
||||
barChartInstance: null,
|
||||
legendChartInstance: null,
|
||||
pieData: [
|
||||
{ value: 21, name: "泰国", itemStyle: { color: "#00f2ff" } },
|
||||
{ value: 16, name: "越南", itemStyle: { color: "#4caf50" } },
|
||||
{ value: 8, name: "新加坡", itemStyle: { color: "#ff9800" } },
|
||||
{ value: 4, name: "印尼", itemStyle: { color: "#9c27b0" } },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initPieChart();
|
||||
this.initBarChart();
|
||||
this.initLegendChart();
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.pieChartInstance) this.pieChartInstance.dispose();
|
||||
if (this.barChartInstance) this.barChartInstance.dispose();
|
||||
if (this.legendChartInstance) this.legendChartInstance.dispose();
|
||||
window.removeEventListener("resize", this.handleResize);
|
||||
},
|
||||
methods: {
|
||||
initPieChart() {
|
||||
this.pieChartInstance = this.$echarts.init(this.$refs.pieChart);
|
||||
|
||||
const option = {
|
||||
backgroundColor: "transparent",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c}万斤 ({d}%)",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.95)",
|
||||
borderColor: "#00f2ff",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
top: "5%",
|
||||
left: "center",
|
||||
type: "scroll",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 10,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "出口国家",
|
||||
type: "pie",
|
||||
radius: ["35%", "60%"],
|
||||
center: ["50%", "55%"],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: "rgba(3, 13, 33, 0.5)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 11,
|
||||
formatter: "{c}万斤",
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 8,
|
||||
length2: 5,
|
||||
lineStyle: {
|
||||
color: "#00f2ff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: "12",
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: this.pieData.sort(() => Math.random() - 0.5),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
this.pieChartInstance.setOption(option);
|
||||
},
|
||||
|
||||
initBarChart() {
|
||||
this.barChartInstance = this.$echarts.init(this.$refs.barChart);
|
||||
|
||||
const option = {
|
||||
backgroundColor: "transparent",
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
backgroundColor: "rgba(255, 255, 255, 0.95)",
|
||||
borderColor: "#00f2ff",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "8%",
|
||||
right: "8%",
|
||||
bottom: "15%",
|
||||
top: "20%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["泰国", "越南", "俄罗斯", "新加坡", "印尼"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(26, 74, 141, 0.5)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#aaa",
|
||||
fontSize: 9,
|
||||
rotate: 0,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "(万斤)",
|
||||
nameTextStyle: {
|
||||
color: "#aaa",
|
||||
fontSize: 9,
|
||||
},
|
||||
min: 0,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(26, 74, 141, 0.5)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#aaa",
|
||||
fontSize: 9,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(26, 74, 141, 0.2)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "直接出口",
|
||||
type: "bar",
|
||||
barWidth: "30%",
|
||||
data: [22, 20, 18, 15, 10],
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#00f2ff" },
|
||||
{ offset: 1, color: "#1a4a8d" },
|
||||
]),
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#00f2ff" },
|
||||
{ offset: 1, color: "#2d6cb5" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
// 关键修改：显示直接出口的数值标签
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#00f2ff",
|
||||
fontSize: 9,
|
||||
fontWeight: "bold",
|
||||
distance: 2
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "代加工",
|
||||
type: "bar",
|
||||
barWidth: "30%",
|
||||
data: [18, 15, 13, 10, 7],
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#66a3ff" },
|
||||
{ offset: 1, color: "#1a4a8d" },
|
||||
]),
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#66a3ff" },
|
||||
{ offset: 1, color: "#2d6cb5" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
// 关键修改：显示代加工的数值标签
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#66a3ff",
|
||||
fontSize: 9,
|
||||
fontWeight: "bold",
|
||||
distance: 2
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
this.barChartInstance.setOption(option);
|
||||
},
|
||||
|
||||
initLegendChart() {
|
||||
this.legendChartInstance = this.$echarts.init(this.$refs.legendChart);
|
||||
|
||||
const option = {
|
||||
backgroundColor: "transparent",
|
||||
legend: {
|
||||
show: true,
|
||||
data: ["直接出口", "代加工"],
|
||||
orient: "horizontal",
|
||||
top: "center",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#aaa",
|
||||
fontSize: 10,
|
||||
},
|
||||
itemWidth: 10,
|
||||
itemHeight: 6,
|
||||
selectedMode: true,
|
||||
},
|
||||
};
|
||||
|
||||
this.legendChartInstance.setOption(option);
|
||||
|
||||
// 图例交互与主图表同步
|
||||
this.legendChartInstance.on("legendselectchanged", (params) => {
|
||||
this.barChartInstance.dispatchAction({
|
||||
type: "legendToggleSelect",
|
||||
name: params.name,
|
||||
});
|
||||
});
|
||||
|
||||
this.barChartInstance.on("legendselectchanged", (params) => {
|
||||
this.legendChartInstance.dispatchAction({
|
||||
type: "legendToggleSelect",
|
||||
name: params.name,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
handleResize() {
|
||||
if (this.pieChartInstance) this.pieChartInstance.resize();
|
||||
if (this.barChartInstance) this.barChartInstance.resize();
|
||||
if (this.legendChartInstance) this.legendChartInstance.resize();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tracing-screen.scss";
|
||||
|
||||
.export-orders {
|
||||
@include panel-base;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.export-content {
|
||||
display: flex;
|
||||
height: calc(100% - 30px);
|
||||
gap: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.export-stats {
|
||||
flex: 0.3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
border: 1px solid rgba(26, 74, 141, 0.5);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.export-stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(6, 30, 93, 0.8),
|
||||
rgba(6, 30, 93, 0.6)
|
||||
);
|
||||
border: 1px solid rgba(0, 242, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 12px 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 242, 255, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
color: #99ccff;
|
||||
margin-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.value {
|
||||
font-size: 20px;
|
||||
color: $highlight;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 6px rgba(0, 242, 255, 0.5);
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 11px;
|
||||
color: #99ccff;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 242, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.export-chart {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(26, 74, 141, 0.5);
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.export-countries {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(26, 74, 141, 0.5);
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.legend-chart {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.bar-chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 35px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user