帮你打开活字格更神奇的功能：一百零七，活字格中通过JS集成echarts图表

只是可l

本帖最后由 Chelsey.Wang 于 2022-7-5 15:02 编辑

在生成图表的过程中，格友们可能会碰到下面这样的问题：

现有的数据结构活字格中的图表不支持
活字格中没有我想要的图表类型/样式

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

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

效果示例：
通过Echarts生成折线统计图
echarts图表.gif

原始数据

可以看到，这种格式的数据，由于数据系列（即年份）的数量是不定的，所以是不能直接通过图表功能生成图表的。

实现思路：
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命令，输入下面的代码创建图表实例

var myChart=echarts.init($('[fgcname="echart1"]')[0], null,{width: 800,height: 400});
//在echarts1单元格创建一个大小为800*400的图表实例
myChart. clear();
//清空画布

复制代码

从这里开始，copy示例中的代码：
image.png642768554.png

粘贴到JS命令中：

此时运行工程，点击按钮，页面上应该会生成和示例中相同的图表，效果如下：
image.png313423156.png

5.修改代码
通过观察应该可以看出左边的数据和右边图表中组件的对应关系，下面这些就是我们在生成图表时需要修改为我们自己数据的地方 image.png387141417.png

关于这些组件具体的概念可以参考echarts帮助手册中的介绍：
Handbook - Apache ECharts
可以看到，图表标题是一个文本；图例和X轴都是数组；数据系列是一个对象数组。

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

6.处理数据
在页面上绑定需要展示数据的表格，然后使用EXCEL公式拼接出json数组：JSON 数组 | 菜鸟教程 (runoob.com)
数组格式如下：

["2020","2021","2022"]

复制代码

对象数组格式如下：

[
{
"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]
}
]

复制代码

注意：

可以使用TEXTJOIN()函数来拼接，也可以通过自定义公式来实现：活字格自定义公式 - 葡萄城公开课 - 葡萄城产品技术社区 (grapecity.com.cn)
注意双引号""在EXCEL公式中的添加方式：Excel如何在公式中添加双引号-百度经验 (baidu.com)
这里可能涉及一些配置属性的更改，比如我这里因为不需要堆积，所以删除了“stack”这个属性的配置，对于不了解的属性，可以在这里面查询效果和配置方式：Documentation - Apache ECharts

7.引入数据
因为需要引入两处的数据，在页面上创建两个单元格，并分别命名，单元格中的值是最终拼接完成的json数组
image.png948064880.png

在配置option之前，获取页面单元格中的数据，示例代码如下：

var charData =[];
charData = JSON.parse(Forguncy.Page.getCell("charData").getValue());

复制代码

在配置option之后，使用上面获取到的值更新需要赋值，写入我们数据的属性，示例代码如下：

option.series = charData;
//更新图表数据的值

复制代码

到这里，点击按钮之后，就可以生成页面上表格中数据对应的图表了。

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

demo：

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

		自动登录	找回密码
密码			立即注册

[神奇功能] 帮你打开活字格更神奇的功能：一百零七，活字格中通过JS集成echarts图表

评分

0 个回复

活字格认证

活字格高级认证

微信认证勋章

讲师达人

悬赏达人

圣诞拼拼乐