echarts动态 折线图

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);
});