示例说明基于 echarts 模板调整,满足报表呈现个性需求

需求:

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

需求分析:

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

1png

ds3 的结果集

2png

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

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

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

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

3png

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

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

动工:

1、 如下单元格数据

4png

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

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

5png

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

如上图的 legend 设置

4、 调整 js 脚本

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

6png

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

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

更多个性化前端展现相关问题请查看:前端效果相关问题分类导航
* 怎样制作爽心的 dashboard
* echarts 统计图如何实现打印导出
* 鼠标悬停出现提示信息怎么做
* HTML 事件 – 获取单元格值
* 如何实现伸缩 (折叠) 报表?
* 点击表头切换升降序排序方式