1. 二维可视化大屏制作入门

视频介绍

大家好，欢迎来到山海鲸可视化。

感谢您选择我们的产品。

本套视频教程，我将简单地给大家介绍一下山海鲸可视化，让大家对我们的产品有一个初步的了解。

首先，我们下载并安装好山海鲸可视化软件，打开软件来到首页，我们可以从这里新建项目，可以选择从模板创建或者从空白项目创建。山海鲸内置了许多丰富的模板，基于模板可以快速地搭建项目。为了更好地讲解，这里我们选择从空白项目创建。

然后，我们来到了山海鲸可视化项目的编辑界面。左边是图层面板，当前看板所有的组件都会出现在这里；右边是属性面板，所有组件以及看板的样式、交互、数据、二开都是在这里进行设置，是主要的操作区域；底部是大屏看板，这里可以添加多个子看板。前景、背景看板是用来放置项目里面共用的元素，比如大标题、边框、菜单等在所有大屏里面都会出现的组件，通常都会放在前景大屏，而背景大屏则是专门用来放置地图、模型等主元素的组件，它在最底层。

图层面板的旁边的这一列图标是组件栏，山海鲸可视化所有的组件都来自于这里。第一个图表，这里内置了各种不同类型的图标组件，点击即可添加，可以看到组件成功添加到项目里面，可以随意改变位置和大小。目前我们选中的是图标组件，右侧是相关的属性面板，可以看到有非常多的设置项，包括组件的透明度、颜色、文本等大小以及背景等。如果我需要调整柱状图的颜色，可以点击这里，点击确定，颜色就被轻松修改掉了。我们看到这里还有一条数据是黄色，这是它的高亮颜色，也可以在这里轻松修改。下面是图形文本的参数，也就是图形上的指标，如果不需要也可以把它关掉。排行文本也是一样，后面是针对这项设置的一些样式参数。接着下面是图形形状、辅助线、图例、提示信息等各项设置，整个这一栏都是该组件的样式设置。

如果说希望数据达到某个值时颜色发生变化，可以使用数据条件。首先我们添加一组数据，这里可以选择添加静态Excel数据，也可以选择动态API数据以及其他数据库。关于动态数据的连接方法，我会在视频的后半段给大家讲解。我们以静态数据示例，点击确定，在数据栏把自有数据切换为公共数据，断开旧的数据，连接新的数据，这个时候图表就成功绑定上了数据。接着给它加一个数据条件，选择数据表，选择字段，给它设定一个条件，比如设定条件为大于120时触发，然后来到图表的颜色设置这里，这里是可以选择数据条件触发还是直接触发，如果直接触发的话，需要先定义条件，可以看到图表成功地被数据影响了。当然也可以选择数据条件，添加我们刚才创建好的条件，这个方案更适用于数据量大、条件多的情况。

像这样的功能，包括其他组件，在山海鲸官网都有非常详细的说明，可以在首页的下方找到官方文档教程入口，点击图文教程，找到项目制作里面的可视化组件，每一个组件都有详细介绍，每一个设置项，它的功能和所需的数据字段在这里都有说明。如果有什么疑问，可以先到这里进行查阅。同时在组件属性面板的最上方，有一个查看教程的按钮，可以直接跳转到对应的文档。

再回到软件，这里还有一个扩展选项，有必要给大家介绍一下。当鼠标悬停到设置项名称上，会出现一个3个点的图标，点击后里面有6个选项。第一个，条件样式和我们刚刚演示的一样，所有的设置项都可以这样设置。第二个是调用代码示例，如果这个设置项需要用到二次开发，可以在这里看，在文档中心也有关于二次开发的教程，其中包括基础教程、进阶教程、API参考以及系统集成等，如果您需要了解，请前往查看。第三个属性动画，可以给这个属性值做一个动画，可以设置好开始到结束的变化值，打开播放就可以看到效果。第四个生成属性数据源，点击后可以当前值为例生成一条数据，可以看到，这是我们刚刚点击后创建的数据源。第五个生成数据字段，可以给当前值添加一个数据字段，这个就是我们刚刚生成的数据字段，这个时候就可以去绑定需要的字段了。第六个重置，就是恢复到初始值。

