使用Echarts实现前台可视化数据展示

（本方法未使用echarts官方封装的jar包，使用的自己编写的实体类）

1、下载并导入echars的js文件，在jsp页面引用

<!-- ECharts文件引入 -->
<script src="${contextPath}/文件路径/echarts-all.js"></script>

2、jsp创建一个div和查询按钮

<div id="chart_bar" style="height: 300px;border: 1px solid #ccc;"></div>
<button id="queryButton" onclick="queryChart()"></button>

3、js方法

function queryChart(){
        $.ajax({
            url: getContextPath() + "/testController/queryChart",
            type: "post",
            dataType: "json",
            data: {
                
            },
            success:function (data){
                var option = data;
                var chart = echarts.init(document.getElementById('chart_bar'));
                chart.setOption(option);
                chart.on('click', function (params) {
                    alert(params.name);
                });
            }
        });
    }

4、后台写了一个实体类，用来存放可视化数据（自己写的，根据实际需求自己添加方法）

public class MyEchartsBean {
    public MyEchartsBean(){
        this.setEchartsType();
        this.setTitle("柱形图");
        this.setLegend();
        this.setToolbox();
        this.setTooltip();
        this.setyAxis();
        this.setxAxis();
        this.setSeries();
    }
    
    private String echartsType;//可视化图形类型
    private Map<String, Object> title;//标题
    private Map<String, Object> legend;//图例说明
    private Map<String, Object> toolbox;//工具栏
    private Map<String, Object> tooltip;//
    private List<Map<String, Object>> yAxis;//y轴
    private List<Map<String, Object>> xAxis;//x轴
    private List<Map<String, Object>> series;//展示数据
    
    public String getEchartsType() {
        return echartsType;
    }
    /**
     * 设置可视化类型
     * line:折线;bar:柱形图;pie:饼图
     */
    public void setEchartsType(String echartsType) {
        this.echartsType = echartsType;
    }
    private void setEchartsType() {
        this.echartsType = "bar";
    }
    public Map<String, Object> getTitle() {
        return title;
    }
    /**
     * 设置标题
     * @param title
     */
    public void setTitle(String title) {
        Map<String, Object> mapTitle = new HashMap<String, Object>();
        mapTitle.put("text", title);
        this.title = mapTitle;
    }
    public Map<String, Object> getLegend() {
        return legend;
    }
    private void setLegend() {
        Map<String, Object> mapLegend = new HashMap<String, Object>();
        mapLegend.put("data", new String[]{"类型1","类型2","类型3"});
        this.legend = mapLegend;
    }
    
