echarts+springmvc+spring实现数据的直方图展示

超、凢脫俗 2021-10-18 23:22 719阅读 0赞

**一、业务场景：**

**        **APP埋点测试平台中，需要统计各业务线上埋点数量并且通过图表直观的展示出来

**二、使用技术：**

**      ** 1、通过echarts实现数据的图表展示

2、Spring+springmvc实现后台数据获取、业务逻辑处理

**三、具体过程**

**       1、定义业务接口(被controller调用)**

public interface Case \{  
    public TaskCount taskCount();//获取业务线埋点数据  
\}

**2、定义数据访问DAO(负责数据访问)**

public interface CaseDao \{  
    public TaskCount taskCount();//统计业务线埋点数量

**3、定义实现业务类**

@Service("caseServices")  
public class CaseImp implements Case\{

@Autowired   //注入数据访问层接口  
    public CaseDao caseDao;

/\*获取所有埋点数据\*/  
    @Override  
    public TaskCount taskCount() \{  
        // TODO Auto-generated method stub  
        return caseDao.taskCount();  
    \}

**4、定义pojo存放统计数据**

public class TaskCount \{  
      
    private int pingpaigongyu;//品牌公寓  
    private int zhengzu;//整租  
    private int duanzu;//短租  
    private int hezu;//合租  
    private int qiuzu;//求租  
    private int chuzu;//出租  
    private int ershoufang;//二手房  
    private int xiezilou;//写字楼  
    private int shangpuchuzu;//商铺出租  
    private int changfang;//厂房  
    private int xingpan;//新盘  
    private int xiaoqu;//小区  
    private int fangdong;//房东  
    private int qita;//其他  
      
    public int getPingpaigongyu() \{  
        return pingpaigongyu;  
    \}  
    public void setPingpaigongyu(int pingpaigongyu) \{  
        this.pingpaigongyu = pingpaigongyu;  
    \}  
    public int getZhengzu() \{  
        return zhengzu;  
    \}  
    public void setZhengzu(int zhengzu) \{  
        this.zhengzu = zhengzu;  
    \}  
    public int getDuanzu() \{  
        return duanzu;  
    \}  
    public void setDuanzu(int duanzu) \{  
        this.duanzu = duanzu;  
    \}  
    public int getHezu() \{  
        return hezu;  
    \}  
    public void setHezu(int hezu) \{  
        this.hezu = hezu;  
    \}  
    public int getQiuzu() \{  
        return qiuzu;  
    \}  
    public void setQiuzu(int qiuzu) \{  
        this.qiuzu = qiuzu;  
    \}  
    public int getChuzu() \{  
        return chuzu;  
    \}  
    public void setChuzu(int chuzu) \{  
        this.chuzu = chuzu;  
    \}  
    public int getErshoufang() \{  
        return ershoufang;  
    \}  
    public void setErshoufang(int ershoufang) \{  
        this.ershoufang = ershoufang;  
    \}  
    public int getXiezilou() \{  
        return xiezilou;  
    \}  
    public void setXiezilou(int xiezilou) \{  
        this.xiezilou = xiezilou;  
    \}  
    public int getShangpuchuzu() \{  
        return shangpuchuzu;  
    \}  
    public void setShangpuchuzu(int shangpuchuzu) \{  
        this.shangpuchuzu = shangpuchuzu;  
    \}  
    public int getChangfang() \{  
        return changfang;  
    \}  
    public void setChangfang(int changfang) \{  
        this.changfang = changfang;  
    \}  
    public int getXingpan() \{  
        return xingpan;  
    \}  
    public void setXingpan(int xingpan) \{  
        this.xingpan = xingpan;  
    \}  
    public int getXiaoqu() \{  
        return xiaoqu;  
    \}  
    public void setXiaoqu(int xiaoqu) \{  
        this.xiaoqu = xiaoqu;  
    \}  
    public int getFangdong() \{  
        return fangdong;  
    \}  
    public void setFangdong(int fangdong) \{  
        this.fangdong = fangdong;  
    \}  
    public int getQita() \{  
        return qita;  
    \}  
    public void setQita(int qita) \{  
        this.qita = qita;  
    \}

**5、定义控制层controller**

@Controller  
@RequestMapping("case")  
public class CaseController \{  
      
    @Autowired  
    Case caseint;//注入添加任务接口    
    Logger log = Logger.getLogger(CaseController.class);  
  
