欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

eCharts4 简单例子

程序员文章站 2022-06-14 14:53:41
...

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