修改群体烟花分析图表样式
This commit is contained in:
qumeng039@126.com
parent
5cf9e0c4ec
commit
0b728495e8
|
|
@ -1,5 +1,4 @@
|
|||
import { defineStore } from "pinia"
|
||||
import testAvatar from "@/assets/images/leader/chenchen.png"
|
||||
import nodePrefix from "@/assets/images/groupEvolution/node-prefix.png"
|
||||
import edgePrefix from "@/assets/images/groupEvolution/edge-prefix.png"
|
||||
import splitImg from "@/assets/images/groupMember/splitImg.png"
|
||||
|
|
@ -13,46 +12,28 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
|
|||
{
|
||||
id: 1,
|
||||
type: "群体一",
|
||||
title: "关注话题：#中国海警首次登检菲律宾运补船只#",
|
||||
statistics: [
|
||||
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
|
||||
{ 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,
|
||||
type: "群体二",
|
||||
title: "关注话题：#外交部回应中国海警缴获菲律宾士111111.",
|
||||
statistics: [
|
||||
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
|
||||
{ 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,
|
||||
type: "群体三",
|
||||
title: "关注话题：#美军机在南海盘旋并投放不明物体#",
|
||||
statistics: [
|
||||
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
|
||||
{ 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: [
|
||||
{
|
||||
name: "头部自媒体",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
color: "#33b6fb",
|
||||
width: 1 // 设置线条宽度为3像素
|
||||
},
|
||||
symbolSize: 10, // 圆点大小
|
||||
borderWidth: 1, // 边框宽度
|
||||
themeColor: "#32b6fb",
|
||||
data: [200, 300, 330, 400, 380]
|
||||
},
|
||||
{
|
||||
name: "官方媒体",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#00d6da" // 折线颜色
|
||||
},
|
||||
symbolSize: 10, // 圆点大小
|
||||
borderWidth: 1, // 边框宽度
|
||||
themeColor: "#00d6da",
|
||||
data: [100, 200, 230, 300, 280]
|
||||
},
|
||||
{
|
||||
name: "普通自媒体",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#fddc33" // 折线颜色
|
||||
},
|
||||
symbolSize: 10, // 圆点大小
|
||||
borderWidth: 1, // 边框宽度
|
||||
themeColor: "#fddc33",
|
||||
data: [300, 400, 430, 500, 480]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="groupChart-component">
|
||||
<img :src="title" alt="" class="title" v-if="title" />
|
||||
<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>
|
||||
</div>
|
||||
<div class="container" :id="chartId"></div>
|
||||
|
|
@ -17,10 +17,10 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted, onBeforeUnmount, ref, computed } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { defineProps, onMounted, onBeforeUnmount, ref, computed } from "vue"
|
||||
import * as echarts from "echarts"
|
||||
|
||||
let chartInstance = null;
|
||||
let chartInstance = null
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
|
|
@ -34,36 +34,36 @@ const props = defineProps({
|
|||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// 生成唯一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 sliderWidth = 24; // 滑块宽度
|
||||
const sliderContainerWidth = ref(0); // 容器宽度
|
||||
let isDragging = false;
|
||||
let startX = 0;
|
||||
let startLeft = 0;
|
||||
const sliderLeft = ref(50) // 滑块初始left
|
||||
const sliderWidth = 24 // 滑块宽度
|
||||
const sliderContainerWidth = ref(0) // 容器宽度
|
||||
let isDragging = false
|
||||
let startX = 0
|
||||
let startLeft = 0
|
||||
|
||||
const onMouseDown = (e) => {
|
||||
isDragging = true;
|
||||
startX = e.clientX;
|
||||
startLeft = sliderLeft.value;
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
};
|
||||
isDragging = true
|
||||
startX = e.clientX
|
||||
startLeft = sliderLeft.value
|
||||
document.addEventListener("mousemove", onMouseMove)
|
||||
document.addEventListener("mouseup", onMouseUp)
|
||||
}
|
||||
|
||||
const onMouseMove = (e) => {
|
||||
if (!isDragging) return;
|
||||
const deltaX = e.clientX - startX;
|
||||
let newLeft = startLeft + deltaX;
|
||||
newLeft = Math.max(0, Math.min(newLeft, sliderContainerWidth.value - sliderWidth));
|
||||
sliderLeft.value = newLeft;
|
||||
if (!isDragging) return
|
||||
const deltaX = e.clientX - startX
|
||||
let newLeft = startLeft + deltaX
|
||||
newLeft = Math.max(0, Math.min(newLeft, sliderContainerWidth.value - sliderWidth))
|
||||
sliderLeft.value = newLeft
|
||||
|
||||
// 计算当前滑块对应的x轴索引
|
||||
const percent = newLeft / (sliderContainerWidth.value - sliderWidth);
|
||||
const xIndex = Math.round(percent * (props.chartData.xAxisData.length - 1));
|
||||
const percent = newLeft / (sliderContainerWidth.value - sliderWidth)
|
||||
const xIndex = Math.floor(percent * (props.chartData.xAxisData.length - 1))
|
||||
|
||||
// 调用ECharts显示tooltip
|
||||
if (chartInstance) {
|
||||
|
|
@ -71,24 +71,20 @@ const onMouseMove = (e) => {
|
|||
type: "showTip",
|
||||
seriesIndex: 0, // 只显示第一个系列的tooltip
|
||||
dataIndex: xIndex
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseUp = () => {
|
||||
isDragging = false;
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
};
|
||||
isDragging = false
|
||||
document.removeEventListener("mousemove", onMouseMove)
|
||||
document.removeEventListener("mouseup", onMouseUp)
|
||||
}
|
||||
|
||||
const initChart = () => {
|
||||
// 使用唯一ID初始化图表
|
||||
chartInstance = echarts.init(document.getElementById(chartId.value));
|
||||
const legendData = props.chartData.seriesList.map((item) => ({
|
||||
name: item.name,
|
||||
icon: "circle"
|
||||
}));
|
||||
|
||||
chartInstance = echarts.init(document.getElementById(chartId.value))
|
||||
const legendData = props.chartData.seriesList.map((item) => item.name)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
|
|
@ -99,7 +95,8 @@ const initChart = () => {
|
|||
top: 13,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
icon: "circle" // 使用圆形图标
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -112,7 +109,7 @@ const initChart = () => {
|
|||
头部自媒体: "#33b6fb",
|
||||
官方媒体: "#00d6da",
|
||||
普通自媒体: "#fddc33"
|
||||
};
|
||||
}
|
||||
const listHtml = params
|
||||
.map(
|
||||
(item) => `
|
||||
|
|
@ -143,7 +140,7 @@ const initChart = () => {
|
|||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
.join("")
|
||||
return `
|
||||
<div style="
|
||||
width:150px;
|
||||
|
|
@ -154,7 +151,7 @@ const initChart = () => {
|
|||
">
|
||||
${listHtml}
|
||||
</div>
|
||||
`;
|
||||
`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -166,12 +163,14 @@ const initChart = () => {
|
|||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
boundaryGap: true,
|
||||
data: props.chartData.xAxisData,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#94C1EC"
|
||||
}
|
||||
color: "#94C1EC",
|
||||
interval: 0
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
|
|
@ -200,26 +199,41 @@ const initChart = () => {
|
|||
}
|
||||
}
|
||||
},
|
||||
series: props.chartData.seriesList
|
||||
};
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
series: props.chartData.seriesList.map((series) => ({
|
||||
...series,
|
||||
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(() => {
|
||||
initChart();
|
||||
initChart()
|
||||
// 获取容器宽度
|
||||
sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth;
|
||||
});
|
||||
sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 销毁图表实例，避免内存泄漏
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
chartInstance.dispose()
|
||||
chartInstance = null
|
||||
}
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
});
|
||||
document.removeEventListener("mousemove", onMouseMove)
|
||||
document.removeEventListener("mouseup", onMouseUp)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
alt=""
|
||||
/>
|
||||
<div class="group-item-title-type">{{ group.type }}</div>
|
||||
<div class="title-content">{{ group.title }}</div>
|
||||
</div>
|
||||
|
||||
<div class="group-item-statistics">
|
||||
<div class="statistics-item" v-for="statistic in group.statistics" :key="statistic.id">
|
||||
<img :src="statistic.iconImg" alt="" class="sta-prefix" />
|
||||
|
|
@ -77,13 +79,25 @@ const props = defineProps({
|
|||
left: 8px;
|
||||
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 {
|
||||
width: 80%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
.statistics-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -16,16 +16,16 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { defineProps, onMounted } from "vue"
|
||||
import * as echarts from "echarts"
|
||||
const chartTitleList = [
|
||||
{ id: 1, name: "头部自媒体 增量速率" },
|
||||
{ id: 2, name: "官方媒体 增量速率" },
|
||||
{ id: 3, name: "普通自媒体 增量速率" }
|
||||
];
|
||||
let chartInstance1 = null;
|
||||
let chartInstance2 = null;
|
||||
let chartInstance3 = null;
|
||||
]
|
||||
let chartInstance1 = null
|
||||
let chartInstance2 = null
|
||||
let chartInstance3 = null
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
|
|
@ -35,14 +35,14 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const optionHandle = ({ xAxis, yAxis, data }, flag) => {
|
||||
const lineColors = {
|
||||
"头部自媒体 增量速率": "#2AB8FD",
|
||||
"官方媒体 增量速率": "#01D7DA",
|
||||
"普通自媒体 增量速率": "#FFDA09"
|
||||
};
|
||||
}
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
|
|
@ -56,12 +56,15 @@ const optionHandle = ({ xAxis, yAxis, data }, flag) => {
|
|||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
boundaryGap: true,
|
||||
data: xAxis,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#94C1EC"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
|
|
@ -95,29 +98,35 @@ const optionHandle = ({ xAxis, yAxis, data }, flag) => {
|
|||
type: "line",
|
||||
stack: "Total",
|
||||
symbolSize: 10, // 圆点大小
|
||||
borderWidth: 1, // 边框宽度
|
||||
symbol: "circle",
|
||||
color: lineColors[flag],
|
||||
lineStyle: {
|
||||
color: lineColors[flag],
|
||||
width: 1 // 设置线条宽度为3像素
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#061a2f",
|
||||
borderColor: lineColors[flag], // 使用线条颜色作为边框色
|
||||
borderWidth: 1
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const initCharts = () => {
|
||||
chartInstance1 = echarts.init(document.getElementById("container1"));
|
||||
chartInstance2 = echarts.init(document.getElementById("container2"));
|
||||
chartInstance3 = echarts.init(document.getElementById("container3"));
|
||||
chartInstance1.setOption(optionHandle(props.chartsData.topSelfMedia, "头部自媒体 增量速率"));
|
||||
chartInstance2.setOption(optionHandle(props.chartsData.officialMedia, "官方媒体 增量速率"));
|
||||
chartInstance3.setOption(optionHandle(props.chartsData.ordinaryMedia, "普通自媒体 增量速率"));
|
||||
};
|
||||
chartInstance1 = echarts.init(document.getElementById("container1"))
|
||||
chartInstance2 = echarts.init(document.getElementById("container2"))
|
||||
chartInstance3 = echarts.init(document.getElementById("container3"))
|
||||
chartInstance1.setOption(optionHandle(props.chartsData.topSelfMedia, "头部自媒体 增量速率"))
|
||||
chartInstance2.setOption(optionHandle(props.chartsData.officialMedia, "官方媒体 增量速率"))
|
||||
chartInstance3.setOption(optionHandle(props.chartsData.ordinaryMedia, "普通自媒体 增量速率"))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
});
|
||||
initCharts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
|
|||
|
|
@ -91,7 +91,6 @@ const initTopicChart = () => {
|
|||
fontSize: 12
|
||||
},
|
||||
axisLabel: {
|
||||
// margin:15,
|
||||
textStyle: {
|
||||
color: "#a8aab0",
|
||||
fontStyle: "normal",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user