    //统计业务线买点数量  
        @ResponseBody  
        @RequestMapping(value="/selectpoint",method=RequestMethod.GET)  
            public TaskCount selectpoint()\{  
            TaskCount taskCount=new TaskCount();  
            taskCount = caseint.taskCount();  
               return taskCount;  
        \}

**6、定义ORM映射配置**

<resultMap id="TaskCountMap" type="com.bj58.automation.entity.TaskCount" >  
      <id column="pingpaigongyu" jdbcType="INTEGER" property="pingpaigongyu"/>  
      <result column="zhengzu" jdbcType="INTEGER" property="zhengzu"/>  
      <result column="duanzu" jdbcType="INTEGER" property="duanzu"/>  
      <result column="hezu" jdbcType="INTEGER" property="hezu"/>  
      <result column="qiuzu" jdbcType="INTEGER" property="qiuzu"/>  
      <result column="chuzu" jdbcType="INTEGER" property="chuzu"/>  
      <result column="ershoufang" jdbcType="INTEGER" property="ershoufang"/>  
      <result column="xiezilou" jdbcType="INTEGER" property="xiezilou"/>  
      <result column="shangpuchuzu" jdbcType="INTEGER" property="shangpuchuzu"/>  
      <result column="changfang" jdbcType="INTEGER" property="changfang"/>  
      <result column="xingpan" jdbcType="INTEGER" property="xingpan"/>  
      <result column="xiaoqu" jdbcType="INTEGER" property="xiaoqu"/>  
      <result column="fangdong" jdbcType="INTEGER" property="fangdong"/>  
      <result column="qita" jdbcType="INTEGER" property="qita"/>  
   </resultMap>  
    
  <select id="taskCount" resultMap="TaskCountMap" >  
    select count(case when cate="品牌公寓" then 1 else null end) as pingpaigongyu,  
    count(case when cate="整租" then 1 else null end) as zhengzu,  
    count(case when cate="短租" then 1 else null end) as duanzu,  
    count(case when cate="合租" then 1 else null end) as hezu,  
    count(case when cate="求租" then 1 else null end) as qiuzu,  
    count(case when cate="出租" then 1 else null end) as chuzu,  
    count(case when cate="二手房" then 1 else null end) as ershoufang,  
    count(case when cate="写字楼" then 1 else null end) as xiezilou,  
    count(case when cate="商铺租售\_生意转让" then 1 else null end) as shangpuchuz,  
    count(case when cate="厂房\_仓库\_土地\_车位" then 1 else null end) as changfang,  
    count(case when cate="新盘" then 1 else null end) as xingpan,  
    count(case when cate="小区" then 1 else null end) as xiaoqu,  
    count(case when cate="房东" then 1 else null end) as fangdong,  
    count(case when cate="其他" then 1 else null end) as qita  
    from t\_point  
  </select>

**7、echarts数据展示**

$.get("/case/selectpoint",  
                function (data)\{  
                  //  console.log(data);                  
                    var option = \{  
                            title: \{  
                                text: '埋点统计'  
                            \},  
                            tooltip: \{  
                                trigger: 'axis',  
                                formatter: function (datas) \{  
                                    var res = datas\[0\].name + '<br/>'  
                                    res=res+'数量:'+datas\[0\].data.text  
                                    return res  
                                \}  
                            \},  
                            legend: \{  
                                data: \['埋点数量'\]  
                            \},  
                            //x轴  
                            xAxis: \{  
                                data: \["品牌公寓","整租","短租\_日租","合租","求租","出租","二手房","写字楼","商铺出租","厂房\_仓库\_土地\_车位","新盘","小区","房东","其他"\],  
                                axisLabel:\{  
                                    interval:0,  
                                    rotate:-30,  
                                \}  
                            \},  
                            //y轴  
                            yAxis: \{\},  
                            series: \[\{  
                                name: '埋点数量',  
                                type: 'bar',//直方图  
                                //type:'line',//折线图  
                                data: \[  
                                    \{ value:data.pingpaigongyu, name:'品牌公寓',text:data.pingpaigongyu,showText:'100'\},  
                                    \{ value:data.zhengzu, name:'整租',text:data.zhengzu,showText:'38'\},  
                                    \{ value:data.duanzu, name:'短租\_日租',text:data.duanzu,showText:'38'\},  
                                    \{ value:data.hezu, name:'合租',text:data.hezu,showText:'38'\},  
                                    \{ value:data.qiuzu, name:'求租',text:data.qiuzu,showText:'38'\},  
                                    \{ value:data.chuzu, name:'出租',text:data.chuzu,showText:'38'\},  
                                    \{ value:data.ershoufang, name:'二手房',text:data.ershoufang,showText:'38'\},  
                                    \{ value:data.xiezilou, name:'写字楼',text:data.xiezilou,showText:'38'\},  
                                    \{ value:data.shangpuchuzu, name:'商铺出租',text:data.shangpuchuzu,showText:'38'\},  
                                    \{ value:data.changfang, name:'厂房\_仓库\_土地\_车位',text:data.changfang,showText:'38'\},  
                                    \{ value:data.xingpan, name:'新盘',text:data.xingpan,showText:'38'\},  
                                    \{ value:data.xiaoqu, name:'小区',text:data.xiaoqu,showText:'38'\},  
                                    \{ value:data.fangdong, name:'房东',text:data.fangdong,showText:'38'\},  
                                    \{ value:data.qita, name:'其他',text:data.qita,showText:'38'\}  
                                \]  
                            \}\]  
                        \};  
                 myChart.setOption(option);  
            \}   
        );

**四、数据展示效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70][]

完毕！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70]: /images/20211018/65dafcfd7e014de6b5990265516165d5.png