一、项目地址

go-view项目

二、阅读总结

（1）画布组件样式配置栏组件的实现

右侧的配置栏组件，组件库里的每个组件都单独写一份vue的模板文件。对于多个组件共有的配置，会进行公共组件的抽离，
如对于柱状图和折线图组件，这两个图表组件有许多共有的配置，对共有的配置，抽离为global-setting组件进行组件复用。
那么在用户进行配置的修改后，如何去改动组件的配置数据呢？这里就用到了vue里的双向数据绑定v-model的指令，去进行数据的同步。

（2）导入功能的实现

通过FileReader读取导入的Json文件，使用该Json文件进行画布初始化。

（3）画布组件基础事件配置

画布组件基础事件配置功能的介绍：

阿里云事件配置介绍

在阿里云datav项目中，组件的基础事件配置通常用于组件之间的联动，当组件A的某个事件被触发的时候，组件B等其他组件的数据内容根据组件A当前的数据内容发生相应变化。
那么组件B的数据内容如何与组件A的数据内容关联起来呢？
我们通过全局变量进行关联，打个比方说，我们让组件B的数据来源是全局变量var_ncqg0，我们的组件A是如下图的下拉框选择器，我们希望下拉框内容被选中的时候，组件B的数据内容是选中的下拉框内容的title,那么我们就可以给组件A这个下拉框选择器绑定上事件，即在下拉框内容被选中时候的事件，被选中时，将选中数据的title赋值给var_ncqg0(也就是组件B的数据来源），这样我们就通过事件实现了这两个组件数据内容的联动。

go-view项目事件配置介绍

而在go-view项目中则不同，该项目中的基础事件配置可以在事件的回调中，对画布中任意组件的任意属性做处理。
这里我们可以以标题组件为例来说明，如下图，我们在单击事件的事件回调中打印出来页面的所有组件components,并且将其中id为"8ltquic12wg00"的组件的fontSize字体属性改成了24px

我们在预览页面中，对标题组件进行点击，在控制台查看components参数，我们可以看到components参数是一个对象，这个对象的key是画布各个组件的id,value则是对应的组件的属性，我们可以通过修改value中的属性值，来改变各个组件的属性值。

这里我们只有一个id属性，是因为我们的画布中只有一个组件，就是我们的标题组件，那这个id自然也就是我们标题组件的id了。
如下图，我们可以看到组件的主要的属性都在props.chartConfig属性下

我们在事件回调中设置了更改标题组件的字体大小，这里我们来检查一下是否真的修改了。

点击前，我们标题组件的字体大小是20px

点击后，我们标题组件的字体大小是24px，确实发生了变化。

go-view项目事件配置的实现思路

首先每个画布组件通过events属性存储用户设置的基础事件baseEvent，在预览界面实现组件的事件交互，那么预览组件需要
在画布的UI组件外封装一层进行事件的配置，这里主要是通过Vue.js 的内置组件component 来动态地渲染不同的组件，通过component 组件的v-on指令来给不同组件绑定各个基础事件。

如下两图是打印出来的events数据结构

（4）如何实现后退功能和前进功能

如下图所示，我们可以看到go-view项目中有对于用户操作的撤销（后退功能）和取消撤销（前进功能）的实现，那么这个功能，是如何实现的呢？

我们创建chartHistoryStore，在这个store中维护后退栈backStack和前进栈forwardStack这两个属性
画布中的每一步新增的操作我们都将其存入后退栈中，但只保留后100条新增的操作，同时清空前进栈。
撤回操作主要做的事情：
1.从后退栈栈顶获取最近一次操作，并且删除栈顶的元素，将后退栈被删除的栈顶的元素推入前进栈。
2.根据被删除的栈顶操作进行反向操作，根据被删除的栈顶操作的类型，区分以下几种情况进行撤回操作的处理
（1）被删除的栈顶操作是删除/新增操作，那么反向进行新增/删除操作。
（2）被删除的栈顶操作是锁定/解锁操作，那么反向进行解锁/锁定操作。
（3）被删除的栈顶操作是显示/隐藏操作，那么反向进行隐藏/显示操作。
（4）被删除的栈顶操作是移动操作，那么根据记录的之前的位置进行位置的还原。
（5）被删除的栈顶操作是解组/成组操作，那么反向进行成组/解组操作。
（6）被删除的栈顶操作是上移/下移操作，那么反向进行下移/上移操作。
（7）被删除的栈顶操作是置顶/置底操作，那么反向进行置底/置顶操作。

前进操作主要做的事情：
1.从前进栈栈顶获取需要前进的操作（即获取最近一次被撤回的操作），删除前进栈栈顶的元素，并且将该元素推入后退栈。
2.根据被删除的前进栈栈顶的操作进行复原操作，各种情况的区分同上撤回操作。