From 3a29305df73ceffd1c6d4f1d117bdc23002a9c0f Mon Sep 17 00:00:00 2001 From: zzp <34701892@qq.com> Date: Fri, 12 Sep 2025 16:20:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=95=B0=E6=8D=AE=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改Line.vue组件，修复默认值格式和优化数据反转逻辑 - 更新newsInfo.ts API，修改热门标签/行业/来源的请求参数拼接方式 - 重构LineHol.vue组件，移除硬编码数据，支持动态数据绑定和样式优化 - 在realtimeInfo页面添加7天热度统计功能，支持不同标签切换 - 改进LineHolYellow.vue组件，支持动态数据并优化图表样式 --- src/api/newsInfo.ts | 9 ++- src/components/charts/Line.vue | 6 +- src/components/charts/LineHol.vue | 61 +++++++++-------- src/components/charts/LineHolYellow.vue | 87 ++++++++++++++++++------- src/pages/realtimeInfo/index.vue | 53 +++++++++++++-- 5 files changed, 151 insertions(+), 65 deletions(-) diff --git a/src/api/newsInfo.ts b/src/api/newsInfo.ts index b69e76e..ec52baf 100644 --- a/src/api/newsInfo.ts +++ b/src/api/newsInfo.ts @@ -42,15 +42,14 @@ export const getNews_cnt_d = (data: any) => { // 热门标签某时间段内topN列表 export const getTopConceptPeriod = (data: any) => { - return request.get("/top_concept_period", data); + return request.get("/top_concept_period?start_date=" + data.start_time + "&end_date=" + data.end_time + "&limit_num=" + data.limit_num, data); }; - -// 热门标签某时间段内topN列表 +// 热门行业某时间段内topN列表 export const getTopIndustryPeriod = (data: any) => { - return request.get("/top_industry_period", data); + return request.get("/top_industry_period?start_date=" + data.start_time + "&end_date=" + data.end_time + "&limit_num=" + data.limit_num, data); }; // 热门标签某时间段内topN列表 export const getTopSourcePeriod = (data: any) => { - return request.get("/top_source_period", data); + return request.get("/top_source_period?start_date=" + data.start_date + "&end_date=" + data.end_time + "&limit_num=" + data.limit_num, data); }; diff --git a/src/components/charts/Line.vue b/src/components/charts/Line.vue index c84f383..796bb3b 100644 --- a/src/components/charts/Line.vue +++ b/src/components/charts/Line.vue @@ -28,7 +28,7 @@ const colorList = ["#F05040", "#696BBE", "#93CFED", "#FE9F19", "#3C74F1"]; const props = defineProps({ data: { type: Object, - default: () => { }, + default: () => {}, }, }); @@ -42,8 +42,8 @@ watch( keys.value.push(item.key); values.value.push(item.doc_count); }); - keys.value.reverse() - values.value.reverse() + keys.value.reverse(); + values.value.reverse(); initChart(); } ); diff --git a/src/components/charts/LineHol.vue b/src/components/charts/LineHol.vue index 9db5b47..cbd3d74 100644 --- a/src/components/charts/LineHol.vue +++ b/src/components/charts/LineHol.vue @@ -23,30 +23,22 @@ const props = defineProps({ }, }); +watch( + () => props.data, + (newVal) => { + if (newVal) { + initChart(); + } + } +); + // 初始化图表 const initChart = () => { myChart = echarts.init(chartDom.value); const builderJson = { all: 10887, - charts: { - map: 3237, - lines: 2164, - bar: 7561, - line: 7778, - pie: 7355, - scatter: 2405, - candlestick: 1842, - radar: 2090, - heatmap: 1762, - treemap: 1593, - graph: 2060, - boxplot: 1537, - parallel: 1908, - gauge: 2107, - funnel: 1692, - sankey: 1568, - }, + charts: {}, components: { geo: 2788, title: 9575, @@ -63,6 +55,16 @@ const initChart = () => { }, ie: 9743, }; + // 查找value最大的项 + const maxItem = props.data.reduce((prev, current) => { + // 比较当前项和上一项的value，返回较大的那个 + return current.value > prev.value ? current : prev; + }, props.data[0]); // 初始值设为数组的第一个元素 + + props.data.forEach((item) => { + builderJson.charts[item.content] = item.value; + }); + builderJson.all = maxItem.value; const waterMarkText = "ECHARTS"; const canvas = document.createElement("canvas"); @@ -76,19 +78,20 @@ const initChart = () => { ctx.rotate(-Math.PI / 4); ctx.fillText(waterMarkText, 0, 0); let option = { - backgroundColor: { - type: "pattern", - image: canvas, - repeat: "repeat", - }, + // backgroundColor: { + // type: "pattern", + // image: canvas, + // repeat: "repeat", + // }, tooltip: {}, title: [], grid: [ { top: 0, width: "90%", - bottom: "0%", - left: 0, + top: "5%", + bottom: "10%", + left: 10, containLabel: true, }, ], @@ -123,6 +126,12 @@ const initChart = () => { position: "right", show: true, }, + itemStyle: { + color: "#52A8FF", + normal: { + borderRadius: [0, 4, 4, 0], + }, + }, data: Object.keys(builderJson.charts).map(function (key) { return builderJson.charts[key]; }), @@ -141,8 +150,6 @@ onMounted(async () => { // await getData(); // initChart(); // }, 5000); - - initChart(); }); diff --git a/src/components/charts/LineHolYellow.vue b/src/components/charts/LineHolYellow.vue index f97273d..4bd5b9b 100644 --- a/src/components/charts/LineHolYellow.vue +++ b/src/components/charts/LineHolYellow.vue @@ -26,40 +26,77 @@ const props = defineProps({ // 初始化图表 const initChart = () => { myChart = echarts.init(chartDom.value); + let source = []; + source.push(["score", "amount", "product"]); + props.data.forEach((item) => { + source.push([item.value, item.value, item.content]); + }); let option = { dataset: { - source: [ - ["score", "amount", "product"], - [89.3, 58212, "Matcha Latte"], - [57.1, 78254, "Milk Tea"], - [74.4, 41032, "Cheese Cocoa"], - [50.1, 12755, "Cheese Brownie"], - [89.7, 20145, "Matcha Cocoa"], - [68.1, 79146, "Tea"], - [19.6, 91852, "Orange Juice"], - [10.6, 101852, "Lemon Juice"], - [32.7, 20112, "Walnut Brownie"], - ], + source: source, + // [ + // ["score", "amount", "product"], + // [89.3, 58212, "Matcha Latte"], + // [57.1, 78254, "Milk Tea"], + // [74.4, 41032, "Cheese Cocoa"], + // [50.1, 12755, "Cheese Brownie"], + // [89.7, 20145, "Matcha Cocoa"], + // [68.1, 79146, "Tea"], + // [19.6, 91852, "Orange Juice"], + // [10.6, 101852, "Lemon Juice"], + // [32.7, 20112, "Walnut Brownie"], + // ], }, - grid: { containLabel: true }, - xAxis: { name: "amount" }, - yAxis: { type: "category" }, - visualMap: { - orient: "horizontal", - left: "center", - min: 10, - max: 100, - text: ["High Score", "Low Score"], - // Map the score column to color - dimension: 0, - inRange: { - color: ["#65B581", "#FFCE34", "#FD665F"], + grid: { + top: 0, + width: "90%", + top: "5%", + bottom: "10%", + left: 10, + containLabel: true, + }, + xAxis: { + splitLine: { + show: false, }, }, + yAxis: { + type: "category", + axisLabel: { + interval: 0, + rotate: 30, + }, + splitLine: { + show: false, + }, + }, + // visualMap: { + // show: false, + // orient: "horizontal", + // left: "center", + // min: 1, + // max: 100, + // text: ["High Score", "Low Score"], + // // Map the score column to color + // dimension: 0, + // inRange: { + // color: ["#65B581", "#FFCE34", "#FD665F"], + // }, + // }, series: [ { type: "bar", + label: { + position: "right", + show: true, + }, + itemStyle: { + color: "#FFCE34", + normal: { + borderRadius: [0, 4, 4, 0], + }, + }, encode: { // Map the "amount" column to X axis. x: "amount", diff --git a/src/pages/realtimeInfo/index.vue b/src/pages/realtimeInfo/index.vue index 008bf80..2e6924f 100644 --- a/src/pages/realtimeInfo/index.vue +++ b/src/pages/realtimeInfo/index.vue @@ -64,10 +64,10 @@ - - - - + + + +
@@ -143,7 +143,18 @@ import tagicon_2 from "@/assets/zixun/tagicon_2.png"; import LoginPopup from "@/components/loginPopup/index.vue"; import { Session } from "@/utils/storage"; -import { getindustryCount, getConceptCount, getTopNews, getTopIndustry_d, getTopConcept_d, getNews_cnt_d, newsInfoScore } from "@/api/newsInfo"; +import { + getindustryCount, + getConceptCount, + getTopNews, + getTopIndustry_d, + getTopConcept_d, + getNews_cnt_d, + newsInfoScore, + getTopConceptPeriod, + getTopIndustryPeriod, + getTopSourcePeriod, +} from "@/api/newsInfo"; import countTo from "@/components/count-to/vue-countTo.vue"; import RankList from "@/components/RankList.vue"; // 路径根据实际调整 import InfoSummary from "@/components/InfoSummary.vue"; // 路径根据实际调整 @@ -268,6 +279,36 @@ function loginOut() { const lineTabIndex = ref(0); function handleTabClick(index) { lineTabIndex.value = index; + getLineDataFn(); +} + +const lineTopData = ref({}); +async function getLineDataFn() { + if (lineTabIndex.value == 0) { + getTopConceptPeriod({ + start_time: "2025-09-06", + end_time: "2025-09-13", + limit_num: 10, + }).then((res) => { + lineTopData.value = res; + }); + } else if (lineTabIndex.value == 1) { + getTopIndustryPeriod({ + start_time: "2025-09-06", + end_time: "2025-09-13", + limit_num: 10, + }).then((res) => { + lineTopData.value = res; + }); + } else if (lineTabIndex.value == 2) { + getTopSourcePeriod({ + start_time: "2025-09-06", + end_time: "2025-09-13", + limit_num: 10, + }).then((res) => { + lineTopData.value = res; + }); + } } function goSreach() { @@ -290,6 +331,8 @@ onMounted(async () => { if (!Session.get("token")) { LoginShow.value = true; } + + getLineDataFn(); });