echarts

横坐标为斜着的代码axisLabel:

{rotate: 60 , interval: 0 }

1.报表的用法：

 柱形图：lineEcharts

 

Chart:

 

echartsData:

 

 

 

 

JSP:

<script src="${ctxStatic}/echarts/dist/echarts.js"></script>

<script type="text/javascript">

  // 路径配置

 require.config({

      paths : {

        echarts : '${ctxStatic}/echarts/dist'

      }

    });

 

    require([ 'echarts',

              'echarts/chart/bar',

              'echarts/chart/line'

            ], drawChart);

 // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

 

    

    function drawChart(ec) {

// 基于准备好的dom，初始化echarts图表

      var myChart = ec.init(document.getElementById('main'));

      if($('#beginDate').val()!=""&&$('#endDate').val()!=""&&$('#endDate').val()!=""&&$('#officeId').val()!=""&&$('#officeName').val()!=""&&$('#ywid').val()!=""&&$('#typedate').val()!=""){

      myChart.showLoading({

        text : "正在加载..."

      });

      }

      $("#btnSubmit").click(function (){

      var officeid = $('#officeId').val();

      var officename = $('#officeName').val(); 

      var ywid = $('#ywid').val(); 

      var beginDate = $('#beginDate').val(); 

      var endDate = $('#endDate').val();

      var typedate = $('#typedate').val();

      if(beginDate==null||endDate==null||beginDate==""||endDate==""){

      alert("日期不能为空");

      }

      if(typedate==null&&typedate==""){

      alert("统计时间差不能为空");

      }

      //通过Ajax获取数据  

      $.ajax({

        type : "post",

        async : false, //同步执行  

        url : "${ctx}/echarts/echarts/json?beginDate="+beginDate+"&endDate="+endDate+"&typedate="+typedate+"&officeid="+officeid+"&ywid="+ywid+"&officename="+officename,

        //data: "{beginDate:'" + beginDate + "',endDate:'" + endDate + "',typedate:'" + typedate + "}", 

        dataType : "json", //返回数据形式为json  

        success : function(result) {

          if (result) {

            //定义图表options 

            var option = {

              title : {

                text : '业务走势',

                subtext : '测试'

              },

           

              tooltip : {

                trigger : 'axis'

              },

              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,

              legend : {

                data : result.legend//数据分组

              },

              xAxis : [ {

                type : 'category',

                data : result.category,//横坐标

            axisLabel:

              {rotate: 60 , interval: 0 }

              } ],

              yAxis : [ {

                type : 'value'

              } ],

              series : [{//纵坐标

                name : result.series[0].name,

                type : result.series[0].type,

                data : result.series[0].data

              }]

            };

            myChart.hideLoading();

            myChart.setOption(option);

            

          }

        },

        error : function(errorMsg) {

          alert("请求数据失败！");

          myChart.hideLoading();

        }

      });

      });

      var ecConfig = require('echarts/config'); 

                  function eConsole(param) { 

                      var str = param.name + ":" + param.value; 

                      top.$.jBox.open("iframe:${ctx}/echarts/echarts/queryByDate?ywid=" + $('#ywid').val()+"&date=" + param.name, "详细数据", 650, 500);

                  } 

                  myChart.on(ecConfig.EVENT.CLICK, eConsole); 

 // 为echarts对象加载数据 

 

                  myChart.setOption(option,true); 

}

</script>

 

饼图：

 

 

 

5.Grid: grid : {'y':80,'y2':100}

 

6. axisLabel:

              {rotate: 45 , interval: 0 }

 

Option:图表选项，包含图表实例任何可配置选项

 

Timeline:时间轴，每个图表最多仅有一个时间轴控件

 

Title:标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。

 

Toobox:工具箱，每个图表最多仅有一个工具箱

 

Tooltip:提示框，鼠标悬浮交互时的信息提示

 

 

Legend:图例，每个图表最多仅有一个图例。

 

