前端开发-echarts 横坐标与数据动态变化

版权声明：本文为博主精心打造，转载请标明出处。>_< https://blog.csdn.net/slyslyme/article/details/82845076

在这次项目开发中使用了ajax，进行前端和后端的数据交互；

获取数据使用定时器；

本文以横坐标动态变化的折线图为例进行说明,最终效果在文末，但是横坐标会随时间不停变化

<!--引入百度Echarts-->
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/shine.js') }}"></script>

在JS中，首先要初始化一个div来存放echarts

<script type="text/javascript">
    var myChart_line = echarts.init(document.getElementById('line-chart'));
    
    <!--设置队列-->
    var timeline_data = {***:[], ***:[], ***:[], ***:[], ***:[], ***:[], ***:[]};

    app.timeTicket = setInterval(function(){ 
        getData_line();     
    },2000);    
    
    function getData_line() {
         $.ajax({
            url:'/',
            data:{'host':host_ip},
            type:'POST',
            async:false,
            dataType:'json',
            success:function(data) {
            
            <!--横坐标最多10个，多的从队首弹出，先进先出-->
            if(timeline_data['time'].length > 10)
            {
               timeline_data["***"].shift();
               timeline_data["***"].shift();
               timeline_data["***"].shift();
               timeline_data["***"].shift();
               timeline_data["***"].shift();
               timeline_data["***"].shift();
               timeline_data["***"].shift();
            }
            timeline_data["***"].push(data.***[0]);
            timeline_data["***"].push(data.***[0]);
            timeline_data["***"].push(data.***[0]);
            timeline_data["***"].push(data.***[0]);
            timeline_data["***"].push(data.***[0]);
            timeline_data["***"].push(data.***[0]);
            timeline_data["***"].push(data.***[0]);
           
            data = timeline_data;
              myChart_line.setOption({
                title: {
                text: '实时攻击检测图'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                     data:[]
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : data.time
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'示例图的小注释名字',
                        type:'line',
                        data: data.***和后端的json数据有关
                    },
                    {
                        name:'',
                        type:'line',
                        data:
                    },
                    {
                        name:'',
                        type:'line',
                        data:
                    },
                    {
                        name:'',
                        type:'line',
                        data:
                    },

                     {
                        name:'',
                        type:'line',
                        data:
                    },
                    {
                        name:'全部',
                        type:'line',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        data:
                    }
                    ]

             })
            },
            error:function (msg) {
                console.log(msg);
                alert('系统发生错误');
            }
        })
    };

</script>