基於SpringMVC框架使用ECharts3.0實現折線圖，柱狀圖，餅狀圖,的繪製

頁面部分

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts柱狀圖</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        $().ready(function() {
            var myChart = echarts.init(document.getElementById('main'));
            //圖表顯示提示信息
            myChart.showLoading();
            //定義圖表options
            var options = {
                color : [ '#3398DB' ],
                title : {
                    text : "通過Ajax獲取數據呈現圖標示例",
                    subtext : "www.stepday.com",
                    sublink : "http://www.stepday.com/myblog/?Echarts"
                },
                tooltip : {
                    trigger : 'axis'
                },
                legend : {
                    data : []
                },
                toolbox : {
                    show : true,
                    feature : {
                        mark : false
                    }
                },
                calculable : true,
                xAxis : [ {
                    type : 'category',
                    data : []
                } ],
                yAxis : [ {
                    type : 'value',
                    splitArea : {
                        show : true
                    }
                } ],
                series : [ {
                    barWidth : '60%'
                } ]
            };

            //通過Ajax獲取數據
            $.ajax({
                type : "post",
                async : false, //同步執行
                url : "showEchartBar.action",
                dataType : "json", //返回數據形式爲json
                success : function(result) {
                    if (result) {
                        //將返回的category和series對象賦值給options對象內的category和series
                        //因爲xAxis是一個數組 這裏需要是xAxis[i]的形式
                        options.xAxis[0].data = result.category;
                        options.series = result.series;
                        options.legend.data = result.legend;

                        myChart.hideLoading();
                        myChart.setOption(options);
                    }
                },
                error : function(errorMsg) {
                    alert("圖表請求數據失敗啦!");
                }
            });

        });
    </script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echarts餅狀圖</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body>
    <!--定義頁面圖表容器-->
    <!-- 必須制定容器的大小（height、width） -->
    <div id="main"
        style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div>

    <script type="text/javascript">
        $().ready(function() {
            var myChart = echarts.init(document.getElementById('main'));
            //圖表顯示提示信息
            myChart.showLoading();
            //定義圖表options
            var options = {
                title : {
                    text : '某站點用戶訪問來源',
                    subtext : '純屬虛構',
                    x : 'center'
                },
                tooltip : {
                    trigger : 'item',
                    formatter : "{a} <br/>{b} : {c} ({d}%)"
                },
                legend : {
                    orient : 'vertical',
                    left : 'left',
                    data : []
                },
                series : [ {
                    name : '訪問來源',
                    type : 'pie',
                    data : []
                } ]
            };
            //通過Ajax獲取數據
            $.ajax({
                type : "post",
                async : false, //同步執行
                url : "showEchartPie.action",
                dataType : "json", //返回數據形式爲json
                success : function(result) {
                    if (result) {
                        options.legend.data = result.legend;

                        //將返回的category和series對象賦值給options對象內的category和series
                        //因爲xAxis是一個數組 這裏需要是xAxis[i]的形式
                        options.series[0].name = result.series[0].name;
                        options.series[0].type = result.series[0].type;
                        var serisdata = result.series[0].data;
                        
                        //遍歷
                        /* var datas = [];
                        for ( var i = 0; i < serisdata.length; i++) {
                            datas.push({
                                name : serisdata[i].name,
                                value : serisdata[i].value
                            });
                        }
                        options.series[0].data = datas; */

                        //jquery遍歷
                        var value = [];
                        $.each(serisdata, function(i, p) {
                            value[i] = {
                                'name' : p['name'],
                                'value' : p['value']
                            };
                        });
                        options.series[0]['data'] = value;

                        myChart.hideLoading();
                        myChart.setOption(options);
                    }
                },
                error : function(errorMsg) {
                    alert("圖表請求數據失敗啦!");
                }
            });

        });
    </script>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<title>echarts折線圖</title>
