找回密码
 立即注册

QQ登录

只需一步,快速开始

Chelsey.Wang 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2022-7-5 14:43  /   查看:5967  /  回复:0
本帖最后由 Chelsey.Wang 于 2022-7-5 15:02 编辑

在生成图表的过程中,格友们可能会碰到下面这样的问题:
  • 现有的数据结构活字格中的图表不支持
  • 活字格中没有我想要的图表类型/样式

之前有大佬分享过在活字格中使用JS集成Echarts图表的思路:
Echart图表应用之入门 - 活字格专区 - 格友杂谈 - 葡萄城产品技术社区 (grapecity.com.cn)

引入Echarts图表的思路大家都了解了,不过在处理数据生成图表配置项的时候可能会遇到一些困惑,这次就以多系列折线统计图为例,比较完整地介绍一下在活字格中集成Echarts图表的方式,以及分享一些我进行数据处理的思路。
先看看最终效果吧~

效果示例:
通过Echarts生成折线统计图
echarts图表.gif
原始数据
image.png985226135.png
可以看到,这种格式的数据,由于数据系列(即年份)的数量是不定的,所以是不能直接通过图表功能生成图表的。


实现思路:
1.表格+EXCEL公式处理数据,拼接得到JSON字符串
2.通过JS配置和生成Echarts图表

步骤:
1.引入Echarts的JS文件
Handbook - Apache ECharts
打开
image.png813680114.png
找到dist/echarts.js文件,复制URL
image.png610501708.png
在设置,自定义JS/CSS中添加刚才复制的链接
image.png645759582.png

2.创建一个用于放置图表的空白单元格,并命名
image.png33746947.png

3.在示例中找一个和预期效果比较接近的图表,作为模板
Examples - Apache ECharts
因为想要实现一个多系列的折线图,所以我选了这个示例
image.png362911071.png

4.生成图表
在页面上放置一个按钮,设置一个JS命令,输入下面的代码创建图表实例
  1. var myChart=echarts.init($('[fgcname="echart1"]')[0], null,{width: 800,height: 400});
  2. //在echarts1单元格创建一个大小为800*400的图表实例
  3. myChart. clear();
  4. //清空画布
复制代码
从这里开始,copy示例中的代码:
image.png642768554.png
粘贴到JS命令中:
image.png639566039.png
此时运行工程,点击按钮,页面上应该会生成和示例中相同的图表,效果如下:
image.png313423156.png

5.修改代码
通过观察应该可以看出左边的数据和右边图表中组件的对应关系,下面这些就是我们在生成图表时需要修改为我们自己数据的地方 image.png387141417.png
关于这些组件具体的概念可以参考echarts帮助手册中的介绍:
Handbook - Apache ECharts
可以看到,图表标题是一个文本;图例和X轴都是数组;数据系列是一个对象数组。

这里,因为图表名称和X轴都是固定的,所以直接在代码中option里修改了它们的值;因为图例和数据系列都是动态的,需要动态获取,这里先定义两个空的数组,后面再给这两个属性赋值。
image.png175503539.png

6.处理数据
在页面上绑定需要展示数据的表格,然后使用EXCEL公式拼接出json数组:JSON 数组 | 菜鸟教程 (runoob.com)
数组格式如下:
  1. ["2020","2021","2022"]
复制代码
对象数组格式如下:
  1. [
  2.     {
  3.         "name":"2020",
  4.         "type":"line",
  5.         "data":[10,5,15,13,22,21,14,27,9,17,13,20]
  6.     },
  7.     {
  8.         "name":"2021",
  9.         "type":"line",
  10.         "data":[8,9,10,11,19,12,18,13,17,14,16,15]
  11.     },
  12.     {
  13.         "name":"2022",
  14.         "type":"line",
  15.         "data":[11,13,20,9,16,13,22,21,25,11,19,10]
  16.     }
  17. ]
复制代码
注意:


7.引入数据
因为需要引入两处的数据,在页面上创建两个单元格,并分别命名,单元格中的值是最终拼接完成的json数组
image.png948064880.png
在配置option之前,获取页面单元格中的数据,示例代码如下:
  1. var charData =[];
  2. charData = JSON.parse(Forguncy.Page.getCell("charData").getValue());
复制代码
在配置option之后,使用上面获取到的值更新需要赋值,写入我们数据的属性,示例代码如下:
  1. option.series = charData;
  2. //更新图表数据的值
复制代码
image.png933502502.png
到这里,点击按钮之后,就可以生成页面上表格中数据对应的图表了。

8.实时更新图表
如果修改表格中的数据后,希望图表可以实时更新,可以在放置最终JSON字符串的单元格上,加上这个JS命令。
这样数据表中的值更改后,JSON字符串也会发生变化,然后触发按钮中的命令,重新绘制图表。
image.png841898498.png

demo:
集成echarts.fgcc (84.15 KB, 下载次数: 499)

评分

参与人数 2满意度 +10 收起 理由
只是可l + 5
逛逛逛 + 5

查看全部评分

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部