润乾报表v5示例说明如何基于echarts模板调整满足个性需求

需求:

润乾v5设计器自带封装了堆叠柱图,但数据都是基于数据集生成,比如 json@a(ds1)。用户的数据不满足类似结构所以没法直接用json来转换,想采用指定单元格值(如润乾自己的统计图,可以设置分类系列 系列值分别对应的单元格即可)的形式来做,不过不知道怎么改。

需求分析:

先来看下自带堆叠柱图设置取值的方法

ds3的结果集

这里我们可以发现,只要结果集格式按照如上规范,只需用json处理后给echarts的js脚本即可展现。

但回到客户的痛点,数据没法直接返回如上形式,那怎么办?

实际上,报表内设置的表达式也是为echarts的js脚本服务的,echarts要什么格式,报表设置的表达式就要给其什么格式。那么从这一点上我们可以得出结论,我们只要传给echarts数据(不论什么格式),在js脚本里处理成echarts想要的内容格式就可以了。因此,我们通过分析最终设置的分类啊、系列及系列值等格式,在接收到报表传来的数据后转换就可以了。

下面我们的工作便是通过调试模板代码,看echarts要啥。

最终,在堆叠柱图中发现,主要是12-24行,这部分通过报表传来的value分别拿到分类(categoryData)及系列值(values)分别设置给echarts的categoryData(21行)及values(22行)属性即可。

看到这里就很清楚了,我们只需要传来分类和系列值,分别放到数组设置给对应echarts属性就可以了。

动工:

1、 如下单元格数据

分类为A8,系列为B7,系列值为B8

2、 增加分类轴及系列值的参数

3、 Legend作为系列改为动态传

如上图的legend设置

4、 调整js脚本

调整的目的即是把上面提到的12-24行改为我们新传来的参数值,如下

以上即通过fenleizhou和tongjizhi改变了echarts js中categoryData和values两个数组的值。

通过以上的操作便实现了由数据集转换为指定单元格值方式生成echarts图的方法。核心的方案就是要了解echarts怎么生成的图,需要什么值,什么格式,开发者对照着做即可。

猜你喜欢

转载自blog.csdn.net/cainiao_M/article/details/78782036
今日推荐