Echarts 曲线图 实现 动态 添加数据

 

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="resource" style="width:500px;height:250px;" ></div>
              var colors = ['#5793f3', '#d14a61', '#675bba'];
              var myChart1 = echarts.init(document.getElementById('resource'));
    option1 = {
                title : {
                    text: '集群队列',
                    x:'center',
                    bottom:180
                },
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    right: '20%'
                },

                legend: {
                    data:['cpu','内存','作业个数']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '作业个数',
                        min: 0,
                        max: 1000,
                        position: 'right',
                        offset: -25,
                        axisLine: {
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    {
                        type: 'value',
                        name: '内存(T)',
                        min: 0,
                        max: 1000,
                        position: 'right',
                        offset:30,
                        axisLine: {
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: 'CPU(MB)',
                        min: 0,
                        max: 1000,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: colors[2]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },

                ],
                series: [
                    {
                        name:'cpu',
                        type:'line',
                        smooth: true,
                        data: []
                    },
                    {
                        name:'内存',
                        type:'line',
                        smooth: true,
                        data: []
                    },
                    {
                        name:'作业个数',
                        type:'line',
                        smooth: true,
                        data: []
                    },
                ]
            };

//动态添加数据
  $.get('getTbHadoopQueueTime').done(function (data) {
                data=JSON.parse(data)
                option1.xAxis[0].data=data.data
                myChart1.setOption(option1)
            });
  $.get('getTbHadoopQueues').done(function (data) {
                data=JSON.parse(data)
                console.log(data)
                var array0=[]
                var array1=[]
                var array2=[]
                for (var i=0;i<data.data.length;i++){

                    if (i==0 ||i==3||i==6||i==9||i==12){
                        array0.push(data.data[i])
                    }
                    if (i==1||i==4 ||i==7||i==10||i==13){
                        array1.push(data.data[i])
                    }
                    if (i==2||i==5 ||i==8 || i==11||i==14){
                        array2.push(data.data[i])
                    }
                }
                // 填入数据
                option1.series[0].data=array0;
                option1.series[1].data=array1;
                option1.series[2].data=array2;
                myChart1.setOption(option1)
            });
     

后台 返回 Json 

  /**
     * 
     * 返回需要的数据
     * @return
     */
    @RequestMapping("getTbHadoopQueueTime")
    @ResponseBody
    public JsonObject getTbHadoopQueue() {
        List<MonitorQueue> monitorQueues = monitorHadoopUserService.tbMonitorQueue();
        String tbQueueTime = null;
        List<String> t = new ArrayList<String>();
        for (MonitorQueue monitorQueue : monitorQueues) {
            Date createTime = monitorQueue.getCreate_time();
            SimpleDateFormat dateFormat = new SimpleDateFormat("HH:mm");
            tbQueueTime = dateFormat.format(createTime);
            t.add(tbQueueTime);
        }
        return JsonObject.success(t);
    }

    /**
     *  监控
     * @return
     */
    @RequestMapping("getTbHadoopQueues")
    @ResponseBody
    public JsonObject getTbHadoopQueues() {
        List<MonitorQueue> monitorQueues = monitorHadoopUserService.tbMonitorQueue();
        List<Integer> list = new ArrayList<Integer>();
        for (MonitorQueue monitorQueue : monitorQueues) {
            Integer cpu = monitorQueue.getCpu();
            Integer memory = monitorQueue.getMemory();
            Integer jobNumber = monitorQueue.getJob_number();
            list.add(cpu);
            list.add(memory);
            list.add(jobNumber);
        }
        return JsonObject.success(list);
    }

 后台 返回数据 ，前端 接收到 转为数组 在填充 到 Series里面 就ok了