-
+
+
+
-
展现量 （次）
+
展现量 (次)
- {{
- analysis.viewCount ? analysis.viewCount : "0"
- }}
+ {{ analysis.viewCount || "0" }}
↓
- ↑
- {{ analysis.viewCountRatio }}
+
+ {{ analysis.viewCountRatio }}
+
-
+
+
+
-
浏览人数 （人）
+
浏览人数 (人)
- {{ analysis.peopleCount }}
+ {{ analysis.peopleCount || "0" }}
↓
- ↑
- {{ analysis.peopleCountRatio }}
+
+ {{ analysis.peopleCountRatio }}
+
-
+
+
+
-
新客数量 （人）
+
新客数量 (人)
- {{
- analysis.newPeopleCount ? analysis.newPeopleCount : "0"
+ {{
+ analysis.newPeopleCount || "0"
}}
↓
- ↑
- {{
- analysis.newPeopleCountRatio
+
+ {{ analysis.newPeopleCountRatio }}
+
+
+
+
+
+
+
+
+
+
支付订单人数 (人)
+
+ {{ analysis.payCount || "0" }}
+
+
+
+
+
+
+
+
+
支付订单转化率 (%)
+
+ {{
+ analysis.payConversion || "0"
}}
-
-
-
支付订单人数 （人）
-
- {{ analysis.payCount ? analysis.payCount : "0" }}
-
+
+
-
-
-
-
支付订单转化率 （%）
-
- {{ analysis.payConversion ? analysis.payConversion : "0" }}
-
-
-
-
-
-
-
客户复购率 （%）
-
- {{ analysis.repurchaseRate ? analysis.repurchaseRate : "0" }}
+
客户复购率 (%)
+
+ {{
+ analysis.repurchaseRate || "0"
+ }}
-
-
-
+
@@ -162,94 +146,136 @@ export default {
value: "",
formInline: {
dateType: "1",
- elementType: "1",
},
analysis: {},
trend: [],
+ charts: [], // 用于存储ECharts实例
};
},
mounted() {
this.getList();
},
+ beforeDestroy() {
+ // 组件销毁前销毁ECharts实例
+ this.charts.forEach((chart) => {
+ chart.dispose();
+ });
+ },
methods: {
getList() {
- console.log("1213");
this.$api.dataCenter
.customerAnalysis({ dateType: this.formInline.dateType })
.then((res) => {
this.analysis = res.data.data;
});
- this.$api.dataCenter.customerTrend(this.formInline).then((res) => {
- this.trend = res.data.data;
- this.init(res.data.data);
+
+ const elementTypes = ["1", "2", "3", "4"];
+ const chartPromises = elementTypes.map((type) =>
+ this.$api.dataCenter.customerTrend({ ...this.formInline, elementType: type })
+ );
+
+ Promise.all(chartPromises).then((responses) => {
+ const chartData = responses.map((res) => res.data.data);
+ this.init(chartData);
});
},
- init(data) {
+ init(allData) {
+ // 先销毁旧实例
+ this.charts.forEach((chart) => {
+ chart.dispose();
+ });
+ this.charts = [];
+
+ const titles = ["浏览数量", "浏览人数", "新客数量", "支付订单人数"];
+ const colors = ["#5470C6", "#91CC75", "#FAC858", "#EE6666"];
+
this.$nextTick(() => {
- // 折线图
- const myChat = echarts.init(
- document.getElementById("echarts-LineChart")
- );
- myChat.setOption(this.LineChart(data));
- window.addEventListener("resize", () => {
- myChat.resize();
+ allData.forEach((data, index) => {
+ const chartDom = document.getElementById(
+ `echarts-LineChart-${index + 1}`
+ );
+ if (chartDom) {
+ const myChart = echarts.init(chartDom);
+ const options = this.LineChart(
+ data,
+ titles[index],
+ colors[index]
+ );
+ myChart.setOption(options);
+ this.charts.push(myChart);
+ }
});
+
+ window.addEventListener("resize", this.resizeCharts);
});
},
- LineChart(data) {
+ resizeCharts() {
+ this.charts.forEach((chart) => {
+ chart.resize();
+ });
+ },
+ LineChart(data, title, color) {
return {
title: {
- text: "数据趋势分析",
+ text: title + "趋势",
+ left: "left",
},
tooltip: {
trigger: "axis",
},
legend: {
- data: [this.elementTypeName(this.formInline.elementType)],
+ data: [title],
+ top: "top",
+ right: "10",
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
+ top: "20%",
containLabel: true,
},
toolbox: {
- feature: {
- saveAsImage: {},
- },
+ feature: {},
},
xAxis: {
type: "category",
boundaryGap: false,
- data: data.map((item) => {
- return item.countDate;
- }),
+ data: data.map((item) => item.countDate),
},
yAxis: {
type: "value",
},
series: [
{
- name: this.elementTypeName(this.formInline.elementType),
+ name: title,
type: "line",
- stack: "Total",
- data: data.map((item) => {
- return item.value;
- }),
+ smooth: true,
+ stack: "Total", // 如果不希望堆叠，可以移除此项
+ data: data.map((item) => item.value),
+ itemStyle: {
+ color: color,
+ },
+ lineStyle: {
+ color: color,
+ },
+ areaStyle: {
+ color: color,
+ opacity: 0.3,
+ },
},
],
};
},
- elementTypeName(row) {
- if (row == "1") {
- return "浏览数量";
- } else if (row == "2") {
- return "浏览人数";
- } else if (row == "3") {
- return "新客数量";
- } else if (row == "4") {
- return "支付订单人数";
- }
+ getRatioClass(ratio) {
+ if (!ratio || typeof ratio !== "string") return "";
+ return ratio.startsWith("-") ? "is-down" : "is-up";
+ },
+ getRatioIcon(ratio) {
+ if (!ratio || typeof ratio !== "string") return "";
+ return ratio.startsWith("-")
+ ? "el-icon-bottom-right"
+ : "el-icon-top-right";
},
async batchExport() {
let trendData = this.trend.map((item) => {
@@ -297,32 +323,113 @@ export default {