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

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

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

之前有大佬分享过在活字格中使用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命令，输入下面的代码创建图表实例

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

复制代码

从这里开始，copy示例中的代码：

粘贴到JS命令中：

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


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

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


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. ]

复制代码

注意：

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

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

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

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

复制代码

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

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

复制代码

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

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


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

2022-7-5 15:01 上传

点击文件名下载附件