duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改群体烟花分析图表样式

Browse Source
This commit is contained in:
qumeng039@126.com 2025-08-04 16:18:13 +08:00
parent 5cf9e0c4ec
commit 0b728495e8
5 changed files with 122 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/store/groupEvolution/index.js
View File

@ -1,5 +1,4 @@
import { defineStore } from "pinia" import { defineStore } from "pinia"
import testAvatar from "@/assets/images/leader/chenchen.png"
import nodePrefix from "@/assets/images/groupEvolution/node-prefix.png" import nodePrefix from "@/assets/images/groupEvolution/node-prefix.png"
import edgePrefix from "@/assets/images/groupEvolution/edge-prefix.png" import edgePrefix from "@/assets/images/groupEvolution/edge-prefix.png"
import splitImg from "@/assets/images/groupMember/splitImg.png" import splitImg from "@/assets/images/groupMember/splitImg.png"
@ -13,46 +12,28 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
{ {
id: 1, id: 1,
type: "群体一", type: "群体一",
title: "关注话题：#中国海警首次登检菲律宾运补船只#",
statistics: [ statistics: [
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 }, { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
{ id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 } { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
],
mediaList: [
{ id: 1, name: "胡锡进", avatar: testAvatar },
{ id: 2, name: "胡锡进", avatar: testAvatar },
{ id: 3, name: "胡锡进", avatar: testAvatar },
{ id: 4, name: "胡锡进", avatar: testAvatar },
{ id: 5, name: "胡锡进", avatar: testAvatar }
] ]
}, },
{ {
id: 2, id: 2,
type: "群体二", type: "群体二",
title: "关注话题：#外交部回应中国海警缴获菲律宾士111111.",
statistics: [ statistics: [
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 }, { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
{ id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 } { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
],
mediaList: [
{ id: 1, name: "胡锡进", avatar: testAvatar },
{ id: 2, name: "胡锡进", avatar: testAvatar },
{ id: 3, name: "胡锡进", avatar: testAvatar },
{ id: 4, name: "胡锡进", avatar: testAvatar },
{ id: 5, name: "胡锡进", avatar: testAvatar }
] ]
}, },
{ {
id: 3, id: 3,
type: "群体三", type: "群体三",
title: "关注话题：#美军机在南海盘旋并投放不明物体#",
statistics: [ statistics: [
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 }, { id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
{ id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 } { id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
],
mediaList: [
{ id: 1, name: "胡锡进", avatar: testAvatar },
{ id: 2, name: "胡锡进", avatar: testAvatar },
{ id: 3, name: "胡锡进", avatar: testAvatar },
{ id: 4, name: "胡锡进", avatar: testAvatar },
{ id: 5, name: "胡锡进", avatar: testAvatar }
] ]
} }
], ],
@ -62,35 +43,17 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
seriesList: [ seriesList: [
{ {
name: "头部自媒体", name: "头部自媒体",
type: "line", themeColor: "#32b6fb",
lineStyle: {
color: "#33b6fb",
width: 1 // 设置线条宽度为3像素
},
symbolSize: 10, // 圆点大小
borderWidth: 1, // 边框宽度
data: [200, 300, 330, 400, 380] data: [200, 300, 330, 400, 380]
}, },
{ {
name: "官方媒体", name: "官方媒体",
type: "line", themeColor: "#00d6da",
lineStyle: {
width: 1,
color: "#00d6da" // 折线颜色
},
symbolSize: 10, // 圆点大小
borderWidth: 1, // 边框宽度
data: [100, 200, 230, 300, 280] data: [100, 200, 230, 300, 280]
}, },
{ {
name: "普通自媒体", name: "普通自媒体",
type: "line", themeColor: "#fddc33",
lineStyle: {
width: 1,
color: "#fddc33" // 折线颜色
},
symbolSize: 10, // 圆点大小
borderWidth: 1, // 边框宽度
data: [300, 400, 430, 500, 480] data: [300, 400, 430, 500, 480]
} }
] ]

128
src/views/GroupEvolution/component/groupChart.vue
View File

@ -2,7 +2,7 @@
<div class="groupChart-component"> <div class="groupChart-component">
<img :src="title" alt="" class="title" v-if="title" /> <img :src="title" alt="" class="title" v-if="title" />
<div class="chart-name" v-if="chartName"> <div class="chart-name" v-if="chartName">
<img class="name-icon" src="@/assets/images/groupEvolution/chart-name-icon.png" alt=""> <img class="name-icon" src="@/assets/images/groupEvolution/chart-name-icon.png" alt="" />
<span>{{ chartName }}</span> <span>{{ chartName }}</span>
</div> </div>
<div class="container" :id="chartId"></div> <div class="container" :id="chartId"></div>
@ -17,10 +17,10 @@
</template> </template>
<script setup> <script setup>
import { defineProps, onMounted, onBeforeUnmount, ref, computed } from "vue"; import { defineProps, onMounted, onBeforeUnmount, ref, computed } from "vue"
import * as echarts from "echarts"; import * as echarts from "echarts"
let chartInstance = null; let chartInstance = null
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
@ -34,36 +34,36 @@ const props = defineProps({
type: String, type: String,
default: "" default: ""
} }
}); })
// 生成唯一ID，避免多个实例冲突 // 生成唯一ID，避免多个实例冲突
const chartId = computed(() => `group-chart-${Math.random().toString(36).substring(2, 9)}`); const chartId = computed(() => `group-chart-${Math.random().toString(36).substring(2, 9)}`)
const sliderLeft = ref(25); // 滑块初始left const sliderLeft = ref(50) // 滑块初始left
const sliderWidth = 24; // 滑块宽度 const sliderWidth = 24 // 滑块宽度
const sliderContainerWidth = ref(0); // 容器宽度 const sliderContainerWidth = ref(0) // 容器宽度
let isDragging = false; let isDragging = false
let startX = 0; let startX = 0
let startLeft = 0; let startLeft = 0
const onMouseDown = (e) => { const onMouseDown = (e) => {
isDragging = true; isDragging = true
startX = e.clientX; startX = e.clientX
startLeft = sliderLeft.value; startLeft = sliderLeft.value
document.addEventListener("mousemove", onMouseMove); document.addEventListener("mousemove", onMouseMove)
document.addEventListener("mouseup", onMouseUp); document.addEventListener("mouseup", onMouseUp)
}; }
const onMouseMove = (e) => { const onMouseMove = (e) => {
if (!isDragging) return; if (!isDragging) return
const deltaX = e.clientX - startX; const deltaX = e.clientX - startX
let newLeft = startLeft + deltaX; let newLeft = startLeft + deltaX
newLeft = Math.max(0, Math.min(newLeft, sliderContainerWidth.value - sliderWidth)); newLeft = Math.max(0, Math.min(newLeft, sliderContainerWidth.value - sliderWidth))
sliderLeft.value = newLeft; sliderLeft.value = newLeft
// 计算当前滑块对应的x轴索引 // 计算当前滑块对应的x轴索引
const percent = newLeft / (sliderContainerWidth.value - sliderWidth); const percent = newLeft / (sliderContainerWidth.value - sliderWidth)
const xIndex = Math.round(percent * (props.chartData.xAxisData.length - 1)); const xIndex = Math.floor(percent * (props.chartData.xAxisData.length - 1))
// 调用ECharts显示tooltip // 调用ECharts显示tooltip
if (chartInstance) { if (chartInstance) {
@ -71,24 +71,20 @@ const onMouseMove = (e) => {
type: "showTip", type: "showTip",
seriesIndex: 0, // 只显示第一个系列的tooltip seriesIndex: 0, // 只显示第一个系列的tooltip
dataIndex: xIndex dataIndex: xIndex
}); })
} }
}; }
const onMouseUp = () => { const onMouseUp = () => {
isDragging = false; isDragging = false
document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mousemove", onMouseMove)
document.removeEventListener("mouseup", onMouseUp); document.removeEventListener("mouseup", onMouseUp)
}; }
const initChart = () => { const initChart = () => {
// 使用唯一ID初始化图表 // 使用唯一ID初始化图表
chartInstance = echarts.init(document.getElementById(chartId.value)); chartInstance = echarts.init(document.getElementById(chartId.value))
const legendData = props.chartData.seriesList.map((item) => ({ const legendData = props.chartData.seriesList.map((item) => item.name)
name: item.name,
icon: "circle"
}));
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis" trigger: "axis"
@ -99,7 +95,8 @@ const initChart = () => {
top: 13, top: 13,
textStyle: { textStyle: {
color: "#fff" color: "#fff"
} },
icon: "circle" // 使用圆形图标
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -112,7 +109,7 @@ const initChart = () => {
头部自媒体: "#33b6fb", 头部自媒体: "#33b6fb",
官方媒体: "#00d6da", 官方媒体: "#00d6da",
普通自媒体: "#fddc33" 普通自媒体: "#fddc33"
}; }
const listHtml = params const listHtml = params
.map( .map(
(item) => ` (item) => `
@ -143,7 +140,7 @@ const initChart = () => {
</div> </div>
` `
) )
.join(""); .join("")
return ` return `
<div style=" <div style="
width:150px; width:150px;
@ -154,7 +151,7 @@ const initChart = () => {
"> ">
${listHtml} ${listHtml}
</div> </div>
`; `
} }
}, },
grid: { grid: {
@ -166,12 +163,14 @@ const initChart = () => {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: true,
data: props.chartData.xAxisData, data: props.chartData.xAxisData,
axisLabel: { axisLabel: {
textStyle: { color: "#94C1EC",
color: "#94C1EC" interval: 0
} },
axisTick: {
show: false
} }
}, },
yAxis: { yAxis: {
@ -200,26 +199,41 @@ const initChart = () => {
} }
} }
}, },
series: props.chartData.seriesList series: props.chartData.seriesList.map((series) => ({
}; ...series,
chartInstance.setOption(option); type: "line",
}; itemStyle: {
color: "#061a2f",
borderColor: series.themeColor, // 使用线条颜色作为边框色
borderWidth: 2
},
symbol: "circle",
symbolSize: 10,
// 确保lineStyle存在
lineStyle: {
color: series.themeColor,
width: 1
}
}))
}
chartInstance.setOption(option)
}
onMounted(() => { onMounted(() => {
initChart(); initChart()
// 获取容器宽度 // 获取容器宽度
sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth; sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth
}); })
onBeforeUnmount(() => { onBeforeUnmount(() => {
// 销毁图表实例，避免内存泄漏 // 销毁图表实例，避免内存泄漏
if (chartInstance) { if (chartInstance) {
chartInstance.dispose(); chartInstance.dispose()
chartInstance = null; chartInstance = null
} }
document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mousemove", onMouseMove)
document.removeEventListener("mouseup", onMouseUp); document.removeEventListener("mouseup", onMouseUp)
}); })
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

