let timer:any =null;
let dataIndex =9;
const month=ref([1,2,3,4,5,6,7,8,9,10,11,12])
const gonglv=ref([0,50,70,30,60,90,110,80,60,70,40,90])
// 状态曲线图
const echartLine = () => {
let chart = echarts.init(document.getElementById('line1'));
// 初始化数据
const initialData = month.value.slice(0,9);
const initialData1 = gonglv.value.slice(0,9);
timer = setInterval(() => {
// 删除第一个数据
initialData.shift();
initialData1.shift();
// 添加新的数据到末尾
if (dataIndex < month.value.length) {
initialData.push(month.value[dataIndex]);
initialData1.push(gonglv.value[dataIndex])
dataIndex++;
} else {
// 如果已经显示了所有数据,则重新开始
initialData.push(month.value[0]);
initialData1.push(gonglv.value[0]);
dataIndex = 1;
}
let option = {
tooltip: {
trigger: 'axis',
},
grid: {
top: '10px',
right: '10px',
left: '50px',
bottom: '20px',
},
xAxis: [
{
name: '月',
type: 'category',
axisLabel: {
color: '#fff',
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#195384',
type: 'dotted',
},
},
data:initialData
},
],
yAxis: [
{
type: 'value',
name: '功率(kw)',
min: 0,
position: 'left',
nameTextStyle: {
color: '#fff',
fontSize: 11,
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#0a3e98',
type: 'dotted',
},
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#fff',
},
},
},
],
series: [
{
name: '功率',
type: 'line',
// smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 10,
lineStyle: {
normal: {
color: '#7F4CEF',
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
},
},
itemStyle: {
color: '#fff',
borderColor: '#7F4CEF',
borderWidth: 3,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'RGBA(127, 76, 239, 1)',
},
{
offset: 1,
color: 'RGBA(127, 76, 239, 0.2)',
},
],
false,
),
shadowColor: 'RGBA(80, 38, 72, 0.2)',
shadowBlur: 20,
},
},
data:initialData1
},
],
};
chart.setOption(option);
},1000)
};
onUnmounted(() => {
clearInterval(timer);
});
01-20
9581
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
10-13
450
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-11
948
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-13