datav图层及交互1 如何图层看在第几层点击左侧会显示 2 好多按钮点进去就变回首页了比如一些说明文档权限 3

带着问题学习

1 如何图层看在第几层点击左侧会显示

2 好多按钮点进去就变回首页了比如一些说明文档权限

3 不支持编辑撤回吗不支持

4 调整尺寸等数字只能手动输入不能滚轮或者小键盘吗嗯

5 蓝图编辑器是查看功能还有别的用途吗

可以设置事件进行数据处理

6 数据源选择API 跨域问题是要配置代理吗我试了一个接口报500

勾选配置代理按钮

!7 地图组件不显示

!8 数据源这个是直连数据库吗还可以写sql语句

1 图层管理

锁定隐藏分组成表单组收藏到组件库置顶

2 组件列表

七八类下方可以搜索

3 画布编辑

右侧设置图标尺寸与电脑分辨率相同,还有位置左上角中心点

支持辅助线设置单击上方标尺显示双击取消

缩放有快捷键鼠标滚轮也可以或者手动输入

==删除操作不支持回滚!!==

4 组件样式有说明文档可以查看组件指南

help.aliyun.com/document_de…

组件升级各大屏分别升级相互不影响

美化工具箱不知道咋用不敢动

5设置数据源

点击组件可以设置数据源

数据过滤器代码: 进行数据格式修改转换支持代码导入

数据过滤器统一管理标尺上方筛选按钮

可以查看哪个组件在调用这个过滤器鼠标放到1个组件正在调用上面

6 地理组件

添加太多会卡没反应对机器要求高

下钻单独一部分修改还没试过

7 回调事件这个还需要研究一下

数据源选择数据库可以编辑sql语句

只能传数字和字符串

图层

1 下拉框选择器 :

设置尺寸为0

设置value值应用到全局变量

数据源设置为静态数据如日

当点击button-[日]时改变value变量值下拉框选择器监听到变量值变化会更改数据然后应用到全局

css

界面自动适配: 设置位置自适应

交互事件: 绑定到变量如果是相同的变量当值变化监听到之变化时会自动更新数据

一般使用翻牌器 0-最终数值显示

地图点+ 出现很多层越往上层级越往上

小知识

1看控件: help.aliyun.com/document_de…

2获取id的方法:运行然后点击在控制台打印id

3 hook绑定事件根据id stage.get("id名")

数据源根据0长0宽获取到data数据

将data数据进行转换在配置进行列名修改

一般是name value的形式

4下拉框选择器设置默认筛选条件

这个条件可以是多个类别组合成的对象

点击其他tab按钮修改下拉框选择器映射绑定的value值这个值是全局变量会重新筛选整个页面

5 顺序问题当控件先渲染 onChange事件不会执行,等拿到值之后再执行onChange

6 原型图还原 : 位置可以现在外层布局然后再拖到内层

7 查看动态拼接接口返回值: 在选择器里面打印值然后运行看控制台

8 图片已上传地址可以直接复制

交互ID能改变组件的数据

select的value值绑定一个变量当select进行某些操作时,其他与这个变量相关的数据也会发生变化

实例: 实现日月年切换关联翻牌器=> 通过关联全局变量点击按钮修改全局变量值value值

图层: 日月年显隐默认日外框显示月和年选中框隐藏

蓝图: 当点击月时将日年选中框隐藏,月显示

翻牌器的value绑定变量 time_type

设置默认数据源为从数据库获取 select后面动态拼接time_type

where aa.time_type =:time_type

日按钮

绑定变量

value:time_type

数据源:静态数据变量默认赋值为3

[  {    "value": "3"  }]

月按钮: value:2

年按钮: value:1

日月年绑定相同的变量点击会给变量赋值这个变量是全局变量当值变化, 接口中变量参数检测, 重新渲染全局中引用这个变量的元素

2 地图控件

多层级叠加

层级越往上代表在最上层

3 弹窗显示详情

数据源

数据过滤器语法: js es6

数据源最外面新建后面选择

组件接收全部数据分派到其他组件

蓝图编辑器: 导出翻牌器注意!!!组件的名字一定要设置清晰

图层编辑界面

一数据源赋值三种方式 1api 2蓝图 3 hook

1 api

拼接动态参数 :后面的变量和控件的value绑定的变量名称一致

http://10.236.9.150/datav/ngx/chinaUnicom/midplatform/smartOperation/opi/zhmh/v1/summary?area_id=:areaID&time_type=:time_type

2 蓝图法

打开f12 选中组件可以查看id

输入返回输出接口

rap2api.taobao.org/app/mock/17…

一个项目10多个不要太多否则难维护

可以连接设置方法,进行数据处理和条件判断等操作支持串行和并行方法支持显隐等方法无需编辑

screen改成hook 是原生事件编辑器

原生事件处理复杂交互

实例:按钮切换实践

日月年

点击月将月的样式修改为mb,日样式修改为Da,年样式修改为Ya

点击和不点击是不同的图层组件样式

月点击交互: 绑定变量

3 hook法

针对大屏组件做二次开发将screen改为hook

Tip: F12打断点调试查看数据找代码直接filter搜索hook,找到写的代码

module.exports = (stage) => {
  //数据源
  const dataset = stage.get('main-title_VSOCc')
  // 左边翻牌器
  const number_left = stage.get('number-title-flop_ax2Tc')
  //右边翻牌器
  const number_right = stage.get('number-title-flop_1E8Iq')
  //赋值
  let rs = dataset.data()
  // 重写value
  number_left.render([{ value: rs.response0 }])
  number_right.render([{ value: rs.response1 }])
  console.log(dataset.data())
  console.log('abc')
}

区别在于 hooks是初始化的时候就把数据赋值到组件,而蓝图编辑器是在页面加载完再赋值

hook和蓝图编辑器不能做相同操作会相互影响

二数据可视化proxy

官网地址: help.aliyun.com/document_de…

本地部署有路径规范

官网下载zip安装包,获取密钥然后在datav中配置

一般部署到专有云中进行内部传输

预告:

websocket通信

version node 8-12

echartjs包做自定义组件发布

很多api提到的组件里面没有比如倒计时搜不到

help.aliyun.com/document_de…
hooks的子组件

6.5.2 等后面的这些都是哪个组件 mapbox...序列
上次说到党建的地图打开完json格式后就被打断了 geojson数据吗

三千人千面

登录生成token 拿到token对大屏api数据进行控制

api.test.cn 返回一个值同一个链接发过去肯定是同一个值 ,==勾选cookie== ,大屏发布会生成外部链接,后端接收api请求拿到cookies值进行鉴权返回给大屏,不同账号对应不同cookies ,最终不同人看到的大屏是不一样的

hook 组件二次开发

实现鼠标移动到地图区域就能显示名称和数值

查找组件暴露哪些方法并且如何找到方法

area

www.runoob.com/jquery/even…

on() 方法在被选元素及子元素上添加一个或多个事件处理程序

鼠标移动事件: mouseOver mouseOut

现在是高亮锁定事件事件回调便于取数最好能拿到方位值

拿到父级省份的物理中点center 经纬度

放大缩小是地图事件地图怎么做到聚焦到某个点 flyTo

mapView.map.flyTo

websocket

通用代码

阿里云服务器广播事件

location.search.match 匹配到?后面的一串

定义socket new Socket ('大屏id 地址栏有 hook/id',自定义,变量定义 )

一开始就是红色

蓝图编辑器的方法

自定义组件

版本管理工具

登录账号

选择文件夹

创建组件

基于echarts

依赖包

datav图层及交互