ECharts的实际使用案例（柱状图+地图）

 

配置：

        配置直接看官方文档就可以 Echarts 文档   比较简单

       下面是实际使用案例

 

实际案例：

1. 将近三周的用户注册数量用柱状图的形式表现出来

前台代码：

// 官方的柱状图案例的部分代码
option = {
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

官方的柱状图案例中可以看到 data 是数组类型的数据，所以前台发一个 ajax 请求，后台要将数组类型数据存入map集合中

       $(function () {
            // 异步加载统计信息
            $.ajax({
                url:'${ctx}/user/registerCount',
                type:'POST',
                dataType:'JSON',
                success:function (data) {
                    console.log(data);
                    myChart.setOption({
                        title: {
                            text: '近三周用户注册数量'
                        },
                        tooltip: {},
                        legend: {
                            data:['用户注册']
                        },
                        xAxis: {
                            data: ["近一周","近两周","近三周"]
                        },
                        yAxis: {},
                        series: [{
                            name: '用户注册',
                            type: 'bar',
                            data: data.count
                        }]
                    });
                },
            });
        });

后台代码：

SQL语句，其中 datediff( ) 是 mysql 中的一个函数 计算时间差的

<!--查注册数量-->
<select id="selectRegisterCount" resultType="int" parameterType="int">
     select count(id) from cmfz_user where datediff(now(),create_date) &lt; #{day}
</select>

    //用户注册数量  将数组类型存入map集合中
    @RequestMapping("registerCount")
    public Map<String,Object> registerCount(){
        Map<String, Object> map = new HashMap<>();
        int[] counts = new int[3];
        for (Integer i =0;i<3;i++){
            Integer count = userService.selectRegisterCount((i+1)*7);
            counts[i] = count;
        }
        map.put("count",counts);
        return map;
    }

效果：

 

2. 将用户地区分布用地图表示出来

前台代码：

       //官方地图案例的部分代码
       series : [
            data:[
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '天津',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
       
            ]
        },

从官方地图案例中可以看到 data 是 JSON 格式的数据，所以后台可以将 name 和 value 封装成一个对象 存入map集合中返回

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1000px;height:500px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            type:'post',
            dataType:'json',
            url:'${ctx}/user/userArea',
            success:function(data){
                /*console.log(data);
                var userObj1 = eval("(" + data.manList + ")"); //转为JSON格式
                var userObj2 = eval("(" + data.womenList + ")");*/
                var option = {
                    title : {
                        text: '用户地区分布',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['男用户','女用户']
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text:['高','低'],           // 文本，默认为数值文本
                        calculable : true
                    },
                    toolbox: {
                        show: true,
                        orient : 'vertical',
                        left: 'right',
                        top: 'center',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    series : [
                        {
                            name: '男用户',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: data.manList
                        },
                        {
                            name: '女用户',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: data.womenList
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error:function () {
                alert("出错了");
            }
        });

    </script>

后台代码：

封装的对象UserArea.java  对应的DAO方法和 mapper文件中的 sql 语句

//实体类
@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class UserArea {

    //原名应该是province
    private String name;
    //原名应该是value
    private Integer value;

}


//DAO中的方法
List<UserArea> selectUserArea(String sex);


//mapper文件
<!--查询用户分布,查出来的count起别名为value，provice为name，对应封装好的 UserArea 对象-->
<select id="selectUserArea" resultType="com.baizhi.vo.UserArea"  parameterType="String">
     select count(id) value,province name  from cmfz_user where sex=#{sex} group by province
</select>

Controller层代码

    //用户分布地图
    @RequestMapping("userArea")
    public Map<String,Object> userArea(){
        // 1 代表 男  2 代表 女
        List<UserArea> manAreas = userService.selectUserArea("1");
        List<UserArea> womenAreas = userService.selectUserArea("2");
        Map<String, Object> map = new HashMap<>();
        map.put("manList",manAreas);
        map.put("womenList",womenAreas);

        return map;
    }

这只是其中的一种方法，也可以用拼接字符串的方式或者其他方式，具体请看这里  JSON格式转换

效果：

 

ECharts的使用思路就是这样的，根据官方模板给的对应图形的数据类型，来分析出后台需要返回什么样的数据