前后端一次交互-echarts

<template>

    <div class="total-class" id="chartBar2" :style="{width: '100%', height: '100%'}"></div>

</template>

<script>

  import {getBroker} from "@/api/rjlister"

  export default {
    name: 'rjjkzl2',
    data() {
      return {
        chartBar: null,
        // BarColor: ['#3398DB'],

        idate: '',
        timer:'',
        //dataAxis: ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'],
        //data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220],
        yMax: 500,
        dataShadow: [],
        brokerA:[],
        brokerAx:[],
        brokerAy:[],
        brokerB:[],
        brokerBx:[],
        brokerBy:[]
      }
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        this.chartBar = this.$echarts.init(
          document.getElementById('chartBar2')
        )
        this.chartBar.setOption({
          title: {
            text: '软件监控-Broker 5 min trend',
            top: 15,
            left: 20,
            textStyle: {
              fontWeight: "normal",
              color: "#D1D1D1",
              fontSize: 18
            }

          },
          legend: {
            data: ['broker-a', 'broker-b'],
            right: 1,
            textStyle: {
              color: ['red', 'green'],
              fontSize: 16
            }
          },
          /*dataZoom: [{
            type: 'slider',
            start: 0,
            end: 10
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '100%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(204,242,99,0.86)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],*/
          dataZoom: [{
            type: 'inside',
            start: 90,
            end: 100
          }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(35,222,9,0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: this.brokerAx,
            boundaryGap: false,
            splitLine:{
              //网格线
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#fff'],
                type:'dotted'
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//底部线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#D1D1D1',//坐标值得具体的颜色
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              //网格线
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#fff'],
                type: 'dotted'
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width: '1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#D1D1D1',//左侧坐标值得具体的颜色
              }
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: 'broker-a',
              data: this.brokerAy,
              type: 'line',
              smooth: true,
              lineStyle: {
                color: 'red',
                width: 4,
              }
            },
            {
              name: 'broker-b',
              data: this.brokerBy,
              type: 'line',
              smooth: true,
              lineStyle: {
                color: 'green',
                width: 4,
              }
            }
          ]
        });
      },
      drawCharts() {
        this.getData()
      },
      async getData() {
        let data={
          date:this.idate
         }
      await getBroker(data).then(res=>{
        //console.log(JSON.parse(res.data).data);

        var obj = JSON.parse(res.data).data;
        for(let item in obj){
          if(item.indexOf('broker-a')!=-1){
            this.brokerA = obj[item];
          }
          if(item.indexOf('broker-b')!=-1){
            this.brokerB = obj[item];
          }
        }
        //console.log(this.brokerA)
        //console.log('==========================')
        this.brokerA.map(val=>{
          this.brokerAx.push(new Date(parseInt(val.split(',')[0])).toLocaleString('zh', { hour12: false }).split(' ')[1]);
          this.brokerAy.push(val.split(',')[1])
        })
        this.brokerB.map(val=>{
          this.brokerBx.push(new Date(parseInt(val.split(',')[0])).toLocaleString('zh', { hour12: false }).split(' ')[1]);
          this.brokerBy.push(val.split(',')[1])
        })
      }).catch(err=>{
        console.log(err)
      })
        this.drawBarChart()
      }
   },
    mounted: function () {
      this.drawCharts();
      /*window.onresize = () => {
        this.chartBar.resize();
      }*/
      this.timer=setInterval(this.drawCharts, 60000)
      window.onresize=()=>{
        this.chartBar.resize();//chartsLine
      }
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    updated: function () {
      this.drawCharts()
    }
  }
</script>

<style scoped>

</style>

package com.dvt.taskconfiguration.controller;

import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpUtil;
import com.dvt.common.CommonResult;
import com.dvt.common.ResultUtils;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/*
 *@author:Nye
 *@discription:writer there
 */
@RestController
@RequestMapping("/taskConfiguration/softListen/")
@Api(tags = "软件监控配api解决跨域")
@Slf4j
public class SoftListenController {
    @Value("${sofListenUrl}")
    String url;


    @PostMapping("getEchartsOne")
    @ApiOperation("第一张软件echarts图数据")
        private CommonResult getEcharts1(@RequestBody Map<String, String> map){
        String s="dashboard/broker.query";
       // System.err.println("呵呵呵呵");
        Object date;

        Map<String,Object> paramMap=new HashMap<>();
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
        if(StrUtil.isEmpty(map.get("date"))){
             date=sdf.format(new Date());
            paramMap.put("date",date);
        }else {
             date = map.get("date");
            paramMap.put("date",date);
        }
        String result =HttpUtil.get(url+s,paramMap);
         log.info("result -> {}",result);
        return ResultUtils.success(result);
    }
    @GetMapping("getEchartsTwo")
    @ApiOperation("第一张软件echarts图数据")
    private String getEcharts2(){
        String s="dashboard/topicCurrent";

        String result =HttpUtil.get(s);
        //        log.info(result);
        return result;
    }

}