github开源项目 eval-echarts 对echarts3.x前后端封装

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.项目截图

饼状图

折线图

条线图