为了更好的EasyShu，Vega-lite图表学习点滴分享

不在开发的路上，就在学习的路上，EasyShu低调了好一阵子，只因需要再次开拓新疆域，将交互图表进行到底，引进Vega图表。

最近一周里，除了一些小修小补的优化工作外，全程投入到Vega图表的学习中，也发现了一些新大陆，和读者们分享下。

来一次全面接触Vega了解再进行开发

之前开发ECharts时，拿着官网的Sample示例就开干，效率确实高了，但后面也重构了很久，直到全面熟悉和掌握了ECharts后，才能得心应手，做出想要的效果，特别是被张杰老师这样的图表专家鞭策下，目前除了满足基本的交互外，对学术论文级的场景需求也完全得到满足（导出矢量图、图例大小位置调整，图例追加等都花了不少精力去优化，2.8版本见分晓）。

这一次的Vega图表，不打算太匆匆上线，经过这几天紧密的学习，在此也分享一点点小干货，希望对大家学习有帮助和启发。

最好的学习资源尽在官网

无论是ECharts还是Vega，官网能够给我们提供的资料都是非常详尽的，相反其他地方的信息总是支离破碎的，所以，对于一些热门的质量高的开源项目，首选是在官网上寻找学习资源。

Vega-lite的官网:https://vega.github.io/vega-lite/。其中的Tutorial版块做得非常好，深入浅出，特别是入门的GetStart。

因为想完全掌握，所以也硬着头皮，有点囫囵吞枣地看完了整个Document版本，文档的google翻译也有点看不动。可能比较多专业名词的缘故。

看完文档后，再用心看了下Ecosystem的生态版块，Vega-lite的生态还是不少，好多其他语言和工具在其之上的封装，例如python的Altair轮子。

其中一个Voyager是一个界面化操作的工具，非常合适作数据分析可视化探索。而Vega Viewer这个VSCode插件，也非常好用，可以在本地的VSCode写Vega-lite的图表Json结构，而不必在在线版的Vega-Editor上写，并且语法提示、关键字智能感应和Vega-Editor一致。

Voyager有在线网站，有示例数据集，直接拖动字段即可进行可视化探索，非常Tableau风格。

Vega Viewer，左边代码，右边可视化图表渲染，一边改一边调效果。

意外发现有在线版JavaScript语言NoteBook

学习python的人都知道使用Jupter NoteBook来交互性学习，效果非常好，特别是用别人整理好的笔记或随书附赠的笔记代码，一边看一边演练。

在上述的Vega-lite上找到了其官方推荐的Vega-lite笔记教程，网址如下：

https://observablehq.com/@uwdata/introduction-to-vega-lite?collection=@uwdata/visualization-curriculum

使用这个observablehq网站可以像JupterNoteBook那样在上面运行代码，特别是自己做一些修改探索，非常好用，这里有9篇长文，比起官方入门GetStart详尽很多，而且是系列感，不同主题一直讲下来，而非文档型的用于查找详尽说明使用。

这种探索性学习效果真心很棒，不用复杂地搭建环境，直接打开浏览器即可，JavaScript的火爆还真是有理。

唯一一个小遗憾是，直接google网页翻译，笔记类内容都翻译不到，最后终于下定决定来研究如何用Quicker这款神器。可以解救我一下不断地复制网页内容到有道词典上翻译这个枯燥过程。

录个小视频让大家感受下，还算流畅。同时也安装了有道词典的浏览器插件，也能作一点点划词翻译，也勉强可用，在小段文字时，选取内容过多，排版就较差，不及有道词典逐句识别好。

结语

学习是痛并快乐着的，笔者开发过程中，也是一路的学习过程，特别是面对JavaScript图表这些新知识新领域，从头开始，一步步前行。

相对工具的学习，会轻松许多，起码是已经封装过，纯界面操作为主，也期待Excel催化剂的读者们也能够加入到这个学习的过程中，学习Excel催化剂+EasyShu，就是站在笔者的肩膀上，更轻松的方式获取到笔者积累到的知识输出。