记录下之前的总结吧♪(＾∀＾●)ﾉ

Step:1 为ECharts准备一个具备大小（宽高）的Dom 例如：div标签 <div id="main" style="height:500px;width:500px;"></div> 这里div的高和宽就是报表在页面显示的大小哦~
Step:2 引入echarts的所有 js 文件 附上下载链接~
http://echarts.baidu.com/build/echarts-2.2.7.zip
当然也少不了jQuery的js文件引用，毕竟总是会用到的..
Step:3 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径

function refresh(){ 
        if ($("#main5").length > 0){ 
              var cup_arr = eval('<b:write property="cupload" filter="false"/>');
              //初始化报表组件
              var myChart4 = echarts.init(document.getElementById('main5'),"blue"); 
              var option4 = { 
                            tooltip : {
                            trigger: 'axis', 
                            axisPointer : {
                                // 坐标轴指示器，坐标轴触发有效 
                                type :'shadow'
                             }, 
                             position:function(p){
                                //其中p为当前鼠标的位置 
                                 return [250, 10]; }
                             },
                             toolbox: { 
                                  //报表工具栏
                                  show : true, 
                                  feature : { 
                                          mark : {show: false}, 
                                          dataView : {show: true, readOnly: false}, 
                                          magicType: {show: true, type: ['line', 'bar']},
                                          restore : {show: true}, 
                                          saveAsImage : {show: true} } 
                              },
                              legend: { 
                              //可控制数据显示、隐藏 date的值需跟 series[数据]的name一样
                                  show:true, //显示控制按钮 
                                  data:['cup负载1分钟','cup负载5分钟'] },
                              calculable : true, //设置控制为可用 
                              xAxis : [ //X轴 数据 
                                  { type : 'category',//X(横)轴默认为 类目型 category 
                                    axisLabel:{ //坐标轴文本标签 
                                    textStyle:{ //文本样式 
                                        fontSize:'8' //字体大小 } }, 
                                    data : function(){ //date 类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行 
                                            var xarr = []; for (var i=0;i<cup_arr.length;i++){ 
                                            //通过循环拿到数组中的HOSTNAME作为X轴的标题    
                                            xarr.push(cup_arr[i].HOSTNAME); } 
                                            return xarr;//返回一个数组 }() } 
                                 ],
                                 yAxis : [ 
                                    { type : 'value', //Y(纵)轴默认为 数值型 value 
                                      axisLabel: { //坐标轴文本标签， 
                                      formatter: '{value}', 
                                      //间隔名称格式器 例如：'{value}%' 可在Y轴带数据单位       
                                      textStyle:{ fontSize:'10' } } } 
                                ], 
                                series : [ 
                                    { name:'cup负载1分钟',
                                    //系列名称，如启用legend，该值将被legend的data索引相关 点击可显示/隐藏数据 
                                      type:'bar', 
                                    //报表类型 bar 柱状图 其他type属性例如： 
                                   //'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图） 'pie'（饼图） //'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）| 'radar'（雷达图）                                         
                                     data:function(){
                                          var yarr = []; for (var i=0;i<cup_arr.length;i++){ 
                            //通过循环拿到数组中的VALUE作为Y轴上显示的数值  
                                            yarr.push(cup_arr[i].VALUE); } 
                                          return yarr; 
                                      }(), 
                                     markLine : {   // Y轴上的标线 
                                          itemStyle:{ //标线图形样式属性 
                                            normal:{ //默认样式 
                                            lineStyle:{ //线条样式 
                                                  type: 'dashed' 
                                                  //线条样式，可选为：'solid' | 'dotted' | 'dashed'， 树图还可以选：'curve' | 'broken' 
                                    } } }, 
                                   data : [ //标注图形数据 
                                    [{type : 'max'}, {type : 'min'}] ] }
                                 }
                                  myChart4.setOption(option4, true); 
                                  //为组件加载数据
          }
  }

baobiao.png