jsp代碼

<div class="bg-fff pa-15 border border-ddd">
       <div id="userStaticstics" style="width: 1600px;height:400px;"></div>
</div>

js 代碼

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    var userChart = echarts.init(document.getElementById('userStaticstics'));
    // 指定圖表的配置項(xiàng)和數(shù)據(jù)
    userChartOption = {
        title: {
            text: '用戶統(tǒng)計(jì)'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐標(biāo)軸指示器昔榴，坐標(biāo)軸觸發(fā)有效
                type : 'shadow'        // 默認(rèn)為直線它褪，可選為：'line' | 'shadow'
            }
        },
        legend: {
            data:['登錄用戶數(shù)', '有效用戶數(shù)', '總用戶數(shù)']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                name : '日期'
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '數(shù)量'
            }
        ],
        series : [
            {
                type: 'bar',
                seriesLayoutBy: 'row',
                label: {
                    normal: {
                        show: true,
                    }
                }
            },
            {
                type: 'bar',
                seriesLayoutBy: 'row',
                label: {
                    normal: {
                        show: true,
                    }
                }
            },
            {
                type: 'bar',
                seriesLayoutBy: 'row',
                label: {
                    normal: {
                        show: true,
                    }
                }
            }
        ]
    };
    // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表锣吼。
    userChart.setOption(userChartOption);

ajax 請求后的數(shù)據(jù)裝載

$.getJSON("${URL}", {'param' : param}, function(eChartsData){
            if (eChartsData !== null) {
               userChart.setOption({
                   xAxis : {
                       data : eChartsData.userXAxisData
               },
               series : eChartsData.userSeriesList
               });
            }
}

后臺 java 代碼

        //x軸
        List<String> xAxisData = new ArrayList<>();
        for (int i = 0; i < sysUserActivities.size(); i++) {
            String dateData = sysUserActivities.get(i).getCountDate().toString();
            xAxisData.add(dateData.substring(0, 4) + "-" + dateData.substring(4, 6) + "-" + dateData.substring(6));
        }

        //用戶數(shù)據(jù)
        List<JSONObject> userSeriesList = new ArrayList<>();
        JSONObject loginUserJson = new JSONObject();
        loginUserJson.put("name", "登錄用戶數(shù)");
        loginUserJson.put("data", loginUserNum);
        JSONObject ableUserJson = new JSONObject();
        ableUserJson.put("name", "有效用戶數(shù)");
        ableUserJson.put("data", ableUserNum);
        JSONObject totalUserJson = new JSONObject();
        totalUserJson.put("name", "總用戶數(shù)");
        totalUserJson.put("data", totalUserNum);
        userSeriesList.add(loginUserJson);
        userSeriesList.add(ableUserJson);
        userSeriesList.add(totalUserJson);
        eChartsData.put("userXAxisData", xAxisData);
        eChartsData.put("userSeriesList", userSeriesList);