<body>
    <!--定義頁面圖表容器-->
    <!-- 必須制定容器的大小（height、width） -->
    <div id="main"
        style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div>

    <script type="text/javascript">
        $().ready(
                function() {
            var myChart = echarts.init(document.getElementById('main'));
            //圖表顯示提示信息
           myChart.showLoading();
            //定義圖表options
            var options = {
                title: {
                    text: "通過Ajax獲取數據呈現圖標示例",
                    subtext: "www.stepday.com",
                    sublink: "http://www.stepday.com/myblog/?Echarts"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: false
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true }
                    }
                ],
                series: []
                };

                    //通過Ajax獲取數據
                    $.ajax({
                        type : "post",
                        async : false, //同步執行
                        url : "showEchartLine.action",
                        dataType : "json", //返回數據形式爲json
                        success : function(result) {
                            if (result) {
                                //將返回的category和series對象賦值給options對象內的category和series
                                //因爲xAxis是一個數組 這裏需要是xAxis[i]的形式
                                    options.xAxis[0].data = result.category;
                                    options.series = result.series;
                                    options.legend.data = result.legend;
                                    myChart.hideLoading();
                                    myChart.setOption(options);
                            }
                        },
                        error : function(errorMsg) {
                            alert("圖表請求數據失敗啦!");
                        }
                    });

                });
    </script>
</body>
</html>

後端java代碼

@Controller
@RequestMapping("/echartsJSP")
public class EchartAction {

    @Autowired
    private TotalNumBiz toatlNumBiz;
    @Autowired
    private VisitBiz visitBiz;
    
    
    @RequestMapping("/showEchartLine")
    @ResponseBody
    public EchartData lineData() {
        System.out.println("折線圖");
        List<String> category = new ArrayList<String>();
        List<Long> serisData=new ArrayList<Long>();
        List<TotalNum> list = toatlNumBiz.findAll();
        for (TotalNum totalNum : list) {
            category.add(totalNum.getWeek());
            serisData.add(totalNum.getCount());
        }
        List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "總數比較" }));// 數據分組
        List<Series> series = new ArrayList<Series>();// 縱座標
        series.add(new Series("總數比較", "line", serisData));
        EchartData data = new EchartData(legend, category, series);
        return data;
    }
    @RequestMapping("/showEchartBar")
    @ResponseBody
    public EchartData BarData() {
        System.out.println("柱狀圖");
        List<String> category = new ArrayList<String>();
        List<Long> serisData=new ArrayList<Long>();
        List<TotalNum> list = toatlNumBiz.findAll();
        for (TotalNum totalNum : list) {
            category.add(totalNum.getWeek());
            serisData.add(totalNum.getCount());
        }
        List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "總數比較" }));// 數據分組
        List<Series> series = new ArrayList<Series>();// 縱座標
        series.add(new Series("總數比較", "bar", serisData));
        EchartData data = new EchartData(legend, category, series);
        return data;
    }
    /**
     * 餅狀圖
     * @param <T>
     * @return
     */
    @RequestMapping("/showEchartPie")
    @ResponseBody
    public EchartData PieData() {
        List<String> legend = new ArrayList<String>();
        List<Map> serisData=new ArrayList<Map>();
        
        List<Visit> list = visitBiz.findAll();
        for (Visit visit : list) {
            Map map =new HashMap();
            legend.add(visit.getName());
            map.put("value", visit.getValue());
            map.put("name",visit.getName());
            serisData.add(map);
        }
        List<Series> series = new ArrayList<Series>();// 縱座標
        series.add(new Series("總數比較", "pie",serisData));
        EchartData data = new EchartData(legend,null, series);
        return data;
    }
}

另外使用EchartsData和Series兩個類封裝數據

public class EchartData {

    public List<String> legend = new ArrayList<String>();// 數據分組
    public List<String> category = new ArrayList<String>();// 橫座標
    public List<Series> series = new ArrayList<Series>();// 縱座標

    public EchartData(List<String> legendList, List<String> categoryList,
            List<Series> seriesList) {
        super();
        this.legend = legendList;
        this.category = categoryList;
        this.series = seriesList;
    }
}

public class Series<T>{
    public String name;

    public String type;
    public List<T> data;// 這裏要用int 不能用String 不然前臺顯示不正常（特別是在做數學運算的時候）

    public Series(String name, String type, List<T> data) {
        super();
        this.name = name;
        this.type = type;
        this.data = data;
    }

測試使用的實體類及其他部分

public class TotalNum {
    private Integer id;

    private String week;

    private Long count;

public class Visit {
    private Integer id;

    private String name;

    private Integer value;

SpringMVC框架下使用jfreechart繪製折線圖，柱狀圖，餅狀圖

java代碼

@Controller
public class CityAction {

