常規

html

//html中的內容很簡單
<div id="main" style="width: 600px;height:400px;"></div>

js庫匯入

//匯入相關指令碼
<script type="text/javascript" src="script/echarts.simple.min.js"></script>

js

//基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));

$.post("JsonTest",{},function
 
(json){
    myChart.setOption({
        tooltip:{
            trigger:'axis',
        },
        legend: {
            data:['排名']
        },
        xAxis: {
            position:'top',
            data: ["第一學期","第二學期","第三學期","第四學期","第五學期","第六學期","第七學期","第八學期"],
            axisTick:{
                show:true
 
,
                interval:0,
                alignWithLabel:true,
            },
            axisLabel:{
                interval:0,
            }
        },
        yAxis: {
            name:'名次',
            nameLocation:'middle',
            nameGap:30,
            inverse:true,
        },
        series: [{
            name: '排名'
 
,
            type: 'line',
            //這個陣列是具體的資料值
            data: json.data,
            itemStyle : { normal: {label : {show: true}}},
        }]
    });
},"json");

後臺資料

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //返回的資料
    int [] arr = {1,2,3,4,5,6,7,8};
    //JSON物件
    JSONObject obj = new JSONObject();
    obj.element("data", arr);
    //輸出
    response.getWriter().write(obj.toString());
}

注意

自己在實際操作中除錯了很久，最後發現要在ajax的呼叫中制定返回資料是json，特別在此說出來

$.post("JsonTest",{},function(json){
……});

上面這個程式碼一直除錯不通

alert(json.data)

這段程式碼執行後，顯示一直是undefined，經過修改

$.post("JsonTest",{},function(json){
……},"json");

則可以成功執行

效果

擴充套件

這個庫是百度的圖表庫，可以方便的進行圖表製作
Echarts專案連結
API手冊