?????????基于 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版权协议，转载请附上原文出处链接及本声明。