    @Autowired
    private CityBiz cityBiz;

    //柱狀圖
    @RequestMapping(value = "getColumnChart")
    public ModelAndView getColumnChart(HttpServletRequest request, HttpServletResponse response, ModelMap modelMap)
            throws Exception {
        CategoryDataset dataset = getDataSet(cityBiz.findAll());
        JFreeChart chart = ChartFactory.createBarChart3D("用戶統計報表（所屬單位）", // 主標題的名稱
                "所屬單位名稱", // X軸的標籤
                "數量", // Y軸的標籤
                dataset, // 圖標顯示的數據集合
                PlotOrientation.VERTICAL, // 圖像的顯示形式（水平或者垂直）
                true, // 是否顯示子標題
                true, // 是否生成提示的標籤
                true); // 是否生成URL鏈接

        JfreeUtil.setJfreeChart(chart);
        // 6. 將圖形轉換爲圖片，傳到前臺
        String fileName = ServletUtilities.saveChartAsJPEG(chart, 700, 400, null, request.getSession());
        String chartURL = request.getContextPath() + "/chart?filename=" + fileName;
        modelMap.put("chartURLBar", chartURL);
        return new ModelAndView("index", modelMap);
    }

    //餅狀圖
    @RequestMapping(value = "getColumnpie")
    public ModelAndView getColumnpie(HttpServletRequest request, HttpServletResponse response, ModelMap modelMap)
            throws Exception {
        DefaultPieDataset dataset = getDataSetpie(cityBiz.findAll());

        JFreeChart chart = ChartFactory.createPieChart3D("用戶統計報表（所屬單位）", // 主標題的名稱
                dataset, // 圖標顯示的數據集合
                true, // 是否顯示子標題
                true, // 是否生成提示的標籤
                true); // 是否生成URL鏈接

        JfreeUtil.setJfreePie(chart);

        // 6. 將圖形轉換爲圖片，傳到前臺
        String fileName = ServletUtilities.saveChartAsJPEG(chart, 700, 400, null, request.getSession());
        String chartURL = request.getContextPath() + "/chart?filename=" + fileName;
        modelMap.put("chartURLPie", chartURL);
        return new ModelAndView("index", modelMap);
    }
    
    //折線圖
    @RequestMapping(value = "getColumnLine")
    public ModelAndView getColumnLine(HttpServletRequest request, HttpServletResponse response, ModelMap modelMap)
            throws Exception {
        DefaultCategoryDataset dataset = getDataSetLine(cityBiz.findAll());
        
        JFreeChart chart = ChartFactory.createLineChart("用戶統計報表（所屬單位）", // 主標題的名稱
                "所屬單位名稱", // X軸的標籤
                "數量", // Y軸的標籤
                dataset, // 圖標顯示的數據集合
                PlotOrientation.VERTICAL, // 圖像的顯示形式（水平或者垂直）
                true, // 是否顯示子標題
                true, // 是否生成提示的標籤
                true); // 是否生成URL鏈接
        
        JfreeUtil.setJfreeLine(chart);

        
        // 6. 將圖形轉換爲圖片，傳到前臺
        String fileName = ServletUtilities.saveChartAsJPEG(chart, 700, 400, null, request.getSession());
        String chartURL = request.getContextPath() + "/chart?filename=" + fileName;
        modelMap.put("chartURLLine", chartURL);
        return new ModelAndView("index", modelMap);
    }
    
    
    
    
    
    // 獲取柱狀圖數據集
    private CategoryDataset getDataSet(List<City> cityList) {
        DefaultCategoryDataset dataset = new DefaultCategoryDataset();
        if (cityList != null && cityList.size() > 0) {
            for (City city : cityList) {
                dataset.addValue(city.getCount(), city.getCityname(), city.getFruitname());
            }
        }
        return dataset;
    }

    // 獲取餅狀圖數據集
    private DefaultPieDataset getDataSetpie(List<City> cityList) {
        DefaultPieDataset dataset = new DefaultPieDataset();
        // if (cityList != null && cityList.size() > 0) {
        // for (City city : cityList) {
        // dataset.addValue(city.getCount(), city.getCityname(),
        // city.getFruitname());
        // }
        // }

        dataset.setValue("北京", 13);
        dataset.setValue("深圳", 6);
        dataset.setValue("上海", 2);
        return dataset;
    }

