润乾集算报表集成百度ECharts

http://blog.runqian.com.cn/?p=1515

 百度Echarts提供了大量直观、丰富、灵活的图表，其提供的数据视图、值域漫游等特性增强了用户体验。在润乾集算报表中可以集成开源的ECharts，将报表数据以Echarts图表进行展现。

  目前集算报表中支持Echarts图形包括：地图、仪表盘、折线图、柱状图和饼图。其中，以地图以其良好特性备受大家喜爱。本文以集算报表中使用Echarts地图为例，说明集成使用方法。

单系列地图

  报表数据来源于iphone销售记录（虚构数据）：

  现需要基于以上数据绘制地图。

  首先准备数据报表：

  在A2格中增加EChart图形，右键单元格，选择“百度EChart”，类型选择“地图”，在参数编辑界面输入参数表达式如下：

  在图形参数界面，左侧为参数编辑界面，可以增加删除参数用于将报表值传递给EChart，各个参数含义及值如下：

  dataname和datavalue接收报表中的扩展数据，写法要使用“单元格名{}”的方式引用。

  界面右侧是JS编辑窗口，EChart为纯JS图表，集算报表会将相应参数解析后传给JS，完成图形绘制。在单系列地图中，右侧代码并不需要修改，只需简单配置相应参数即可。

  在发布报表的JSP中引用Echarts库：

  <script src=”<%=appmap%>/build/dist/echarts.js”></script>

  <script language=javascript>

    require.config({

      paths: {

        echarts: ‘<%=appmap%>/build/dist’

      }

    });

  </script>

  发布报表，即可查看地图如下：

多系列地图

  使用集算报表绘制多系列EChart地图时，需要手动修改图形参数编辑界面中的右侧JS代码。假设报表数据来源为：

  现需要绘制iphone3 4 5的各省销量情况。

  报表模板如下：

  A2格EChart图形参数如下：

  参数部分为：

  这里使用多系列时seriesName、legend、dataname和datavalue与单系列不同，要求表达式值为多值的序列。

  右侧JS代码需要手动修改，根据系列值生成多个series节点，完整代码如下：

  <!– 为ECharts准备一个具备大小（宽高）的Dom –>

     <div id=’id_37383591838090424′ style=”width:${width}px;height:${height}px”></div>

     <!– ECharts单文件引入 –>

     <!– <script src=”http://echarts.baidu.com/build/dist/echarts.js”></script> –>

     <script type=”text/javascript”>

      // 使用

      require(

        [

          'echarts',

          'echarts/chart/map'

        ],

        function (ec) {

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

          var myChart = ec.init(document.getElementById(‘id_37383591838090424′));

                 

            var option = {

              title : {

              text: ${title},

              subtext: ${subtitle},

              x:’center’

            },

            tooltip : {

              trigger: ‘item’

            },

            legend: {

              orient: ‘vertical’,

              x:’left’,

              data:${legend}

            },

            dataRange: {

              min: 0,

              max: 2500,

              x: ‘left’,

             y: ‘bottom’,

              text:['高','低'],    // 文本，默认为数值文本

              calculable : true

            },

            toolbox: {

              show: true,

              orient : ‘vertical’,

              x: ‘right’,

              y: ‘center’,

              feature : {

                mark : {show: true},

                dataView : {show: true, readOnly: false},

                restore : {show: true},

                saveAsImage : {show: true}

              }

            },

            roamController: {

              show: true,

              x: ‘right’,

              mapTypeControl: {

                ’china’: true

              }

          },

          series : [

  ]

      };

      var names = ${dataname};

      var values = ${datavalue};

      var series=${seriesName};

      for(var i=0;i<series.length;i++){

          var mydata = [];

        var arr={

          type: ‘map’,

            mapType: ‘china’,

            roam: false,

            itemStyle:{

              normal:{label:{show:true}},

              emphasis:{label:{show:true}}

            }

        };

        arr.name = series[i];

          for(var j=0;j<names[i].length;j++){

            var e = {};

            e.name = names[i][j];

            e.value = values[i][j];

            mydata[j] = e;

          }

        arr.data=mydata;

        option.series[i]=arr;

      }

        // 为echarts对象加载数据

        myChart.setOption(option);

        }

      );

  </script>

  发布报表预览如下：