JavaWeb之製圖神器Echarts

---

最近公司需求要我實現製圖的要求，如圖所示

---

問了度娘，發現了度娘自己家的echarts好像好評不斷，然後找了一下基本Java的demo能跑起來的基本沒有，要麼太複雜了！所以我寫下了這篇文章，這是最詳細的了，感覺沒有之一！

---

開始本教程:
我們就實現一個小功能吧，查詢學生的成績並且製成圖（餅狀圖和柱形圖）。

---

1.建立表（newstudentinfo）

CREATE TABLE `newstudentinfo` (
  `id` int(11) NOT NULL COMMENT '學號',
  `name` varchar(20) DEFAULT NULL COMMENT '姓名',
  `score` decimal(4,2) DEFAULT NULL COMMENT '分數',
  `subject` int(11) DEFAULT NULL COMMENT '科目編號',
  `teacherid` int(11) DEFAULT NULL COMMENT '任課教師編號',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

插入幾條資料，這裡我就不插入了，因為資料太雜了，截個圖下來。

準備好了我們就開始搭建SSM框架，具體怎麼搭建這裡不做多解釋。可以看下面的demo，也可以去看我之前的文章。

---

現在說下柱形圖怎麼做！
首先引入官方給的echarts.js。地址：http://echarts.baidu.com/download.html，然後按自己需要下載（我下載的是常用版的）。

然後引入

 <!-- 引入 echarts.js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.common.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<!---最好用<script></script>,不要<script/>-->

然後在body裡面寫個<div>

<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

然後非同步請求

var names = [];    //類別陣列（實際用來盛放X軸座標值）
    var nums = [];    //銷量陣列（實際用來盛放Y座標值）

    $.ajax({
        type: "post",
        async: true,            //非同步請求（同步請求將會鎖住瀏覽器，使用者其他操作必須等待請求完成才可以執行）
        url: "${pageContext.request.contextPath}/hello",    //請求傳送到TestServlet處
        data: {},
        dataType: "json",        //返回資料形式為json
        success: function (result) {
            //請求成功時執行該函式內容，result即為伺服器返回的json物件
            if (result) {
                for (var i = 0; i < result.length; i++) {
                    names.push(result[i].name);    //挨個取出類別並填入類別陣列
                }
                for (var i = 0; i < result.length; i++) {
                    nums.push(result[i].score);    //挨個取出銷量並填入銷量陣列
                }
                myChart.hideLoading();    //隱藏載入動畫
                myChart.setOption({        //載入資料圖表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根據名字對應到相應的系列
                        name: '成績',
                        data: nums
                    }]
                });
            }
        },
        error: function (errorMsg) {
            //請求失敗時執行該函式
            alert("圖表請求資料失敗!");
            myChart.hideLoading();
        }
    })

這裡要說一下，因為柱狀圖他接受的data型別是這種格式的

["1","2","3","4","5"];

所以我們要構造這種資料，後臺返回的就是一個簡單的json資料

接下來餅狀圖跟柱形圖差不多，就是改一個屬性為pie，還有餅狀圖接受的資料一定要是這種格式

{[value:"1",name:"one"],[value:"2",name:"two"],[value:"3",name:"three"],[value:"4",name:"four"],[value:"5",name:"five"]}

接下來看看效果圖：
柱形圖：

---

餅狀圖：

---

最後，假如還是看不懂，沒關係，demo在這裡，用了maven和ssm的，IDE是用了IDEA，一般匯入就能使用了！
地址：https://github.com/Elricyo/JavaEcharts
喜歡給個star，看桑思密達！