    // 獲取折線圖數據集
    private DefaultCategoryDataset getDataSetLine(List<City> cityList) {
        DefaultCategoryDataset dataset = new DefaultCategoryDataset();
        // if (cityList != null && cityList.size() > 0) {
        // for (City city : cityList) {
        // dataset.addValue(city.getCount(), city.getCityname(),
        // city.getFruitname());
        // }
        // }
        
        dataset.addValue(13, "所屬單位", "北京");
        dataset.addValue(6, "所屬單位", "深圳");
        dataset.addValue(2, "所屬單位", "上海");
        dataset.addValue(24, "水果", "香蕉");
        dataset.addValue(15, "水果", "梨子");
        dataset.addValue(27, "水果", "蘋果");
        return dataset;
    }
}

public class JfreeUtil {

    // 柱狀圖
    public static void setJfreeChart(JFreeChart chart) {
        // 處理圖形上的亂碼
                // 處理主標題的亂碼
                chart.getTitle().setFont(new Font("宋體", Font.BOLD, 18));
                // 處理子標題亂碼
                chart.getLegend().setItemFont(new Font("宋體", Font.BOLD, 15));
                // 獲取圖表區域對象
                CategoryPlot categoryPlot = (CategoryPlot) chart.getPlot();
                // 獲取X軸的對象
                CategoryAxis3D categoryAxis3D = (CategoryAxis3D) categoryPlot.getDomainAxis();
                // 獲取Y軸的對象
                NumberAxis3D numberAxis3D = (NumberAxis3D) categoryPlot.getRangeAxis();
                // 處理X軸上的亂碼
                categoryAxis3D.setTickLabelFont(new Font("宋體", Font.BOLD, 15));
                // 處理X軸外的亂碼
                categoryAxis3D.setLabelFont(new Font("宋體", Font.BOLD, 15));
                // 處理Y軸上的亂碼
                numberAxis3D.setTickLabelFont(new Font("宋體", Font.BOLD, 15));
                // 處理Y軸外的亂碼
                numberAxis3D.setLabelFont(new Font("宋體", Font.BOLD, 15));
                // 處理Y軸上顯示的刻度，以1作爲1格
                numberAxis3D.setAutoTickUnitSelection(false);
                NumberTickUnit unit = new NumberTickUnit(1);
                numberAxis3D.setTickUnit(unit);
                // 獲取繪圖區域對象
                BarRenderer3D barRenderer3D = (BarRenderer3D) categoryPlot.getRenderer();
                // 設置柱形圖的寬度
                barRenderer3D.setMaximumBarWidth(0.07);
                // 在圖形上顯示數字
                barRenderer3D.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
                barRenderer3D.setBaseItemLabelsVisible(true);
                barRenderer3D.setBaseItemLabelFont(new Font("宋體", Font.BOLD, 15));
    }
    
    // 餅狀圖
    public static void setJfreePie(JFreeChart chart) {

        // 處理圖形上的亂碼
        // 處理主標題的亂碼
        chart.getTitle().setFont(new Font("宋體", Font.BOLD, 18));
        // 處理子標題亂碼
        chart.getLegend().setItemFont(new Font("宋體", Font.BOLD, 15));
        // 獲取圖表區域對象
        PiePlot3D categoryPlot = (PiePlot3D) chart.getPlot();
        // 處理圖像上的亂碼
        categoryPlot.setLabelFont(new Font("宋體", Font.BOLD, 15));
        // 設置圖形的生成格式爲（上海 2 （10%））
        String format = "{0} {1} ({2})";
        categoryPlot.setLabelGenerator(new StandardPieSectionLabelGenerator(format));
        // 使用ChartFrame對象顯示圖像
    }
    