Datarange:值域选择，每个图表最多仅有一个值域控件

 

Datazoom:数据区域缩放

 

Grid:直角坐标系内绘图网格

 

· Axis:类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标

· 数值型：需要指定数值区间，不指定时则自定计算数值范围，坐标轴内包含数值区间内容全部坐标

· 时间型：时间型坐标轴用法同数值型，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同自动切换需要显示的时间粒度

 

xAxis

直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数组。最多同时存在2条横轴，单条横轴时可指定安放于grid的底部（默认）或顶部，2条同时存在时位置互斥，默认第一条安放于底部，第二条安放于顶部。

坐标轴有三种类型，类目型、数值型和时间型（区别详见axis），横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型，具体参数详见axis。

yAxis

直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数组。最多同时存在2条纵轴，单条纵轴时可指定安放于grid的左侧（默认）或右侧，2条同时存在时位置互斥，默认第一条安放于左侧，第二条安放于右侧。

坐标轴有三种类型，类目型、数值型和时间型（区别详见axis），纵轴通常为数值型，但条形图时则纵轴为类目型，具体参数详见axis。

Seris:驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效，请注意适用类型

Itemstyle:图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）

Tooltip: 提示框，鼠标悬浮交互时的信息提示，每个图表最多仅有一个提示框。（比如：柱状图的时候，鼠标放在柱状图上会显示参数，数值）。

Legend:图例，主要是显示图标和数据之间的关系

Grid: 直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局.(通俗来讲：就是横坐标距左边距，纵坐标距离上边的边距。横坐标2距离右边的距离，纵坐标距离下面的距离)。

Toolbox: 辅助工具箱，辅助功能，如添加标线，框选缩放等.(就是表右上角工具栏)。

Calculable：是否启用拖拽重计算特性，默认关闭。（如果为false的时候，图表数据不能拖拽）

xAxis/yAxis: 横纵坐标轴.(横坐标 类型+数据，纵坐标是value如果有后缀{value}+后缀(比如“%”))。

Series: 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效.(就是图表的数据的名称、类型和数据)

MarkPoint: 系列中的数据标注内容。(比如：标注在图表最高值和最低值位置上的数值）

MarkLine: 系列中的数据标线内容。(比如：标注在图表平均值的数值）

点击图表：出现弹出框：

 var ecConfig = require('echarts/config'); 

                  function eConsole(param) { 

                      var str = param.name + ":" + param.value; 

                      top.$.jBox.open("iframe:${ctx}/echarts/echarts/queryByDate?ywid=" + $('#ywid').val()+"&officeid="+$('#officeId').val()+"&date=" + param.name, "详细数据", 650, 500);

                  } 

                  myChart.on(ecConfig.EVENT.CLICK, eConsole); 

                  myChart.setOption(option,true); 

Echarts

 

Tooltip: 提示框，鼠标悬浮交互时的信息提示，每个图表最多仅有一个提示框。（比如：柱状图的时候，鼠标放在柱状图上会显示参数，数值）。

Legend:图例，主要是显示图标和数据之间的关系

Grid: 直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局.(通俗来讲：就是横坐标距左边距，纵坐标距离上边的边距。横坐标2距离右边的距离，纵坐标距离下面的距离)。

Toolbox: 辅助工具箱，辅助功能，如添加标线，框选缩放等.(就是表右上角工具栏)。

Calculable：是否启用拖拽重计算特性，默认关闭。（如果为false的时候，图表数据不能拖拽）

xAxis/yAxis: 横纵坐标轴.(横坐标 类型+数据，纵坐标是value如果有后缀{value}+后缀(比如“%”))。

Series: 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效.(就是图表的数据的名称、类型和数据)

MarkPoint: 系列中的数据标注内容。(比如：标注在图表最高值和最低值位置上的数值）

MarkLine: 系列中的数据标线内容。(比如：标注在图表平均值的数值）