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

 Echarts 曲线图 实现 动态 添加数据_第1张图片

     
              
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

后台 返回 Json 

  /**
     * 
     * 返回需要的数据
     * @return
     */
    @RequestMapping("getTbHadoopQueueTime")
    @ResponseBody
    public JsonObject getTbHadoopQueue() {
        List monitorQueues = monitorHadoopUserService.tbMonitorQueue();
        String tbQueueTime = null;
        List t = new ArrayList();
        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 monitorQueues = monitorHadoopUserService.tbMonitorQueue();
        List list = new ArrayList();
        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了

你可能感兴趣的:(Echarts)