echarts使用方法

首先配置一个div块，设置id=main；记住导入cdd，js库

<html>
<head>
    <meta charset="utf-8">
    <title>报表</title>
    <style>
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<div>
    <div class="input-group col-md-3 col-center-block" style="margin-top:0px;positon:relative;">
        <input type="text" id="date" class="Wdate form-control" placeholder="请选择时间" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true, maxDate: '%y-%M-{%d-1}'})">
    </div>
    <div id="main" style="height: 400px"></div>
</div>
<!-- ECharts单文件引入 -->
<script src="<%=basePath%>/static/js/jquery-1.9.1.min.js"></script>
<script src="<%=basePath%>/static/echarts-2.2.7/build/dist/echarts.js"></script>
<link href="/static/echarts-2.2.7/doc/asset/css/font-awesome.min.css" rel="stylesheet">
<link href="/static/echarts-2.2.7/doc/asset/css/bootstrap.css" rel="stylesheet">
<link href="/static/echarts-2.2.7/doc/asset/css/carousel.css" rel="stylesheet">
<script src="/static/My97DatePicker/WdatePicker.js"></script>

引入echarts插件，并将整个需要加载的echarts设计成一个load（）方法，利用ajax就可以动态的生成，

 function load() {
        require.config({
            paths: {
                echarts: '<%=basePath%>/static/echarts-2.2.7/build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',　　　　　　　
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line' // 使用柱状图就加载曲线模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    title : {
                        text: '每个小时的访问量',
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        //data:['pv','200','304',"500"]
                        data:['pv']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : hours
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'',
                            type:'bar',
                            data:total,　　//统计的数据，需要与 xAxis里的data : hours相对应；
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        }
//                    {
//                        name:'降水量',
//                        type:'bar',
//                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
//                        markPoint : {
//                            data : [
//                                {type : 'max', name: '最大值'},
//                                {type : 'min', name: '最小值'}
//                            ]
//                        },
//                        markLine : {
//                            data : [
//                                {type : 'average', name : '平均值'}
//                            ]
//                        }
//                    }
                    ]
                };

                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
    }
</script>

配置ajax异步交互，获取返回的map集合包含hours和value，传入load（）就可以实现动态图表