    /**
     * 设置图例说明
     * @param legend
     */
    public void setLegend(String[] legend) {
        Map<String, Object> mapLegend = new HashMap<String, Object>();
        mapLegend.put("data", legend);
        this.legend = mapLegend;
    }
    public Map<String, Object> getToolbox() {
        return toolbox;
    }
    private void setToolbox() {
        Map<String, Object> mapToolbox = new HashMap<String, Object>();
        mapToolbox.put("show", true);
            Map<String, Object> feature = new HashMap<String, Object>();
                Map<String, Object> magicType = new HashMap<String, Object>();
                magicType.put("show", true);
                String[] strs = {"line", "bar", "stack", "tiled"};
                magicType.put("type", strs);
            feature.put("magicType", magicType);
                Map<String, Object> dataView = new HashMap<String, Object>();
                dataView.put("show", true);
                dataView.put("readOnly", false);
            feature.put("dataView", dataView);
                Map<String, Object> restore = new HashMap<String, Object>();
                restore.put("show", true);
            feature.put("restore", restore);
                Map<String, Object> saveAsImage = new HashMap<String, Object>();
                saveAsImage.put("show", true);
            feature.put("saveAsImage", saveAsImage);
        mapToolbox.put("feature", feature);
        this.toolbox = mapToolbox;
    }
    /**
     * 设置工具按钮是否显示
     * @param flag
     */
    public void setToolboxShow(boolean flag) {
        Map<String, Object> mapToolbox = new HashMap<String, Object>();
        mapToolbox.put("show", flag);
            Map<String, Object> feature = new HashMap<String, Object>();
                Map<String, Object> magicType = new HashMap<String, Object>();
                magicType.put("show", true);
                String[] strs = {"line", "bar", "stack", "tiled"};
                magicType.put("type", strs);
            feature.put("magicType", magicType);
                Map<String, Object> dataView = new HashMap<String, Object>();
                dataView.put("show", true);
                dataView.put("readOnly", false);
            feature.put("dataView", dataView);
                Map<String, Object> restore = new HashMap<String, Object>();
                restore.put("show", true);
            feature.put("restore", restore);
                Map<String, Object> saveAsImage = new HashMap<String, Object>();
                saveAsImage.put("show", true);
            feature.put("saveAsImage", saveAsImage);
        mapToolbox.put("feature", feature);
        this.toolbox = mapToolbox;
    }
    public Map<String, Object> getTooltip() {
        return tooltip;
    }
    private void setTooltip() {
        Map<String, Object> mapTooltip = new HashMap<String, Object>();
        mapTooltip.put("trigger", "axis");
            Map<String, Object> axisPointer = new HashMap<String, Object>();
            axisPointer.put("type", "shadow");
        mapTooltip.put("axisPointer", axisPointer);
        this.tooltip = mapTooltip;
    }
    /**
     * 设置悬浮提示类型
     * line:直线;shadow:阴影;
     * @param type
     */
    public void setTooltip(String type) {
        Map<String, Object> mapTooltip = new HashMap<String, Object>();
        mapTooltip.put("trigger", "axis");
            Map<String, Object> axisPointer = new HashMap<String, Object>();
            axisPointer.put("type", type);
        mapTooltip.put("axisPointer", axisPointer);
        this.tooltip = mapTooltip;
    }
    public List<Map<String, Object>> getyAxis() {
        return yAxis;
    }
    private void setyAxis() {
        List<Map<String, Object>> listYAxis = new LinkedList<>();
            Map<String, Object> mapYAxis = new HashMap<String, Object>();
            mapYAxis.put("type", "value");
        listYAxis.add(mapYAxis);
        this.yAxis = listYAxis;
    }
    public List<Map<String, Object>> getxAxis() {
        return xAxis;
    }
    private void setxAxis() {
        List<Map<String, Object>> listXAxis = new LinkedList<>();
            Map<String, Object> mapYAxis = new HashMap<String, Object>();
            mapYAxis.put("type", "category");
            String[] strs= {"1","2","3"};
            mapYAxis.put("data", strs);
            listXAxis.add(mapYAxis);
        this.xAxis = listXAxis;
    }
    /**
     * 设置横坐标
     * @param data
     */
    public void setxAxis(String[] data) {
        List<Map<String, Object>> listXAxis = new LinkedList<>();
            Map<String, Object> mapYAxis = new HashMap<String, Object>();
            mapYAxis.put("type", "category");
            mapYAxis.put("data", data);
            listXAxis.add(mapYAxis);
        this.xAxis = listXAxis;
    }
    public List<Map<String, Object>> getSeries() {
        return series;
    }
    private void setSeries() {
        List<Map<String, Object>> series = new LinkedList<Map<String,Object>>();
        Map<String, Object> mapSeries = new HashMap<String, Object>();
        String []arrStr={"-","180","-"};
        mapSeries.put("name", "类型1");
        mapSeries.put("type", this.echartsType);
        mapSeries.put("data", arrStr);
        series.add(mapSeries);
        mapSeries = new HashMap<String, Object>();
        String []arrStr2={"156","200","256"};
        mapSeries.put("name", "类型2");
        mapSeries.put("type", this.echartsType);
        mapSeries.put("data", arrStr2);
        series.add(mapSeries);
        mapSeries = new HashMap<String, Object>();
        String []arrStr3={"-","-","20"};
        arrStr3="30,-,60".split(",");
        mapSeries.put("name", "类型3");
        mapSeries.put("type", this.echartsType);
        mapSeries.put("data", arrStr3);
        series.add(mapSeries);
        this.series = series;
    }
    
    /**
     * 清除展示数据
     * @param name
     * @param data
     */
    public void clearSeries() {
        this.series.clear();
    }
    
    /**
     * 添加展示数据
     * @param name
     * @param data
     */
    public void addSeries(String name,String [] data) {
        Map<String, Object> mapSeries = new HashMap<String, Object>();
        mapSeries.put("name", name);
        mapSeries.put("type", this.echartsType);
        mapSeries.put("data", data);
        this.series.add(mapSeries);
    }
}

5、后台controller根据要展示的数据生成拼装对象，转为json对象并传到前台jsp

@RequestMapping(value = "/queryChart", method = { RequestMethod.POST,RequestMethod.GET })
    public void queryChart(HttpServletRequest request,HttpServletResponse response) throws Exception {        
        //实例化一个对象并放入要展示的数据
　　　　 MyEchartsBean m = new MyEchartsBean();
        m.setToolboxShow(false);
        m.setTitle("标题");
        m.setLegend(new String[]{"数据1"});//图标示例，与展示的每一组值对应
        m.setxAxis(new String[]{"01-01","01-02","01-03"});//横坐标
        m.clearSeries();
        m.addSeries("数据1", new String[]{"100","200","300"});//要展示的值，要与横坐标对应
        writeJSON(response, m);
    }