我需要使用echart在vue2中实现动态折线图数据以折线图正常显示折线图不动但是折线图上的线条是带流动光效线条的光效会一直在折线中流动给出完整的示例代码
以下是一个简单的示例代码,实现了在Vue2中使用echarts绘制动态折线图,并添加了流动光效:
<template>
<div id="line-chart" style="width: 100%; height: 500px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
chartData: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'Sales',
type: 'line',
data: [150, 230, 224, 218, 135, 147, 260],
symbol: 'none',
lineStyle: {
color: '#409EFF',
width: 2
},
markLine: {
silent: true,
symbol: 'none',
lineStyle: {
normal: {
color: '#999',
type: 'dashed'
}
},
data: [{
yAxis: 200
}]
}
}]
},
timer: null,
currentIndex: -1
}
},
mounted() {
this.renderChart()
this.startAnimation()
},
methods: {
renderChart() {
const chart = echarts.init(document.getElementById('line-chart'))
chart.setOption(this.chartData)
},
startAnimation() {
this.timer = setInterval(() => {
this.currentIndex++
if (this.currentIndex >= this.chartData.xAxis.data.length) {
this.currentIndex = 0
}
const chart = echarts.getInstanceByDom(document.getElementById('line-chart'))
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: this.currentIndex
})
}, 1000)
}
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>
<style>
/* 添加光效 */
#line-chart .echarts-tooltip-marker {
animation: echartsTooltipMarker 2s ease-in-out infinite;
}
@keyframes echartsTooltipMarker {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
</style>
在这个例子中,我们通过echarts库绘制了一个简单的折线图,并添加了一个流动光效线条。每秒钟,我们都会将光标移动到下一个数据点,并在图表上显示光标。这样,我们就可以实现动态折线图了。
原文地址: https://www.cveoy.top/t/topic/b17s 著作权归作者所有。请勿转载和采集!