以下是一个简单的示例代码,实现了在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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录