springboot搭建Charts图形

高楼Zee

发布于 2019-12-10 12:16:55

6550

发布于 2019-12-10 12:16:55

文章被收录于专栏：7DGroup7DGroup

前言

最近在做一个线上监控项目需要用图形显示，网上调用基本使用Charts显示，从网上调研可以采用两种方式展示数据，一种是通过后端把数据组合成JSON在传到前端渲染，一种是在前端渲染，数据通过后端给，不同之处是数据组合方式不同，今天演示后端渲染，因为后端处理数据比较容易，前端处理数据比较麻烦，所以采用后端处理。

效果

引入关键pom.xml

<!-- 引入 echarts.jar 源码位置： https://gitee.com/free/ECharts.git -->
        <dependency>
            <groupId>com.github.abel533</groupId>
            <artifactId>ECharts</artifactId>
            <version>3.0.0.6</version>
        </dependency>
 <!--GsonOption必须-->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.6.2</version>
            <scope>compile</scope>
            <optional>true</optional>
        </dependency>

后端Controller层

@GetMapping("/getkey")
    public String getKeyInfo(Model model) {
   model.addAttribute("datanums", umpKeyInfoService.optionData());
        return "keyinfo";
}

接口层

/**
     * 直接获取数据
     * @return str
     */
    String optionData();

业务实现层

@Override
    public String optionData() {
 EnhancedOption option = new EnhancedOption();
        option.tooltip().trigger(Trigger.axis);
        option.legend("邮件营销", "联盟广告", "直接访问", "搜索引擎");
        option.toolbox().show(true);
        option.calculable(true);
        option.xAxis(new CategoryAxis().boundaryGap(false).data("周一", "周二", "周三", "周四", "周五", "周六", "周日"));
        option.yAxis(new ValueAxis());
        option.series(new Line().smooth(true).name("邮件营销").stack("总量").symbol(Symbol.none).data(120, 132, 301, 134, new LineData(90, Symbol.droplet, 5), 230, 210));
        

        LineData lineData = new LineData(201, Symbol.star, 15);
        lineData.itemStyle().normal().label().show(true).textStyle().fontSize(20).fontFamily("微软雅黑").fontWeight("bold");
        option.series(new Line().smooth(true).name("联盟广告").stack("总量").symbol("image://http://echarts.baidu.com/doc/asset/ico/favicon.png").symbolSize(8).data(120, 82, lineData, new LineData(134, Symbol.none), 190, new LineData(230, Symbol.emptypin, 8), 110));
//把数据转成string
       return option.toString();
    }

前端页面

引入资源

<script src="js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>

<div class="col-md-6 col-sm-6 col-xs-12">
         <div class="x_panel">
            <div class="x_title">
                   <h2>学习 <small>调用次数</small></h2>
           <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                 </li>
                  <div id="keyTimeTwo" style="width: 600px;height:400px;"></div>
              <li><a class="close-link"><i class="fa fa-close"></i></a>
            </li>
          </ul>
           <div class="clearfix"></div>
            </div>
        <div class="x_content">
               <canvas id="canvasDoughnut"></canvas>
            </div>
           </div>
     </div>

//获取Controller层数据并且表标签为隐藏
<input type="hidden" th:value="${datanums}" id="numsvv"/>

<script type="text/javascript">
 var datachart=$("#numsvv").val();

//通过id定位把图渲染到页面
 var twoTimeChart = echarts.init(document.getElementById('keyTimeTwo'));
//注意这边必须这样写，否在不会显示数据
  optiondata = JSON.parse(datachart);
//加载数据
 twoTimeChart.setOption(optiondata);
</script>