修改了可视化大屏的显示问题
This commit is contained in:
parent
5294c003fb
commit
e661974160
@ -92,37 +92,25 @@ const initChart = async () => {
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '0%',
|
||||
top: 'middle',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
itemGap: 20,
|
||||
icon: 'circle',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
formatter: function(name) {
|
||||
return name
|
||||
}
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
radar: {
|
||||
center: ['65%', '50%'],
|
||||
radius: '60%',
|
||||
center: ['50%', '50%'],
|
||||
radius: '65%',
|
||||
indicator: [],
|
||||
shape: 'circle',
|
||||
splitNumber: 5,
|
||||
splitNumber: 8,
|
||||
axisName: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
width: 2,
|
||||
type: 'dashed',
|
||||
dashOffset: 0
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
@ -132,8 +120,9 @@ const initChart = async () => {
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -142,6 +131,27 @@ const initChart = async () => {
|
||||
|
||||
chart.setOption(option)
|
||||
|
||||
// 添加动画效果
|
||||
let angle = 0
|
||||
let dashOffset = 0
|
||||
const animate = () => {
|
||||
angle = (angle + 0.5) % 360
|
||||
dashOffset = (dashOffset + 1) % 20
|
||||
|
||||
chart.setOption({
|
||||
radar: {
|
||||
startAngle: angle,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
dashOffset: -dashOffset
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
requestAnimationFrame(animate)
|
||||
}
|
||||
animate()
|
||||
|
||||
// 确保图表正确渲染
|
||||
setTimeout(() => {
|
||||
if (chart) {
|
||||
@ -183,14 +193,18 @@ const updateChart = () => {
|
||||
// 生成系列数据
|
||||
const series = [{
|
||||
type: 'radar',
|
||||
animation: true,
|
||||
animationDuration: 2000,
|
||||
animationEasing: 'quadraticInOut',
|
||||
data: points.map(point => {
|
||||
const pointType = point.type
|
||||
const colors = {
|
||||
water: ['#409EFF', '#36CE9E'],
|
||||
air: ['#E6A23C', '#F56C6C'],
|
||||
soil: ['#67C23A', '#95D475']
|
||||
water: ['rgba(64, 158, 255, 1)', 'rgba(54, 206, 158, 0.1)'],
|
||||
air: ['rgba(230, 162, 60, 1)', 'rgba(245, 108, 108, 0.1)'],
|
||||
soil: ['rgba(103, 194, 58, 1)', 'rgba(149, 212, 117, 0.1)'],
|
||||
default: ['rgba(64, 158, 255, 1)', 'rgba(54, 206, 158, 0.1)']
|
||||
}
|
||||
const colorSet = colors[pointType] || colors.water
|
||||
const colorSet = colors[pointType] || colors.default
|
||||
|
||||
return {
|
||||
name: point.point,
|
||||
@ -198,27 +212,36 @@ const updateChart = () => {
|
||||
const ind = point.indicators.find(i => i.name === indicator.name)
|
||||
return ind ? ind.value : 0
|
||||
}),
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: colorSet[0]
|
||||
color: colorSet[0],
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
shadowColor: colorSet[0],
|
||||
shadowBlur: 10
|
||||
},
|
||||
lineStyle: {
|
||||
color: colorSet[0],
|
||||
width: 2,
|
||||
type: [5, 10],
|
||||
shadowColor: colorSet[0],
|
||||
shadowBlur: 5
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: colorSet[0] },
|
||||
{ offset: 1, color: colorSet[1] }
|
||||
]),
|
||||
opacity: 0.3
|
||||
opacity: 0.5
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 4
|
||||
scale: true,
|
||||
itemStyle: {
|
||||
shadowBlur: 20
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -226,14 +249,34 @@ const updateChart = () => {
|
||||
}]
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: points.map(item => item.point)
|
||||
},
|
||||
radar: {
|
||||
indicator: radarIndicators
|
||||
},
|
||||
series: series
|
||||
})
|
||||
|
||||
// 添加呼吸动画
|
||||
let breatheEffect = 0
|
||||
const animate = () => {
|
||||
breatheEffect = (breatheEffect + 1) % 100
|
||||
const opacity = 0.3 + Math.sin(breatheEffect * Math.PI / 50) * 0.2
|
||||
|
||||
series[0].data.forEach((item, index) => {
|
||||
chart.setOption({
|
||||
series: [{
|
||||
data: series[0].data.map((dataItem, i) => ({
|
||||
...dataItem,
|
||||
areaStyle: {
|
||||
...dataItem.areaStyle,
|
||||
opacity: i === index ? opacity : 0.3
|
||||
}
|
||||
}))
|
||||
}]
|
||||
})
|
||||
})
|
||||
requestAnimationFrame(animate)
|
||||
}
|
||||
animate()
|
||||
}
|
||||
|
||||
// 定时更新数据
|
||||
@ -369,6 +412,7 @@ onUnmounted(() => {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
|
||||
.chart {
|
||||
height: 100%;
|
||||
|
||||
@ -35,9 +35,9 @@ const initChart = async () => {
|
||||
},
|
||||
grid: {
|
||||
top: '3%',
|
||||
right: '5%',
|
||||
right: '15%',
|
||||
bottom: '3%',
|
||||
left: '15%',
|
||||
left: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@ -115,7 +115,7 @@ const fetchIndicatorData = async () => {
|
||||
try {
|
||||
const res = await getAlertStatisticsByIndicator()
|
||||
if (res.success && res.data) {
|
||||
// 将数据转换为图表所需格式
|
||||
// 将数据转换为图表所需格式，并限制显示数量为6个
|
||||
const chartData = res.data
|
||||
.filter(item => item.indicator_name)
|
||||
.map(item => ({
|
||||
@ -128,20 +128,45 @@ const fetchIndicatorData = async () => {
|
||||
}
|
||||
}))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
.slice(0, 6) // 只显示前6个数据
|
||||
|
||||
// 更新图表配置
|
||||
chart.setOption({
|
||||
grid: {
|
||||
top: '8%',
|
||||
right: '20%',
|
||||
bottom: '8%',
|
||||
left: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
data: chartData.map(item => item.name)
|
||||
data: chartData.map(item => item.name),
|
||||
axisLabel: {
|
||||
margin: 20,
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: chartData,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [0, 4, 4, 0]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
distance: 15,
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
formatter: '{c}次'
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: ['none', 'none'],
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
type: [5, 10]
|
||||
},
|
||||
data: [
|
||||
{
|
||||
@ -153,55 +178,77 @@ const fetchIndicatorData = async () => {
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
animationDelay: function(idx) {
|
||||
return idx * 100
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 添加渐变动画效果
|
||||
let currentIndex = 0
|
||||
const animate = () => {
|
||||
if (currentIndex >= chartData.length) {
|
||||
currentIndex = 0
|
||||
}
|
||||
|
||||
chart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
})
|
||||
|
||||
// 取消上一个高亮
|
||||
const lastIndex = (currentIndex - 1 + chartData.length) % chartData.length
|
||||
chart.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: lastIndex
|
||||
})
|
||||
|
||||
currentIndex++
|
||||
setTimeout(animate, 2000)
|
||||
}
|
||||
animate()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取指标预警统计数据失败:', error)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 获取指标颜色
|
||||
const getIndicatorColor = (indicatorName) => {
|
||||
const colors = {
|
||||
'水体pH值': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#36CFFF' },
|
||||
{ offset: 1, color: '#2861F5' }
|
||||
{ offset: 0, color: 'rgba(54, 207, 255, 1)' },
|
||||
{ offset: 1, color: 'rgba(40, 97, 245, 0.8)' }
|
||||
]),
|
||||
'溶解氧': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#4EF568' },
|
||||
{ offset: 1, color: '#2AB256' }
|
||||
{ offset: 0, color: 'rgba(78, 245, 104, 1)' },
|
||||
{ offset: 1, color: 'rgba(42, 178, 86, 0.8)' }
|
||||
]),
|
||||
'盐度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#FFB72C' },
|
||||
{ offset: 1, color: '#F5612A' }
|
||||
{ offset: 0, color: 'rgba(255, 183, 44, 1)' },
|
||||
{ offset: 1, color: 'rgba(245, 97, 42, 0.8)' }
|
||||
]),
|
||||
'水温': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#FF36D9' },
|
||||
{ offset: 1, color: '#C92AF5' }
|
||||
{ offset: 0, color: 'rgba(255, 54, 217, 1)' },
|
||||
{ offset: 1, color: 'rgba(201, 42, 245, 0.8)' }
|
||||
]),
|
||||
'浊度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#36FFB0' },
|
||||
{ offset: 1, color: '#2AF5A1' }
|
||||
{ offset: 0, color: 'rgba(54, 255, 176, 1)' },
|
||||
{ offset: 1, color: 'rgba(42, 245, 161, 0.8)' }
|
||||
]),
|
||||
'PM2.5': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#7636FF' },
|
||||
{ offset: 1, color: '#2A3CF5' }
|
||||
{ offset: 0, color: 'rgba(118, 54, 255, 1)' },
|
||||
{ offset: 1, color: 'rgba(42, 60, 245, 0.8)' }
|
||||
]),
|
||||
'氮氧化物': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#FF7636' },
|
||||
{ offset: 1, color: '#F52A2A' }
|
||||
{ offset: 0, color: 'rgba(255, 118, 54, 1)' },
|
||||
{ offset: 1, color: 'rgba(245, 42, 42, 0.8)' }
|
||||
])
|
||||
}
|
||||
return colors[indicatorName] || new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#36CFFF' },
|
||||
{ offset: 1, color: '#2861F5' }
|
||||
{ offset: 0, color: 'rgba(54, 207, 255, 1)' },
|
||||
{ offset: 1, color: 'rgba(40, 97, 245, 0.8)' }
|
||||
])
|
||||
}
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ const initChart = async () => {
|
||||
fontSize: 12
|
||||
},
|
||||
top: 0,
|
||||
right: '5%',
|
||||
right: '0%',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user