Echarts（一、柱状图）

1.引入Echarts的相关.js文件
示例：<script type="text/javascript" src="js/echarts.js"></script>
2.准备一个具备大小（宽高）的DOM
示例：<div id="main" style="width: 600px;height:400px;"></div>
3.通过echarts.init()方法初始化一个echarts实例；
实例：var myChart = echarts.init(document.getElementById('main'));
4.简单实例：

    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

2异步动态加载数据

var urls='user2_sexGroup.action';

        var myChart3 = echarts.init(document.getElementById('second_left'));
        myChart3.showLoading({text:'亲，不要急！！正在拼命的读取数据中...'});
         $.ajax({
                url:urls,
                dataType:"json",
                success:function(data){
             var json = eval('(' + data + ')'); 
                    myChart3.setOption({
                      title:{
                            text:json.third
                        }, 
                        xAxis: {
                            data: json.first
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '年龄分布',
                            type: 'bar',
                            data: json.second
                        }]
                    });
                     myChart3.hideLoading();
                }
                });
            // 初始 option
            var option3 = {
                /*  title: {
                   text:'用户性别分布'
                },  */
                tooltip: {},
                legend: {
                    data:['年龄分布']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar',]},//'stack','tiled'
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '年龄',
                    type: 'bar',
                    data: []
                }]
            };
        myChart3.setOption(option3);

后台写法

       public String  yearGroup(){
           List<Long> list=userService.yearGroup();
           List<String> list2=userService.selectUserMesOrder();
           List<String> list3=new ArrayList();    
           for(String a:list2){
               list3.add(a+"年");
           }
           Map<String,Object> map = new HashMap<String,Object>();        
           map.put("first", list3);
              map.put("second", list);
              map.put("third", "用户年龄分布图");
              JSONObject json = JSONObject.fromObject(map);//将map对象转换成json类型数据
              results = json.toString();//给result赋值，传递给页面
            return "JSONRESULT";

       };