《小记》Echarts的基本使用（第一篇~）

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

Step:1 为ECharts准备一个具备大小（宽高）的Dom 例如：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('');
              //初始化报表组件
              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

baobiao.png