然后在整个属性面板的右上角，有一个状态，面板状态是会影响整个组件的，通常会用于组件交互。这里我们新建一个状态二，然后在状态2的情况下，去修改一些参数，比如这里我给状态2添加一个背景，随便改一个颜色，点击确定，背景已经生效。接着我们可以再给它添加一个边框。OK，我们的状态大概就设置成这样。

接下来我们添加一个菜单控件，通过菜单去切换柱状图的状态。先修改一下菜单名称，设置好之后来到交互这里，触发方式改为选中，然后选择无背景，给它添加一个切换状态，然后选择我们刚刚设置的组件，然后给它切换为默认状态，由背景切换为状态2，然后点击确定，交互就设置完成，点击试一下，这就是多状态最多的使用场景，交互切状态。

接着我们看一下其他组件，比如说数据图表，再比如说这个指标卡，它们的设置方法其实跟图表是一样的。这边的面板可以修改它的样式，然后也是可以设置多状态，并且可以设置交互以及数据。关于交互，用的最多的还是控件，比如说按钮，选择按钮，我们在旁边可以给他添加一个交互，然后这里的触发方式有这么多，选中、点击、悬停或者入场、离场，然后还有下拉菜单，也是我们比较常见的。我们先修改一下选项值，第一个改成10，第二个改成50，第三个改成100，然后我们来到交互面板，点击添加交互，给它添加一个修改设置，把柱状图的透明度进行一个修改，比如这里是10的时候，把它改为10，50的时候，把它改为50，100的时候改为100，那这个时候，我就可以通过这个下拉菜单去控制这个组件的透明度，大概就是这样，非常简单的一个设置。

关于组件的设置和交互，在我们官方网站也是有详细的视频教程的。同样来到首页，我们点击视频教程，然后在入门专题里面找到项目制作，在这里可以看到各种设置项的教程，比如说之前说的条件样式，包括现在的这个组件交互，在这里都会有一个非常详细的说明。

然后我们接下来看一下地图，地图的设置方法其实也是一样，在右边也是会有非常多的设置项。如果说想添加标记，我们可以把标记的开关打开，然后这里可以调整标记的样式，你可以给他上传一张标记素材，点击就可以添加，然后需要给他一个数据，这是一个省份的数据，它会按省份的名称去识别，自动出现在省份的最中央，当然也可以通过经纬度生成，颜色也是可以进行修改的。如果说你想选择其他城市，可以在这里选择。好的，那这个组件大概就是这样。

然后是这个在线地图，这个地图它是需要连接网络的，然后双击可以进入这个组件的编辑状态，这里我们可以添加一些其他的要素，也可以去给他添加一些标记点，添加方式非常简单，点击即可添加，包括自带的一个测绘的功能，点击即可测量。另外在山海鲸视频中心，有一个篇章是专门讲解二维地图的，我们来到山海鲸视频中心，向下轻微滚动即可找到地图专题，包括瓦片地图、轮廓地图、三维地图，里面的内容非常详细。除了我们刚刚讲的标记点之外，包括飞线、线段、热力图等，这里都有详细介绍。

接着我们继续往下看，然后拓扑图鉴，这里我们内置了一些成品的拓扑组件，点击即可添加。下面还有套件，也是我们设计好的一些组件，这里通过套件可以很快地搭建出一个大屏项目。
下面我们来看一下数据连接部分。我们先添加一个表格组件，我们先把表格的文字改得更大、更明显一些，这样的话，我们讲解起来会更加清晰一些。然后我们来到数据面板，第一个是字段设置，组件的数据就是从这里添加，组件默认连接的是自有数据，这个数据只起到展示作用，没有办法做筛选和联动，所以我们给它连接一组外来数据，选中表格后，点击想要的字段，就可以快速添加，现在数据已经成功添加进来了，最后一列表格样式稍微有一些问题，稍微修改了一下。好的，数据已经添加完成，我们接着看下一个。

