基于 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对样式进行了限定，使其仅在当前组件中生效。

🐱 个人主页：SHOW科技，公众号：SHOW科技
🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：前端主流技术分享
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！
————————————————
版权声明：本文为CSDN博主「SHOW科技」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。