echarts 报表使用

下载echats后,将下包中的js引入项目,
\echarts-2.2.7\echarts-2.2.7\build\dist

//在页面中建立宽高的区域,用来显示报表

  <div style="height: 500px;">
  <div id="cmain" style="height:339px;width: 100%;"></div>
  </div>

需要在jsp中引入echarts.js

<script src="/echarts/asset/js/echarts.js"></script>
1 //报表
        require.config({
            paths : {
                echarts : '${basePath}/echarts/asset/js'   //指向echarts所需js所在包的路径
            }
        });
        require([ 'echarts', 'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表,此处引入了line折线图,bar柱状图
        'echarts/chart/bar' ], function(ec) {
            var myChart = ec.init(document.getElementById('cmain'));      //初始化报表             
            var option = {
                title : {
                    text : '图表名称',
                    subtext : ''                    
                },
                tooltip : {
                    trigger : 'axis'
                },
                legend : {
                    data : [ '1人数', '2人数' ]
                },                
                toolbox : {
                    show : true,
                    feature : {
                        mark : {
                            show : false
                        },
                        dataView : {
                            show : true,
                            readOnly : false
                        },
                        magicType : {
                            show : true,
                            type : [ 'line', 'bar' ]
                        },
                        restore : {
                            show : true
                        },
                        saveAsImage : {
                            show : true
                        }
                    }
                },
                calculable : true,
                xAxis : [ {
                    type : 'category',
                    boundaryGap : false,
                    data :[2015-08-11,2015-08-12,2015-08-13,2015-08-14]
                } ],
                yAxis : [ {
                    type : 'value',
                    axisLabel : {
                        formatter : '{value}'
                    }
                } ],
                series : [ {
                    name : '1人数',
                    type : 'line',
                    data :[1,2,3,5]                    
                },{
                    name:'2人数',
                    type:'line',
                    data:[2,3,5,5]
                }]
            };                        
            
            myChart.setOption(option);            
            myChart.setTheme('macarons');       //设置样式主题                 
        });