1.项目简介
对echarts前端js对象option进行封装,前端只需要传
接口对应url
和div的id
后台提供对应的java数据结构
,每种图形对应自己的抽象模板类
,整个数据对象拼接的过程都已经封装好
极大的方便了开发人员,只需关注业务代码
和sql语句
的实现即可
2.特点
- 1.使用多种设计模式保证代码的扩展性和解耦
- 2.项目整体架构已经搭建完成
- 3.自己可以动手扩展相关echarts图形实现代码
- 4.目前支持6种图形 折线图,柱状图,条线图,饼状图,环形图,雷达图
- 5.持续更新ing…
3.开源地址
https://github.com/huajiexiewenfeng/eval-echarts
工作繁忙,每天抽时间更新
4.环境
- jdk8
- springboot2.x
- jquery1.11.x
- echarts3.x
5.项目架构
从本文的基础上做的开源项目
【设计模式(实战)-抽象工厂模式】 https://blog.csdn.net/xiewenfeng520/article/details/83544073
总体架构变化不大
6.使用方式
引入
<script type="text/javascript" src="/js/echartsCommon.js"></script>
以饼状图为例
前端调用
function initPie() {
configure = {
id: 'pie',
url: '/report/echarts/pieSimple',
titleText: '某站点用户访问来源',
seriesName:"访问来源",
seriesRadius: '70%',
tooltipShow: true, // 不显示tooltip
}
var queryParams = function (params) {
return BsTool.getFormData("searchFormCondition");
}
EchartsTool.initPieSimple(configure, queryParams);
}
html
<div id="pie" style="height: 400px;"></div>
java代码
@Autowired
private EchartsFactory echartsFactory;
/**
* PieSimple 饼状图
*/
@PostMapping("/pieSimple")
@ResponseBody
public ResponseBase pieSimple(HttpServletRequest request) {
Map<String, Object> conditionMap = QueryUtils.getParams(request);
AbstractPieSimple pieSimple = echartsFactory.createPieSimple(conditionMap, PieSimpleImpl.class);
PieSimple pieSimpleData = pieSimple.initEchartsData();
return setResultSuccess(pieSimpleData);
}
业务实现类PieSimpleImpl
需要继承对应的抽象模板AbstractPieSimple
@Service
public class PieSimpleImpl extends AbstractPieSimple {
@Override
protected List<ExtMapData<String, String>> ListExtMapData() {
List<ExtMapData<String, String>> list = new ArrayList();
list.add(new ExtMapData("直接访问","335"));
list.add(new ExtMapData("邮件营销","310"));
list.add(new ExtMapData("联盟广告","234"));
list.add(new ExtMapData("视频广告","135"));
list.add(new ExtMapData("搜索引擎","1548"));
return list;
}
@Override
protected void setParameters(Map<String, Object> parameters) {
super.parameters = parameters;
}
}
7.项目截图
饼状图
折线图
条线图