spring boot + vue 前后端分离 集成echarts

1.npm 拉取 echarts

npm install echarts

2.main.js 挂载 echarts

import * as echarts from'echarts'

Vue.prototype.$echarts=echarts;

3.vue页面的使用  初始化echarts方法

创建div生成echats容器

 

showChartByType(type,title,data){ //type是自定义div id名
            
            var myChart=this.$echarts.init(document.getElementById(type));
            var option={
                title:{
                    text:title
                },
               
                xAxis:{
                  data:data.xData //x轴的数据
                    },
                yAxis:{},
                series:[{
                        name:"数据",
                        type:'line',
                        data:data.yData //y轴的数据
                    }]       
            }
            myChart.setOption(option);
        }   

在请求中调用初始化方法 并且填充相关数据

show(){
          Statics.showEcharts(this.searchObject.begin,this.searchObject.end).then(res=>{  //这是axios请求
            this.chartData=res.data.items;  //封装数据
            console.log(this.chartData)
            //echats的真正初始化
            this.showChartByType("register_num","学员注册统计",this.chartData.register_num);
            this.showChartByType("login_num","学员登录统计",this.chartData.login_num);
            this.showChartByType("view_num","课程播放数统计",this.chartData.video_view_num);
            this.showChartByType("course_add_num","课程新增数统计",this.chartData.course_add_num);
          })
        },

4.下面我给出我都后端封装的数据集合 大家可以自行参考

//生成echarts数据
    @Override
    public Map<String, Map<String, Object>> showEchartsBytime(String begin, String end) {
        Map<String, Object> register_num = this.getEchartsDataByType(begin, end, "register_num");
        Map<String, Object> login_num = this.getEchartsDataByType(begin, end, "login_num");
        Map<String, Object> video_view_num = this.getEchartsDataByType(begin, end, "video_view_num");
        Map<String, Object> course_add_num = this.getEchartsDataByType(begin, end, "course_add_num");
        Map<String, Map<String, Object>> mapHashMap = new HashMap<>();
        mapHashMap.put("register_num",register_num);
        mapHashMap.put("login_num",login_num);
        mapHashMap.put("video_view_num",video_view_num);
        mapHashMap.put("course_add_num",course_add_num);
        return mapHashMap;
    }
    //组装数据工具
    private Map<String,Object> getEchartsDataByType(String begin,String end,String type){
        Map<String,Object> map=new HashMap<>();
        List<String> xList=new ArrayList<>();
        List<Integer> yList=new ArrayList<>();
        QueryWrapper<Daily> dailyQueryWrapper = new QueryWrapper<>();
        dailyQueryWrapper.select("date_calculated",type);
        dailyQueryWrapper.between("date_calculated",begin,end);
        List<Map<String, Object>> maps = dailyMapper.selectMaps(dailyQueryWrapper);
        for (Map<String, Object> stringObjectMap : maps) {
            String date_calculated = (String)stringObjectMap.get("date_calculated");
            xList.add(date_calculated);
            Integer num = (Integer)stringObjectMap.get(type);
            yList.add(num);
        }
        map.put("xData",xList);
        map.put("yData",yList);
        return map;
    }