帮你打开活字格更神奇的功能：一百零七，活字格中通过JS集成echarts图表
本帖最后由 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($(''), 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)
数组格式如下：
["2020","2021","2022"]对象数组格式如下：
[
{
"name":"2020",
"type":"line",
"data":
},
{
"name":"2021",
"type":"line",
"data":
},
{
"name":"2022",
"type":"line",
"data":
}
]注意：
[*]可以使用TEXTJOIN()函数来拼接，也可以通过自定义公式来实现 ：活字格自定义公式 - 葡萄城公开课 - 葡萄城产品技术社区 (grapecity.com.cn)
[*]注意双引号""在EXCEL公式中的添加方式：Excel如何在公式中添加双引号-百度经验 (baidu.com)
[*]这里可能涉及一些配置属性的更改，比如我这里因为不需要堆积，所以删除了“stack”这个属性的配置，对于不了解的属性，可以在这里面查询效果和配置方式：Documentation - Apache ECharts
7.引入数据
因为需要引入两处的数据，在页面上创建两个单元格，并分别命名，单元格中的值是最终拼接完成的json数组
在配置option之前，获取页面单元格中的数据，示例代码如下：
var charData =[];
charData = JSON.parse(Forguncy.Page.getCell("charData").getValue());在配置option之后，使用上面获取到的值更新需要赋值，写入我们数据的属性，示例代码如下：
option.series = charData;
//更新图表数据的值
到这里，点击按钮之后，就可以生成页面上表格中数据对应的图表了。
8.实时更新图表
如果修改表格中的数据后，希望图表可以实时更新，可以在放置最终JSON字符串的单元格上，加上这个JS命令。
这样数据表中的值更改后，JSON字符串也会发生变化，然后触发按钮中的命令，重新绘制图表。
demo：
页:
[1]