326 lines
8.3 KiB
Vue
326 lines
8.3 KiB
Vue
<template>
|
||
<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="" />
|
||
<span>{{ chartName }}</span>
|
||
</div>
|
||
<div class="container" :id="chartId"></div>
|
||
<div class="slider-container">
|
||
<div
|
||
class="sliding-block"
|
||
:style="{ left: `${sliderLeft}px` }"
|
||
@mousedown="onMouseDown"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, onMounted, onBeforeUnmount, ref, computed } from "vue"
|
||
import * as echarts from "echarts"
|
||
|
||
let chartInstance = null
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
chartData: {
|
||
type: Object,
|
||
default: ""
|
||
},
|
||
chartName: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
moduleName: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
})
|
||
|
||
// 生成唯一ID，避免多个实例冲突
|
||
const chartId = computed(() => `group-chart-${Math.random().toString(36).substring(2, 9)}`)
|
||
|
||
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)
|
||
}
|
||
|
||
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
|
||
|
||
// 计算当前滑块对应的x轴索引
|
||
const percent = newLeft / (sliderContainerWidth.value - sliderWidth)
|
||
const xIndex = Math.floor(percent * (props.chartData.xAxisData.length - 1))
|
||
|
||
// 调用ECharts显示tooltip
|
||
if (chartInstance) {
|
||
chartInstance.dispatchAction({
|
||
type: "showTip",
|
||
seriesIndex: 0, // 只显示第一个系列的tooltip
|
||
dataIndex: xIndex
|
||
})
|
||
}
|
||
}
|
||
|
||
const 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) => item.name)
|
||
const option = {
|
||
tooltip: {
|
||
trigger: "axis"
|
||
},
|
||
legend: {
|
||
data: legendData,
|
||
itemStyle: {
|
||
// color: "#fff"
|
||
},
|
||
right: 5, // 距离右侧 10px
|
||
top: 15,
|
||
itemWidth: 10, // 图例图标的宽度
|
||
itemHeight: 10, // 图例图标的高度
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
icon: "circle" // 使用圆形图标
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(0,0,0,0)", // 透明背景
|
||
borderColor: "rgba(0,0,0,0)", // 透明边框
|
||
borderWidth: 0,
|
||
extraCssText: "box-shadow:none;padding:0;",
|
||
formatter: function (params) {
|
||
let color = {
|
||
头部自媒体: "#33b6fb",
|
||
官方媒体: "#00d6da",
|
||
普通自媒体: "#fddc33"
|
||
};
|
||
// 根据传入的值来判断使用的图例颜色
|
||
switch(props.moduleName) {
|
||
case "全局群体成员演化图":
|
||
color = {
|
||
分裂总数: "#2AB8FD",
|
||
合并总数: "#02D7DA",
|
||
收缩指数: "#FFDA09",
|
||
扩展指数: "#EB57B0"
|
||
}
|
||
break;
|
||
case "群体规模演化图":
|
||
color = {
|
||
头部自媒体: "#33b6fb",
|
||
官方媒体: "#00d6da",
|
||
普通自媒体: "#fddc33"
|
||
}
|
||
break;
|
||
case "全局异常互动时刻表":
|
||
color = {
|
||
社团组一: "#2AB8FD",
|
||
社团组二: "#02D7DA",
|
||
社团组三: "#FFDA09"
|
||
}
|
||
break;
|
||
default:
|
||
color = {
|
||
头部自媒体: "#33b6fb",
|
||
官方媒体: "#00d6da",
|
||
普通自媒体: "#fddc33"
|
||
}
|
||
}
|
||
|
||
const listHtml = params
|
||
.map(
|
||
(item) => `
|
||
<div style="
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
width:100%;
|
||
height:30px;
|
||
border-radius:4px;
|
||
background:rgba(204,250,255,0.2);
|
||
margin-bottom:6px;
|
||
padding:0 8px;
|
||
color:#fff;
|
||
font-size:12px;
|
||
">
|
||
<p style="width:10px;height:10px;border-radius:50%;background-color:${color[item.seriesName]}"></p>
|
||
<span>${item.seriesName}</span>
|
||
<span style="
|
||
color: #fff;
|
||
text-align: right;
|
||
font-family: MiSans;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
">${item.value}</span>
|
||
</div>
|
||
`
|
||
)
|
||
.join("")
|
||
return `
|
||
<div style="
|
||
width:150px;
|
||
border-radius:6px;
|
||
background:linear-gradient(304deg, rgba(28,103,175,0.3) -6.04%, rgba(2,95,137,0.3) 85.2%);
|
||
backdrop-filter:blur(4px);
|
||
padding:10px;
|
||
">
|
||
${listHtml}
|
||
</div>
|
||
`
|
||
}
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
top: "30%",
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: true,
|
||
data: props.chartData.xAxisData,
|
||
axisLabel: {
|
||
color: "#94C1EC",
|
||
interval: 0
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
name: "数量",
|
||
max: props.chartData.yAxisRange.max,
|
||
min: props.chartData.yAxisRange.min,
|
||
interval: props.chartData.yAxisRange.interval,
|
||
nameTextStyle: {
|
||
color: "#B6D6F7",
|
||
fontSize: 13,
|
||
align: "left",
|
||
padding: [0, 0, 5, -28] // 负值让文字更靠左
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#94C1EC"
|
||
}
|
||
},
|
||
type: "value",
|
||
splitLine: {
|
||
show: true, // 是否显示分割线
|
||
lineStyle: {
|
||
color: ["rgba(57, 69, 106, 0.86)"], // 分割线颜色，可以使用数组实现交替颜色
|
||
width: 1, // 分割线宽度
|
||
type: "dotted" // 分割线类型
|
||
}
|
||
}
|
||
},
|
||
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()
|
||
// 获取容器宽度
|
||
sliderContainerWidth.value = document.querySelector(".slider-container").offsetWidth
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
// 销毁图表实例，避免内存泄漏
|
||
if (chartInstance) {
|
||
chartInstance.dispose()
|
||
chartInstance = null
|
||
}
|
||
document.removeEventListener("mousemove", onMouseMove)
|
||
document.removeEventListener("mouseup", onMouseUp)
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.groupChart-component {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 10px 10px;
|
||
.title {
|
||
margin-top: -18px;
|
||
margin-left: -12px;
|
||
}
|
||
.chart-name {
|
||
margin-left: -8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
}
|
||
.container {
|
||
top: -19px;
|
||
width: 100%;
|
||
height: 180px;
|
||
}
|
||
.slider-container {
|
||
width: 100%;
|
||
height: 4px;
|
||
border-radius: 20px;
|
||
background: linear-gradient(270deg, rgba(0, 82, 125, 0.48) 0%, rgba(0, 200, 255, 0.23) 100%);
|
||
backdrop-filter: blur(3px);
|
||
margin-top: -10px;
|
||
position: relative;
|
||
.sliding-block {
|
||
width: 24px;
|
||
height: 8px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(270deg, #00527d 0%, #00c8ff 100%);
|
||
backdrop-filter: blur(3px);
|
||
position: absolute;
|
||
top: -2px;
|
||
left: 25px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
</style>
|