Echarts后台option对象

最新推荐文章于 2025-06-13 17:24:07 发布

SuperGirl2020

最新推荐文章于 2025-06-13 17:24:07 发布

阅读量1.4k

点赞数

分类专栏： echarts

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用Echarts在后台封装图表数据的方法，通过创建Option对象并将其转化为JSON格式，实现在前端轻松加载和展示动态图表。此方法避免了在前端页面中直接编写大量JS代码，使得图表管理更加清晰有序。

最近在工作中使用到了Echarts来制作图表，在网上搜了好多例子几乎都是千篇一律的在前台写死一些js，然后把变量通过ajax或者遍历集合的方式插进去，这样子一旦某一页面的图表一多，就会异常混乱，偶然在开源中国看到有人做成了个Echarts对象的jar包，在后台进行完美封装传回一个option在前台接收了并set进option即可。试了试，效果非常好。
下面给出例子代码：

该方法返回的keyword指向了前台负责图表显示的jsp页面

public String keyword() {
   if(this.dateNum == null || this.dateNum.equals("")) {
       this.dateNum = "5" ;
   }
   return "keyword" ;
}

该方法根据jsp的ajax传回来显示的条数dateNum进行数据库取值（这地方我没有使用实时拿值，而是通过定时来把数据更新进一张表，从而图表拿值会非常迅速）

可以看出我定义了一个Option对象，里面的参数都可以在里面以方法或者属性的方式调用。最后封装好Option后，把他放入jsonObject对象传回前台一接收json值即可。

public String getKeyWordData() throws ParseException{
   LoginUser user = (LoginUser) ((SecurityContext) ServletActionContext
               .getRequest().getSession()
               .getAttribute("SPRING_SECURITY_CONTEXT")).getAuthentication()
               .getPrincipal();
   Long id = user.getId() ;
   int num = Integer.parseInt(this.dateNum) ;
   jsonObj = new JSONObject() ;
   //取到该用户的所有关键字放入legendName数组
   List<String> names = this.cacheCountManager.getKeywordNames(id) ;
   String[] legendName = new String[names.size()] ;
   for(int i=0;i<names.size();i++) {
       String name = names.get(i) ;
       legendName[i] = name ;
   }
   String[] riqiArr = new String[num] ;
   for(int j=num;j>0;j--) {
       String riqi = getStrDate(String.valueOf(j)) ;
       riqiArr[num-j] = riqi ;
   }
   Option option=new GsonOption();
   option.title().text("关键词文章统计");
   option.tooltip().trigger(Trigger.axis);
   option.legend().data(legendName);
   ValueAxis axis = new ValueAxis();
   axis.type(AxisType.category).boundaryGap(false).data(riqiArr);
   option.xAxis(axis);
   CategoryAxis yaxis = new CategoryAxis();
   yaxis.type(AxisType.value);
   option.yAxis(yaxis);
   List<Series> seriess = new ArrayList<Series>() ;
   MarkPoint mp = new MarkPoint() ;
   mp.data(new Data().type(MarkType.max).name("最大值"),
           new Data().type(MarkType.min).name("最小值")) ;
   for(int i=0;i<names.size();i++) {
       Integer[] countArr = new Integer[num] ;
       Line line = new Line() ;
       String name = names.get(i) ;
       for(int j=num;j>0;j--) {
           String riqi = getStrDate(String.valueOf(j)) ;
           countArr[num-j] = this.cacheCountManager.getCount(id, riqi, name) ;
       }
       line.name(name).type(SeriesType.line).data(countArr).markPoint(mp) ;
       seriess.add(line) ;
   }
   option.series(seriess);
   jsonObj=JSONObject.fromObject(option.toString());
   return "echartsJson";
}

页面显示部分很简洁。

<div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;">图形正在加载中...</div>

$(function(){
require([ 'echarts','echarts/chart/line' ],DrawEChart);
});

jar包下载：http://mvnrepository.com/artifact/com.github.abel533/ECharts
---------------------
转自：https://blog.youkuaiyun.com/benjamin_whx/article/details/41724533