下一个关键字段，这里通常会放一些ID字段，ID的话相当于是这条数据的一个编号，主要用于数据联动，一般是不会展示出来。我先打开数据列表给大家看一下。另外关于动态数据的连接方法，可以在山海鲸文档中心找到相应的教程，文档中心左侧的导航菜单中有一个关于数据连接的专题教程，这里不仅介绍了每个数据库的连接方法，还详细地讲解了数据更新和数据替换的操作规范。
我们再回到山海鲸，选中数据表后，在右侧可以打开该数据表，数据的第一列是ID，ID可以是其他值，比如字母或者文字，需要注意的是不能重名，不能为空。这是一个统计了各个城市项目数量的数据表格，每个城市下有不同的单位，每个单位区分了普通项目和重点项目。
接下来，我会给大家演示如何给组数据制作数据联动和数据筛选。这里的清空末尾行，开启之后，会自动把末尾的空白数据清空掉，有时候会不小心在表格里按到一些空格键之类的，这个功能可以解决这些问题。现在显示的行数太少了，我们可以改得多一些，这里有个行数直接修改。OK，接着看一下排序，在这里我们可以选择想要排序的字段，比如说我这里以数量去排序，可以从大到小，也可以从小到大，这里还可以对已经排序好的数据进行筛选，比如说我想看前几条，或者说想指定看某一行，我都是可以通过这边进行操作。这里是数据联动，可以选择联动其他组件或者被其他组件联动，我们打开开关后，会出现一个高级设置，可以在这里添加具体想要联动的组件或者不想被联动的组件。
下面我给大家演示一下组件之间是如何联动的。添加一个菜单组件，因为要做联动，菜单也需要通过数据生成，和表格必须是同一个数据。在样式这里先选择来自数据，再切换到数据面板，就会出现一个数据字段，然后我们给它添加同样的数据，可以添加城市的，也可以添加单位的，主要看这里需要展示什么。内容已经超出了组件范围，我们稍微调整一下。好的，我们现在可以给他设置联动，我们可以用让菜单去联动列表，点击菜单的时候，我希望列表的内容联动为菜单相关的内容，那菜单可以选择联动其他组件，列表这边则接受其他组件联动，高级设置可以暂时先关掉，因为我们当前的项目里面就这两组件联动，关系比较清晰，所以不需要。如果说联动的组件很多，以防混乱，可以打开高级设置，自定义选择联动和被联动组件。可以看到，列表已经成功地被菜单联动了。

下一个是选中传递这个功能，可以把当前组件的选中状态传递给其他组件。先把数据联动关掉，传递给其他组件，菜单选择接受其他组件传递，可以看到，列表的选中状态现在已经可以传递给菜单，会根据列表的选中而选中，但是菜单的选中没有办法传递给列表，因为他们的字段类型不一样，菜单这里选择了精华，但是列表里面有很多精华，他无法判断该选中哪一个，所以如果要做选中联动，联动和被联动组件的字段类型需要相同。我们可以把城市的字段换成单位的字段，这样菜单和列表的字段一一对应上了，就可以相互选中联动了。把两个组件的接受和传递都打开，这样选中联动的功能就设置成功了。

这里是数据筛选，如果需要筛选，可以在这里设置，前面那个筛选是排序时的筛选，这个筛选是整体的筛选。这里有一个数据条件字段，主要是用于一些直接判断的条件，比如像状态里面，这里选择了直接判断，我们有时数据量比较大，可能会出现相同的字段，为了建立更清晰的联动关系，这里开了一个这个设置项，只需要把字段添加到这里，就可进行联动。

好的，到这里关于二维部分的功能就结束了。
最后，再说一下关于二维部分卡顿的问题。部分小伙伴在制作项目时，在没有三维场景的情况下，还会出现卡顿的现象。二维卡顿其实无非就那么几个原因，导致视频多、分辨率大、数据刷新频率高等原因。同样的在官网的文档中，依然能够找到优化方法，需要了解的小伙伴请移步到山海鲸的文档中心。