Echarts可视化实战

获取HBase中的数据

• 按天获取HBase中course_clickcount表的数据

 public Map<String, Long> query(String tableName, String condition) throws Exception {

        HashMap<String, Long> map = new HashMap<>();

        HTable table = getTable(tableName);
        String cf = "info";
        String qualifier = "clickcount";

        Scan scan = new Scan();

        Filter filter = new PrefixFilter(Bytes.toBytes(condition));
        scan.setFilter(filter);

        ResultScanner resultScanner = table.getScanner(scan);

        for (Result result : resultScanner) {

            String row = Bytes.toString(result.getRow());

            long clickCount = Bytes.toLong(result.getValue(cf.getBytes(), qualifier.getBytes()));

            map.put(row,clickCount);

        }

        return map;
    }

Web层开发

  @RequestMapping(value = "/course_dynamic", method = RequestMethod.POST)
   @ResponseBody
   public List<CourseClickCount> courseClickCount() throws Exception {

       List<CourseClickCount> list = courseClickCountDAO.query("20200916");
       for (CourseClickCount model : list) {
           model.setName(courses.get(model.getName().substring(9)));

       }
//        String jsonString = JSON.toJSONString(list);

       return list;
   }


   @RequestMapping(value = "/echarts", method = RequestMethod.GET)
   public ModelAndView echarts() {
       return new ModelAndView("echarts");

• echarts.html中修改的data部分

data: (function () { //<![CDATA[
                    var datas = [];
                    $.ajax({
                        type: "post",
                        url: "/jackie/course_dynamic",
                        dataType: 'json',
                        async: false,
                        success: function (result) {
                            for (var i = 0; i < result.length; i++) {
                                datas.push({"value": result[i].value, "name": result[i].name})
                            }
                        }
                    })
                    return datas;
                    //]]>
                })(),
// 这里有个坑，最后这一对括号别忘了，少了这一对括号不会报错但一直出不来图

打包运行

• 打包上传到虚拟机中

• 运行，启动hdfs, zk, kafka, flume, hbase, spark

• 然后运行jar包 java -jar web-0.0.1-SNAPSHOT.jar

---

---

• 隔一分钟刷新网页，数据发生变化（前端菜鸟基本不会，可以设置自动刷新）
• 这里查询的日期在代码中固定了某一天

---

---

遇到的问题

• 一是写echarts.html时，少写了一对括号。折腾了两小时
• 二是 如下图，那部分不是注释，省略会报错（别问为什么，我也有很多的问号?*n）

• 第三个提交运行昨天生成的spark-streaming的jar包时（），报错(昨天正常运行，今天就报错了)如下图：

• 解决：其实也没完全解决，重新把spark-streaming项目打jar包，再上传运行就ok了（?+1）

• 希望对来到这的看官能有所帮助

---

源码

完整项目工程

echarts.min.js 以及 jquery-3.5.1.min.js

echarts.html