vue + echarts 实现标记点的闪烁效果
2023-11-23 11:27 Jerrycoco 阅读(360) 评论(0) 编辑 收藏 举报
initEleChart (data) {
let index = data.findIndex(item => {
return this.currentRow.D_DATETIME == item.D_DATETIME
})
let option = {
title: {
text: `${this.currentRow.STATION.split('/')[1]}[${this.currentRow.STATION.split('/')[0]}]时序变化趋势`,
textStyle: {
fontSize: 16,
color: '#333333'
},
left: 'center',
top: 10
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
shadowStyle: {
color: 'rgba(0, 0, 0, 0.8)'
}
},
backgroundColor: '#fff',
extraCssText: 'box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px',
textStyle: {
color: '#000'
},
formatter: (v) => {
let str = '<p style="color: #00f;font-size: 14px;font-weight: 600;">' + v[0].data.data.D_DATETIME + '<p/>'
str += v.map((item, index) => {
if (item.seriesName === 'markPoint') {
return ''; // 直接返回空字符串，不显示 markPoint 的内容
}
if (item.seriesName.includes('时间')) {
return item.marker + item.seriesName + ': ' + this.getAriseTime(item.value)
+ ' (' + this.getQCMsg(item.data.data).label + ')'
} else if (item.seriesName.includes('风')) {
let qc = item.data.data.QC.split('#')
return item.marker + item.seriesName.substr(0, item.seriesName.length - 1) + '速' + ': ' + ((item.value[1] && item.value[1] !== 'null') ? item.value[1] : ' - ')
+ ' (' + this.getQCMsg({ QC: qc[0] }).label + ')' + '<br/>'
+ item.marker + item.seriesName.substr(0, item.seriesName.length - 1) + '向' + ': ' + ((item.value[3] && item.value[3] !== 'null') ? item.value[3] : ' - ')
+ ' (' + this.getQCMsg({ QC: qc[1] }).label + ')'
} else {
return item.marker + item.seriesName + ': ' + ((item.value && item.value !== 'null') ? item.value : ' - ')
+ ' (' + this.getQCMsg(item.data.data).label + ')'
}
}).join('<br/>')
return str
}
},
grid: {
left: '4%',
right: '3%',
bottom: '10%',
top: '24%'
},
yAxis: {
// minInterval: 1,
type: 'value',
scale: true,
name: this.getYName(data[0].ELE_CODE, data[0].ITEM_NAME),
// name: this.strChange(data[0].ITEM_NAME),
nameTextStyle: { color: '#000', fontSize: 12 },
axisLabel: {
textStyle: { color: '#000', fontSize: 12 },
formatter: (v) => {
if (data[0].ITEM_NAME.includes('时间')) {
if (v == '999999' || v == '999998' || !v || v === 'null') {
v = 13089362
}
return dateFormat('hh时', new Date(Number(v)))
} else {
return v
}
}
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
},
splitLine: {
show: false
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: data.map(item => {
return {
value: item.D_DATETIME,
data: item.D_DATETIME
}
}),
axisTick: {
show: true,
alignWithLabel: true
},
axisLabel: {
textStyle: { color: '#000', fontSize: 12 }
},
/* axisLine: {
lineStyle: {
color: '#1371d5'
}
} */
},
series: [
{
name: data[0].ITEM_NAME,
type: 'line',
data: data.map(item_ => {
return {
value: item_.VALUE,
data: item_,
type: item_.ITEM_NAME,
itemStyle: {
normal: {
color: ’#019000‘
}
},
}
}),
barMaxWidth: 15,
symbol: 'circle',
connectNulls: false,
symbolSize: function (value,ind) {
if (index == ind.dataIndex) {
return "12";
} else {
return "6";
}
},
itemStyle: {
normal: {
label: {
show: true,
formatter: (v) => {
if (v.seriesName.includes('时间')) {
return this.getAriseTime(v.value)
} else {
return v.value
}
},
position: 'top',
fontSize: 12,
textStyle: {
color: '#000'
}
}
}
},
showAllSymbol: true,
lineStyle: {
normal: {
color: '#5c9cd5'
}
},
animationDelay: function (idx) { // 动画延迟
return idx * 10
}
},
// 新增一个 series 用于实现标记点的闪烁效果
{
name: 'markPoint',
type: 'effectScatter', // 闪烁
show: false,
coordinateSystem: 'cartesian2d',
data: [
{
value: [data[index].D_DATETIME, data[index].VALUE],
symbolSize: 12,
data: data[index],
type: data[index].ITEM_NAME,
itemStyle: {
normal: {
color: this.getQCMsg(data[index]).color
}
},
}
],
animationDelay: function (idx) { // 动画延迟
return idx * 10
}
}
]
}
if (this.eleChart == null) {
this.eleChart = echarts2.init(this.$refs.eleChart)
}
this.eleChart.setOption(option)
this.eleChart.resize()
window.addEventListener('resize', () => {
this.eleChart.resize()
})
},
