Echarts封装动态加载组件，并且添加循环效果

         基于 Echarts 框架的组件，用于实现数据滚动效果。在该组件中，我们首先引入了 Echarts 库，并定义了组件的名称和所需的 props 属性。在 mounted 钩子函数中，我们调用 initChart 方法来初始化图表，并使用 setInterval 定时器来触发 updateChart 方法，以实现数据滚动效果。在 updateChart 方法中，我们通过复制数据、移除数据、截取数据等操作来更新图表，并计算出当前数据索引。最后，我们使用 setOption 方法来更新图表的数据和配置，实现数据的滚动更新效果。

        主要使用了 Echarts 提供的多个配置项和方法，如设置 grid 网格、title 标题、tooltip 工具提示、legend 图例、toolbox 工具箱、xAxis 和 yAxis 坐标轴、series 数据系列等。同时，我们还使用了 Echarts 提供的 LinearGradient 渐变色工具和 label 标签样式等特性，来美化图表。

组件使用实例

<lineDoubleEcharts :data="values" :x-data="times" />
<script>
import lineDoubleEcharts from '@/components/lineDoubleEcharts.vue';
//其他写法省略
components: {
    Head,
    lineDoubleEcharts
  },
data () {
    return {
      times: [],
      // times: ["2023-12-16 09:30:00"],
      values: [
        [12.34, 25.24, 24.12, 12.44, 15.74, 22.23, 12.34, 23.24, 24.12, 12.44, 15.74],
        [16.44, 11.34, 18.54, 34.11, 17.54, 22.42, 33.44, 12.34, 15.54, 34.11, 17.54]
      ],
      totalvalues: []
    }
  },
</script>

组件内写法

<template>
  <div class="echarts-component">
    <div ref="chart" class="chart"></div><!-- 用于渲染echarts图表的容器 -->
  </div>
</template>

import * as echarts from 'echarts';
export default {
  name: 'EchartsComponent',
  props: {
    data: {
      type: Array,
      required: true,
    },
    xData: {
      type: Array,
      required: true,
    },
  },
  data () {
    return {
      currentIndex: 0, // 当前数据索引
    };
  },
  mounted () {
    this.initChart();
  },
  watch: {
    data: {
      handler () {
        this.currentIndex = 0; // 数据改变时重置索引
      },
      deep: true,
    },
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.chart);
      let colors = ["#1dacfe", "#FF3838", "#ffd300"]
      this.chartOption = {
        grid: {
          left: '7%',
          right: '7%%',
          top: '25%',
          bottom: '20%',
        },
        title: {
          show: false
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          left: 'right',
          textStyle: {
            color: '#fff',
          },
          data: ['1', '2'],
        },
        toolbox: {
          show: false,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          show: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 15,
            color: '#d0d0d0',
            margin: 8,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#4e608b',//左边线的颜色
              width: '1'//坐标线的宽度
            }
          },
          data: this.xData,
        },
        yAxis: {
          type: 'value',
            scale: true,
            name: '',
            axisLine: {
              show: false
            },
            splitNumber: 4,
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: '#4e608b'
              }
            },
            axisLabel: {
              fontSize: 13,
              color: '#d0d0d0',
              margin: 12,
            },
            max: Math.max(...[]),
            min: 0,
            boundaryGap: [0.2, 0.2]
        },
        series: [
          {
            name: '1',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: colors[0]
                }
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: colors[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: colors[0] // 100% 处的颜色
                }], false)
              }
            },
            barWidth: '15%',
            yAxisIndex: 0,
            data: [],
          },
          {
            name: '2',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: colors[1]
                }
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: colors[1] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: colors[1] // 100% 处的颜色
                }], false)
              }
            },
            barWidth: '15%',
            yAxisIndex: 0,
            data: [],
          },
        ],
      };
      this.chart.setOption(this.chartOption);

      // 实现数据滚动效果
      setInterval(() => {
        this.updateChart();
      }, 2000);
    },
    updateChart () {
      const newData = this.data.slice(); // 复制数据

      // 将移除的数据添加到结尾
      newData[0].push(newData[0].shift());
      newData[1].push(newData[1].shift());

      // 计算截取数据的开始索引和结束索引
      const startIndex = this.currentIndex;
      const endIndex = startIndex + 10; // 每次显示10条数据

      const displayData = [newData[0].slice(startIndex, endIndex), newData[1].slice(startIndex, endIndex)];

      this.chartOption.series[0].data = displayData[0];
      this.chartOption.series[1].data = displayData[1];
      this.chart.setOption(this.chartOption);

      // 更新当前数据索引
      this.currentIndex++;
      if (this.currentIndex >= newData[0].length) {
        this.currentIndex = 0;
      }
    },
  },
};

<style scoped>
.echarts-component {
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

        主要实现了一个使用echarts库创建的Vue组件，用于展示折线图。其中，通过props接收data和xData作为图表的数据来源，通过watch监听data的变化，并重置currentIndex（当前数据索引）的值。在mounted钩子函数中调用initChart()方法进行图表的初始化。initChart()方法初始化echarts实例并设置图表的配置项和数据，然后通过setInterval定时更新图表的数据展示效果，updateChart()方法用于更新图表的数据。最后，使用style scoped对样式进行了限定，使其仅在当前组件中生效。

🐱 个人主页：TechCodeAI启航，公众号：SHOW科技

🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！

💫 优质专栏：前端主流技术分享

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！