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

一、业务场景：

        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);
            } 
        );

四、数据展示效果

完毕！