润乾集算报表集成百度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库：

  

  

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

多系列地图

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

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

  报表模板如下：

  A2格EChart图形参数如下：

  参数部分为：

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

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

  

    

    

     –>

    

  发布报表预览如下：