gitea-publish
426 lines
10 KiB
Vue
426 lines
10 KiB
Vue
<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> |