本帖最后由 Chelsey.Wang 于 2022-7-5 15:02 编辑
在生成图表的过程中,格友们可能会碰到下面这样的问题:
- 现有的数据结构活字格中的图表不支持
- 活字格中没有我想要的图表类型/样式
之前有大佬分享过在活字格中使用JS集成Echarts图表的思路:
Echart图表应用之入门 - 活字格专区 - 格友杂谈 - 葡萄城产品技术社区 (grapecity.com.cn)
引入Echarts图表的思路大家都了解了,不过在处理数据生成图表配置项的时候可能会遇到一些困惑,这次就以多系列折线统计图为例,比较完整地介绍一下在活字格中集成Echarts图表的方式,以及分享一些我进行数据处理的思路。
先看看最终效果吧~
效果示例:
通过Echarts生成折线统计图
原始数据
可以看到,这种格式的数据,由于数据系列(即年份)的数量是不定的,所以是不能直接通过图表功能生成图表的。
实现思路:
1.表格+EXCEL公式处理数据,拼接得到JSON字符串
2.通过JS配置和生成Echarts图表
步骤:
1.引入Echarts的JS文件
Handbook - Apache ECharts
打开
找到dist/echarts.js文件,复制URL
在设置,自定义JS/CSS中添加刚才复制的链接
2.创建一个用于放置图表的空白单元格,并命名
3.在示例中找一个和预期效果比较接近的图表,作为模板
Examples - Apache ECharts
因为想要实现一个多系列的折线图,所以我选了这个示例
4.生成图表
在页面上放置一个按钮,设置一个JS命令,输入下面的代码创建图表实例
- var myChart=echarts.init($('[fgcname="echart1"]')[0], null,{width: 800,height: 400});
- //在echarts1单元格创建一个大小为800*400的图表实例
- myChart. clear();
- //清空画布
复制代码 从这里开始,copy示例中的代码:
粘贴到JS命令中:
此时运行工程,点击按钮,页面上应该会生成和示例中相同的图表,效果如下:
5.修改代码
通过观察应该可以看出左边的数据和右边图表中组件的对应关系,下面这些就是我们在生成图表时需要修改为我们自己数据的地方
关于这些组件具体的概念可以参考echarts帮助手册中的介绍:
Handbook - Apache ECharts
可以看到,图表标题是一个文本;图例和X轴都是数组;数据系列是一个对象数组。
这里,因为图表名称和X轴都是固定的,所以直接在代码中option里修改了它们的值;因为图例和数据系列都是动态的,需要动态获取,这里先定义两个空的数组,后面再给这两个属性赋值。
6.处理数据
在页面上绑定需要展示数据的表格,然后使用EXCEL公式拼接出json数组:JSON 数组 | 菜鸟教程 (runoob.com)
数组格式如下:
对象数组格式如下:
- [
- {
- "name":"2020",
- "type":"line",
- "data":[10,5,15,13,22,21,14,27,9,17,13,20]
- },
- {
- "name":"2021",
- "type":"line",
- "data":[8,9,10,11,19,12,18,13,17,14,16,15]
- },
- {
- "name":"2022",
- "type":"line",
- "data":[11,13,20,9,16,13,22,21,25,11,19,10]
- }
- ]
复制代码 注意:
7.引入数据
因为需要引入两处的数据,在页面上创建两个单元格,并分别命名,单元格中的值是最终拼接完成的json数组
在配置option之前,获取页面单元格中的数据,示例代码如下:
- var charData =[];
- charData = JSON.parse(Forguncy.Page.getCell("charData").getValue());
复制代码 在配置option之后,使用上面获取到的值更新需要赋值,写入我们数据的属性,示例代码如下:
- option.series = charData;
- //更新图表数据的值
复制代码
到这里,点击按钮之后,就可以生成页面上表格中数据对应的图表了。
8.实时更新图表
如果修改表格中的数据后,希望图表可以实时更新,可以在放置最终JSON字符串的单元格上,加上这个JS命令。
这样数据表中的值更改后,JSON字符串也会发生变化,然后触发按钮中的命令,重新绘制图表。
demo:
集成echarts.fgcc
(84.15 KB, 下载次数: 499)
|