    // 折線圖
    public static void setJfreeLine(JFreeChart chart) {
        // 處理圖形上的亂碼
                // 處理主標題的亂碼
                chart.getTitle().setFont(new Font("宋體", Font.BOLD, 18));
                // 處理子標題亂碼
                chart.getLegend().setItemFont(new Font("宋體", Font.BOLD, 15));
                // 獲取圖表區域對象
                CategoryPlot categoryPlot = (CategoryPlot) chart.getPlot();
                // 獲取X軸的對象
                CategoryAxis categoryAxis = (CategoryAxis) categoryPlot.getDomainAxis();
                // 獲取Y軸的對象
                NumberAxis numberAxis = (NumberAxis) categoryPlot.getRangeAxis();
                // 處理X軸上的亂碼
                categoryAxis.setTickLabelFont(new Font("宋體", Font.BOLD, 15));
                // 處理X軸外的亂碼
                categoryAxis.setLabelFont(new Font("宋體", Font.BOLD, 15));
                // 處理Y軸上的亂碼
                numberAxis.setTickLabelFont(new Font("宋體", Font.BOLD, 15));
                // 處理Y軸外的亂碼
                numberAxis.setLabelFont(new Font("宋體", Font.BOLD, 15));
                // 處理Y軸上顯示的刻度，以1作爲1格
                numberAxis.setAutoTickUnitSelection(false);
                NumberTickUnit unit = new NumberTickUnit(1);
                numberAxis.setTickUnit(unit);
                // 獲取繪圖區域對象
                LineAndShapeRenderer lineAndShapeRenderer = (LineAndShapeRenderer) categoryPlot.getRenderer();
                // 在圖形上顯示數字
                lineAndShapeRenderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
                lineAndShapeRenderer.setBaseItemLabelsVisible(true);
                lineAndShapeRenderer.setBaseItemLabelFont(new Font("宋體", Font.BOLD, 15));
                // 在圖形上添加轉折點（使用小矩形顯示）
                Rectangle shape = new Rectangle(10, 10);
                lineAndShapeRenderer.setSeriesShape(0, shape);
                lineAndShapeRenderer.setSeriesShapesVisible(0, true);
    }
}

jsp頁面

<div style="text-align: center">
        jfreechart _3D柱狀圖 <br>
        <br> 點擊顯示柱狀圖<a href="getColumnChart.action">getMajorChart</a> <br>
        <br> 
        <c:if test="${not empty chartURLBar}">  
        <img src="${chartURLBar}" width=600 height=400 border=0
            color=gray>
        </c:if>  
    </div>

    <div style="text-align: center">
        jfreechart _3D餅狀圖 <br>
        <br> 點擊顯示餅狀圖<a href="getColumnpie.action">getMajorChart</a> <br>
        <br> 
        <c:if test="${not empty chartURLPie}">  
        <img src="${chartURLPie}" width=600 height=400 border=0
            color=gray>
        </c:if>  
    </div>

    <div style="text-align: center">
        jfreechart _3D折線狀圖 <br>
        <br> 點擊顯示折線圖<a href="getColumnLine.action">getMajorChart</a> <br>
        <br> 
        <c:if test="${not empty chartURLLine}">  
        <img src="${chartURLLine}" width=600 height=400 border=0
            color=gray>
        </c:if>  
    </div>

web.xml

//插入下面部分
    <servlet>
        <servlet-name>DisplayChart</servlet-name>
        <servlet-class>org.jfree.chart.servlet.DisplayChart</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>DisplayChart</servlet-name>
        <url-pattern>/chart</url-pattern>
    </servlet-mapping>

</web-app>

jar包jfreechart1.0.13

yesIcando-bupt

發佈了164 篇原創文章 · 獲贊 26 · 訪問量 18萬+

私信關注

基於SpringMVC框架使用ECharts3.0實現折線圖，柱狀圖，餅狀圖,的繪製（上篇）

SpringMVC框架下使用jfreechart繪製折線圖，柱狀圖，餅狀圖

.NET有哪些好用的定時任務調度框架

Python 將PDF轉爲PDF/A、PDF/X，以及PDF/A轉回PDF

elk3

Kafka存儲機制

aws語音呼叫調用，告警電話

深度學習框架火焰圖pprof和CUDA Nsys配置指南

爬蟲兩種繞過5s盾的方法

【轉】[C#] WebAPI 防止併發調用二（冥等性）

【轉】[SQL Server]關掉 SSMS 的 IntelliSense

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

當一個線程進入一個對象的一個synchronized方法後，其它線程是否可進入此對象的其它方法? ?

泛洪填充算法(Flood Fill Algorithm)

基於SpringMVC框架使用ECharts3.0實現折線圖，柱狀圖，餅狀圖,的繪製（上篇）

ajax處理跨域有幾種方式？實現原理是什麼？

尋找最小生成樹的歐拉路徑，即一筆畫問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結