使用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);
    }