16
src/views/GroupEvolution/component/groupPanel.vue
View File

@ -10,7 +10,9 @@
alt="" alt=""
/> />
<div class="group-item-title-type">{{ group.type }}</div> <div class="group-item-title-type">{{ group.type }}</div>
<div class="title-content">{{ group.title }}</div>
</div> </div>
<div class="group-item-statistics"> <div class="group-item-statistics">
<div class="statistics-item" v-for="statistic in group.statistics" :key="statistic.id"> <div class="statistics-item" v-for="statistic in group.statistics" :key="statistic.id">
<img :src="statistic.iconImg" alt="" class="sta-prefix" /> <img :src="statistic.iconImg" alt="" class="sta-prefix" />
@ -77,13 +79,25 @@ const props = defineProps({
left: 8px; left: 8px;
font-size: 14px; font-size: 14px;
} }
.title-content {
width: 100%;
color: #fff;
font-family: "PingFang SC";
font-size: 14px;
font-style: normal;
font-weight: 400;
margin-top: 10px;
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
} }
.group-item-statistics { .group-item-statistics {
width: 80%; width: 80%;
height: 40px; height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 10px;
.statistics-item { .statistics-item {
display: flex; display: flex;
align-items: center; align-items: center;

51
src/views/GroupEvolution/component/groupShow.vue
View File

@ -16,16 +16,16 @@
</template> </template>
<script setup> <script setup>
import { defineProps, onMounted } from "vue"; import { defineProps, onMounted } from "vue"
import * as echarts from "echarts"; import * as echarts from "echarts"
const chartTitleList = [ const chartTitleList = [
{ id: 1, name: "头部自媒体 增量速率" }, { id: 1, name: "头部自媒体 增量速率" },
{ id: 2, name: "官方媒体 增量速率" }, { id: 2, name: "官方媒体 增量速率" },
{ id: 3, name: "普通自媒体 增量速率" } { id: 3, name: "普通自媒体 增量速率" }
]; ]
let chartInstance1 = null; let chartInstance1 = null
let chartInstance2 = null; let chartInstance2 = null
let chartInstance3 = null; let chartInstance3 = null
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
@ -35,14 +35,14 @@ const props = defineProps({
type: Object, type: Object,
default: () => {} default: () => {}
} }
}); })
const optionHandle = ({ xAxis, yAxis, data }, flag) => { const optionHandle = ({ xAxis, yAxis, data }, flag) => {
const lineColors = { const lineColors = {
"头部自媒体 增量速率": "#2AB8FD", "头部自媒体 增量速率": "#2AB8FD",
"官方媒体 增量速率": "#01D7DA", "官方媒体 增量速率": "#01D7DA",
"普通自媒体 增量速率": "#FFDA09" "普通自媒体 增量速率": "#FFDA09"
}; }
return { return {
tooltip: { tooltip: {
trigger: "axis" trigger: "axis"
@ -56,12 +56,15 @@ const optionHandle = ({ xAxis, yAxis, data }, flag) => {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: true,
data: xAxis, data: xAxis,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#94C1EC" color: "#94C1EC"
} }
},
axisTick: {
show: false
} }
}, },
yAxis: { yAxis: {
@ -95,29 +98,35 @@ const optionHandle = ({ xAxis, yAxis, data }, flag) => {
type: "line", type: "line",
stack: "Total", stack: "Total",
symbolSize: 10, // 圆点大小 symbolSize: 10, // 圆点大小
borderWidth: 1, // 边框宽度 symbol: "circle",
color: lineColors[flag], color: lineColors[flag],
lineStyle: { lineStyle: {
color: lineColors[flag],
width: 1 // 设置线条宽度为3像素 width: 1 // 设置线条宽度为3像素
}, },
itemStyle: {
color: "#061a2f",
borderColor: lineColors[flag], // 使用线条颜色作为边框色
borderWidth: 1
},
data: data data: data
} }
] ]
}; }
}; }
const initCharts = () => { const initCharts = () => {
chartInstance1 = echarts.init(document.getElementById("container1")); chartInstance1 = echarts.init(document.getElementById("container1"))
chartInstance2 = echarts.init(document.getElementById("container2")); chartInstance2 = echarts.init(document.getElementById("container2"))
chartInstance3 = echarts.init(document.getElementById("container3")); chartInstance3 = echarts.init(document.getElementById("container3"))
chartInstance1.setOption(optionHandle(props.chartsData.topSelfMedia, "头部自媒体 增量速率")); chartInstance1.setOption(optionHandle(props.chartsData.topSelfMedia, "头部自媒体 增量速率"))
chartInstance2.setOption(optionHandle(props.chartsData.officialMedia, "官方媒体 增量速率")); chartInstance2.setOption(optionHandle(props.chartsData.officialMedia, "官方媒体 增量速率"))
chartInstance3.setOption(optionHandle(props.chartsData.ordinaryMedia, "普通自媒体 增量速率")); chartInstance3.setOption(optionHandle(props.chartsData.ordinaryMedia, "普通自媒体 增量速率"))
}; }
onMounted(() => { onMounted(() => {
initCharts(); initCharts()
}); })
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

1
src/views/keyNodeRecognition3/components/attentionTopic.vue
View File

@ -91,7 +91,6 @@ const initTopicChart = () => {
fontSize: 12 fontSize: 12
}, },
axisLabel: { axisLabel: {
// margin:15,
textStyle: { textStyle: {
color: "#a8aab0", color: "#a8aab0",
fontStyle: "normal", fontStyle: "normal",