Echarts-java后端封装option--（一）柱状图/折线图测试用例

最新推荐文章于 2025-07-11 10:35:46 发布

肖扬、

最新推荐文章于 2025-07-11 10:35:46 发布

阅读量1w

点赞数 13

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： echart option java 柱状图折线图

本文链接：https://blog.youkuaiyun.com/MxiaXxy/article/details/77345196

最近由于要使用到百度的echarts来做图表的展示，近些天一直在学习echarts的使用，说实话百度echarts的官方文档对于前端通过js来完成图表的展示，确实有很方便之处，但是对于某些数据的处理和赋值都在前端完成确实有些繁琐，国人对于这方面矢志不渝，在后端通过封装好option对象然后转成json传到前端极大的简化了前端对option的操作。这里就简单的写一些后端对option对象的封装。

首先引入 echarts的jar包依赖和js脚本

这里后端使用 ECharts-2.2.7.jar
下载地址 http://mvnrepository.com/artifact/com.github.abel533/ECharts
前端使用 echart.js
下载地址 http://echarts.baidu.com/echarts2/
前后端都是使用2.X版本 echarts对2.x支持比较全面

注意：echarts的后端封装是针对于Echarts2.x相契合的对于3.x之后没有进行更新所以如果使用尽量安装2.x的官方文档进行相应的option对象的后台封装！！切记

依赖引入完之后就可以开始写代码了

1.前后端实现 – 柱状图表

后端首先进行option对象的封装

代码如下：

/**
*    柱状图------图表测试 Controller 
*
*/
@Controller
@RequestMapping("/echart")
public class EchartsController {
   
   


/**
     * 柱状图 图表option 的封装  测试用例--路段人流数据
     * @return
     */
    @RequestMapping(value = "/bar",method = RequestMethod.POST)
    @ResponseBody()
    public String bar(){

        //由于是测试用例首先声明  1.标题   2.x轴代表的路段  3.路段数据
        //标题
        String title = "路段人流数据统计";
        //路段
        String[] roads = {
  
  "长江路","长河路","长安路","西湖路","建安路"};
        //路段数据
        int[] datas = {
  
  123,153,643,234,453};


        //####开始构建option对象 ######
        //这里先做最简单的测试用用例 其他渲染的属性 大家可以在了解之后自行测试使用
        //1.创建option对象    有两种方式 一种是直接创建option但是在封装好option之后要使用json转换工具进行格式的转换
        //这里使用第二种方式直接构建GsonOption 通过toString方法可转换成json
        Option option =