eCharts4 简单例子

jsp代码

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

js 代码

// 基于准备好的dom，初始化echarts实例
    var userChart = echarts.init(document.getElementById('userStaticstics'));
    // 指定图表的配置项和数据
    userChartOption = {
        title: {
            text: '用户统计'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['登录用户数', '有效用户数', '总用户数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                name : '日期'
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '数量'
            }
        ],
        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,
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    userChart.setOption(userChartOption);

ajax 请求后的数据装载

$.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));
        }

        //用户数据
        List<JSONObject> userSeriesList = new ArrayList<>();
        JSONObject loginUserJson = new JSONObject();
        loginUserJson.put("name", "登录用户数");
        loginUserJson.put("data", loginUserNum);
        JSONObject ableUserJson = new JSONObject();
        ableUserJson.put("name", "有效用户数");
        ableUserJson.put("data", ableUserNum);
        JSONObject totalUserJson = new JSONObject();
        totalUserJson.put("name", "总用户数");
        totalUserJson.put("data", totalUserNum);
        userSeriesList.add(loginUserJson);
        userSeriesList.add(ableUserJson);
        userSeriesList.add(totalUserJson);
        eChartsData.put("userXAxisData", xAxisData);
        eChartsData.put("userSeriesList", userSeriesList);

转载于:https://www.jianshu.com/p/b224526d0090