echarts动态曲线（以秒为单位）每秒都往后移效果

 

这是一个可以监控每秒物体运动速度、数量的实时动态曲线图。思路是定时器控制，每秒新增一个在末尾，去掉一个在首个。来达到不断往后移的效果。

话不多说，直接上代码：

data: {

        data:[],

    },

    mounted() {

        this.operation_data_barFn();

    },

    methods: {

        //随机

        randomData() {

            var now = +new Date();

            var oneDay = 100;

            var value = Math.random() * 10;

            now = new Date(+now + oneDay);

            value = value + Math.random() ;

            var valueName = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() +

                ' ' + (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) + ':' +

                (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) +

                ':' + (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds());

            console.log(valueName,'valueName')

            return {

                name: valueName,

                value: [

                    valueName,

                    Math.round(value)

                ]

            }

        },

        //运行数据动态时间轴 （以秒为单位）

        operation_data_barFn() {

            var _this = this;

            for (var i = 0; i < 60; i++) {

                _this.data.push(_this.randomData());

            }

            var dom24 = document.getElementById("operation_data_bar");//这里替换你的echarts的id

            var myChart24 = echarts.init(dom24);

            let option = null;

            option = {

                title: {

                    left: 'center',

                    text: '',

                },

                tooltip: {

                    trigger: 'axis',

                    axisPointer: {

                        type: 'line',

                        label: {

                            backgroundColor: '#6a7985'

                        },

                        lineStyle: {

                            color: '#00FF34'

                        }

                    },

                    formatter: function (params) {

                        params = params[0];

                        var date = new Date(params.name);

                        return '时间：'+date.getMinutes() + ':' + date.getSeconds()  + '<br/>速度 : ' + params.value[1];

                    },

                    axisPointer: {

                        animation: true

                    }               

                },

                //位置

                grid: {

                    left: '5%',

                    right: '3%',

                    top: '20%',

                    bottom:'25%'

                },

                //图例名

                legend: {

                    top: '1%',

                    right: '3%',

                    textStyle: {

                        color: '#ffffff',

                    }

                },       

                xAxis: {

                    type: 'category',

                    splitLine: {

                        show: false

                    },

                    axisLabel: {

                        formatter: function (value) {

                            //console.log(value,'value')

                            return value.substring(13, value.length)

                        }

                    },

                    triggerEvent: true

                },

                yAxis: {

                    name: '单位：m/s',

                    type: 'value',

                    boundaryGap: [0, '100%'],

                    splitLine: {

                        show: false

                    },

                    axisLine: {

                        lineStyle: {

                            color: '#fff',//左边线的颜色

                            width: '1'//坐标线的宽度

                        }

                    },

                    axisTick: {

                        inside: true

                    },

                    splitLine: { //横线颜色

                        show: true,

                        lineStyle: {

                            color: ['#192148'],

                            width: 1,

                            type: 'solid'

                        }

                    },

                    axisLabel: {

                        inside: false,

                        formatter: '{value}\n'

                    }

                },

                series: [{

                    name: '速度曲线',

                    type: 'line',

                    smooth: true,

                    showSymbol: false,

                    hoverAnimation: false,

                    symbol: 'image://../images/circle_s.png',//鼠标悬停线上的圆点样式（可替换本地图片，也可删除，不然会报错啦）

                    symbolSize: 20,

                    itemStyle: {

                        color: '#6A5ACD',

                        normal: {

                            lineStyle: {// 系列级个性化折线样式

                                width: 1,

                                type: 'solid',

                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                                    offset: 0,

                                    color: '#0000FF'

                                }, {

                                    offset: 1,

                                    color: '#0096FF'

                                }]),//线条渐变色

                            }

                        },

                        emphasis: {

                            color: '#00FF34',

                            borderWidth: 3,

                            borderColor: '#00FF34',

                        }

                    },//线条样式

                    areaStyle: {

                        normal: {

                            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                                offset: 0,

                                color: 'RGB(24,93,158)'

                            }, {

                                offset: .50,

                                color: 'RGB(12,45,95)'

                            }, {

                                offset: 1,

                                color: 'RGB(6,22,64)'

                            }])

                        }

                    },//区域颜色渐变

                    data: _this.data,

                }]

            };

            //定时器

            setInterval(function () {

                _this.data.shift();

                console.log(_this.randomData(),'_this.randomData()')

                _this.data.push(_this.randomData());

                myChart24.setOption(option, true);

            }, 1000);

        }

}