zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新页面

Browse Source
This commit is contained in:
Esacpe
2025-09-20 17:29:35 +08:00
parent 9f503c7069
commit c565736d49
26 changed files with 1398 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
src/views/home/echarts/barHatEcharts.vue
View File

@ -4,33 +4,180 @@
<script setup>
import * as echarts from "echarts";
import { nextTick , onMounted, watch, defineProps } from "vue";
import { nextTick, onMounted, onUnmounted, watch, defineProps, ref } from "vue";
const props = defineProps({
echartsId:{
type:String,
default:'barHatId'
echartsId: {
type: String,
default: 'barHatId'
},
data:{
type:Object,
default:{
data: {
type: Object,
default: {
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
list:[
{ name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
{ name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
list: [
{ name: "总数", value: [10,20,30,40,50,60,70], color:['rgba(0,244,255,1)','rgba(0,77,167,1)'], hatColor:'#087df9'},
{ name: "已处置", value: [10,20,30,40,50,60,70], color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'], hatColor:'#00FFFF'},
],
}
},
// 新增：是否启用自动循环展示提示框
autoTooltip: {
type: Boolean,
default: true
},
// 新增：提示框循环间隔时间（毫秒）
tooltipInterval: {
type: Number,
default: 2000
},
// 新增：鼠标悬停时是否暂停循环
pauseOnHover: {
type: Boolean,
default: true
}
});
watch(()=>props.data,val=>{
nextTick(()=>{ handleDate() })
},{immediate:true,deep:true})
// 响应式变量
const myChart = ref(null);
const tooltipTimer = ref(null);
const currentTooltipIndex = ref(0);
const isPaused = ref(false);
watch(() => props.data, val => {
nextTick(() => { handleDate() })
}, { immediate: true, deep: true })
// 启动自动循环展示提示框
function startAutoTooltip() {
// 详细的条件检查和日志
if (!props.autoTooltip) {
console.log('自动提示框未启动 - autoTooltip为false');
return;
}
if (!props.data) {
console.warn('自动提示框未启动 - 缺少数据');
return;
}
if (!props.data.xDate || props.data.xDate.length === 0) {
console.warn('自动提示框未启动 - xDate数据为空');
return;
}
if (!props.data.list || props.data.list.length === 0) {
console.warn('自动提示框未启动 - list数据为空');
return;
}
if (!myChart.value) {
console.warn('自动提示框未启动 - 图表实例不存在');
return;
}
// 清除之前的定时器
stopAutoTooltip();
const dataLength = props.data.xDate.length;
currentTooltipIndex.value = 0;
console.log(`开始自动提示框循环 - 数据长度: ${dataLength}, 间隔: ${props.tooltipInterval}ms`);
console.log('数据预览:', {
xDate: props.data.xDate.slice(0, 3),
listCount: props.data.list.length,
firstSeriesName: props.data.list[0]?.name,
firstSeriesValueCount: props.data.list[0]?.value?.length
});
tooltipTimer.value = setInterval(() => {
try {
// 检查图表实例是否仍然存在
if (!myChart.value) {
console.error('图表实例丢失，停止自动提示框');
stopAutoTooltip();
return;
}
// 检查是否暂停
if (isPaused.value) {
console.log('提示框循环已暂停');
return;
}
// 先隐藏当前提示框
myChart.value.dispatchAction({
type: 'hideTip'
});
// 延迟一点时间再显示新的提示框，确保动画效果
setTimeout(() => {
if (myChart.value && !isPaused.value) {
try {
// 获取当前数据点信息
const currentData = props.data.xDate[currentTooltipIndex.value];
const currentValues = props.data.list.map(series => series.value[currentTooltipIndex.value]);
// 验证数据有效性
if (currentData === undefined) {
console.error(`数据索引 ${currentTooltipIndex.value} 超出范围`);
stopAutoTooltip();
return;
}
// 显示当前索引的提示框 - 使用第一个系列
myChart.value.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentTooltipIndex.value
});
console.log(`✓ 显示提示框 [${currentTooltipIndex.value}/${dataLength-1}] - ${currentData}:`, currentValues);
} catch (error) {
console.error('显示提示框时出错:', error);
// 如果出错，尝试停止循环避免持续错误
stopAutoTooltip();
}
}
}, 100);
// 更新索引，循环展示
currentTooltipIndex.value = (currentTooltipIndex.value + 1) % dataLength;
} catch (error) {
console.error('自动提示框循环出错:', error);
stopAutoTooltip();
}
}, props.tooltipInterval);
console.log(`✓ 自动提示框已启动 - 间隔: ${props.tooltipInterval}ms, 数据长度: ${dataLength}`);
}
// 停止自动循环展示提示框
function stopAutoTooltip() {
if (tooltipTimer.value) {
clearInterval(tooltipTimer.value);
tooltipTimer.value = null;
console.log('自动提示框已停止');
}
}
// 暂停自动循环
function pauseAutoTooltip() {
isPaused.value = true;
console.log('自动提示框已暂停');
}
// 恢复自动循环
function resumeAutoTooltip() {
isPaused.value = false;
console.log('自动提示框已恢复');
}
// 处理数据
function handleDate() {
let xDate = props.data.xDate;
let legend = props.data.list.map(v=>{return {name:v.name}})
let series = props.data.list.map((item,i)=>{
let legend = props.data.list.map(v => { return { name: v.name } })
let series = props.data.list.map((item, i) => {
let obj = {
name: item.name,
type: "bar",
@ -38,15 +185,15 @@ function handleDate() {
barWidth: "10px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0,0,0,1,[
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
{ offset: 1, color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
{ offset: 1, color: item.color ? item.color[1] : "rgba(0,77,167,1)" }], false),
}
},
markPoint: {
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
symbolSize: [11, 4], // 设置扁圆的宽和高
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
data: item.value.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj + 0 // 柱子的值加上一些偏移量
@ -55,11 +202,11 @@ function handleDate() {
}
return obj
})
lineChartFn(xDate,legend,series)
lineChartFn(xDate, legend, series)
}
function lineChartFn(xDate,legend,series) {
var myChart = echarts.init(document.getElementById(props.echartsId));
function lineChartFn(xDate, legend, series) {
myChart.value = echarts.init(document.getElementById(props.echartsId));
var option = {
legend: {
type: "plain",
@ -69,9 +216,59 @@ function lineChartFn(xDate,legend,series) {
data: legend
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
trigger: "item",
backgroundColor: 'rgba(0, 0, 0, 0.9)',
borderColor: '#00d4ff',
borderWidth: 2,
borderRadius: 8,
textStyle: {
color: '#fff',
fontSize: 13,
fontWeight: 'normal'
},
formatter: function(params) {
// 获取当前数据点的所有系列信息
const dataIndex = params.dataIndex;
const categoryName = params.name;
let result = `<div style="margin-bottom: 8px; font-weight: bold; color: #00d4ff; font-size: 14px; border-bottom: 1px solid #00d4ff; padding-bottom: 4px;">${categoryName}</div>`;
// 遍历所有系列，显示该数据点的所有信息
if (props.data && props.data.list) {
props.data.list.forEach((seriesData, index) => {
const value = seriesData.value[dataIndex];
const color = seriesData.color ? seriesData.color[0] : '#00d4ff';
result += `<div style="margin: 4px 0; display: flex; align-items: center;">
<span style="display: inline-block; width: 12px; height: 12px; background: ${color}; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255,255,255,0.3);"></span>
<span style="color: #fff; margin-right: 8px; min-width: 60px;">${seriesData.name}:</span>
<span style="color: #00d4ff; font-weight: bold; font-size: 14px;">${value}</span>
</div>`;
});
}
return result;
},
// 确保提示框能够正确显示
confine: true,
// 添加动画效果
transitionDuration: 0.2,
// 设置提示框位置
position: function (point, params, dom, rect, size) {
// 计算提示框位置，避免超出边界
let x = point[0] + 15;
let y = point[1] - 10;
// 如果右侧空间不够，显示在左侧
if (x + size.contentSize[0] > size.viewSize[0]) {
x = point[0] - size.contentSize[0] - 15;
}
// 如果上方空间不够，显示在下方
if (y < 0) {
y = point[1] + 20;
}
return [x, y];
}
},
grid: {
@ -120,13 +317,46 @@ function lineChartFn(xDate,legend,series) {
],
series: series
};
option && myChart.setOption(option);
window.onresize = function () { myChart.resize(); };
document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
option && myChart.value.setOption(option);
// 添加鼠标事件监听
if (props.pauseOnHover) {
myChart.value.on('mouseover', () => {
pauseAutoTooltip();
});
myChart.value.on('mouseout', () => {
resumeAutoTooltip();
});
}
// 启动自动循环展示
if (props.autoTooltip) {
setTimeout(() => {
startAutoTooltip();
}, 1000); // 延迟1秒启动，确保图表完全渲染
}
window.onresize = function () {
if (myChart.value) {
myChart.value.resize();
}
};
}
onMounted(() => {
lineChartFn();
});
// 组件卸载时清理定时器
onUnmounted(() => {
stopAutoTooltip();
if (myChart.value) {
myChart.value.dispose();
myChart.value = null;
}
});
</script>
<style lang="scss" scoped>