阿里datav自定义组件管道插件

阿里的datav是近两年阿里推出的一款市局大屏应用，主要是用于1920*1080以上的大屏幕数据展示的，小屏幕报表的还有个QuickBI。
网络上还有网易和帆软之类的有类似的产品。

datav
网易有数

虽然datav提供了一些自带的组件（38款）有列表柱状图和一些地图
但实际上这些组件还是太少，难以满足更多的需求。
很多的组件的样式非常的固定没有什么改造的空间，这个时候就需要用datav的自定义组件功能，自己做一个组件上去用。

datav的自定义组件教程

datav需要的环境是node.js8.00 - node.js 10.12.0
这个环境实际上是有点旧的，一些框架更新后需求的很多要比这个版本高，这就导致想开发datav必须要卸载node降级版本。
node 10.12.0

首先需要在datav的设置里找到我的组件，在线面的我的组件包里新建一个组件包。
这东西好像没啥意义，填写完毕后需要等待审核，大概几个小时后通过就可以使用了，意义只是拿来存放你得组件好像没什么需要审核的。

安装完毕后在命令行里执行
npm install --registry=https://registry.npm.taobao.org datav-cli -g
安装datav组件
输入
datav login
登陆datav 用来准备上传插件
用户名是阿里的用户名识别码在datav控制台上的我的组件/我的组件包里

登陆完毕后可以正常的使用开发
cd到一个文件夹输入
datav init
会生成一个基本的组件
cd到组件的文件夹
datav run
打开组件
输入
datav publish
会上传组件到服务器。

datav run打开后默认地址为http://localhost:1111

可以看到datav的开发实际上就是一个webpack项目，用法之类的其实都一样
可以先打开package.json 看一下基本的配置

"version": "0.0.1",

组件的版本号，需要一直更改。如果不更改会导致版本号冲突上传失败。

"dependencies": {"bcore": "0.0.18","jquery": "2.1.4","lodash": "4.6.1"},

引入的插件在这里配置，默认给了三个基本的。

 "config": {"color": {"name": "颜色","type": "color","default": "#1296db"},"speed": {"name": "速度","type": "number","default": 2.5}},

主要的配置，这个是组件在页面上右边展示的部分，在页面上输入值后会重新载入组件然后把新的值附上。

具体的type有number、text、color、image之类的
具体解释

再看index.js
这里面去配置组件展示的样式

var Event = require('bcore/event');
var $ = require('jquery');
var _ = require('lodash');

引入需要的插件，这边也可以直接引入html页面。在里面写好样式然后在index里直接控制页面元素来做插件。

var svg = require('/svg/index.html');
this.container = $(container);
this.container.html(svg)

不过这地方有个坑，datav的自定义组件是没有独立的运行空间的，作为组件引入后如果是多个引入。所有的样式和值都会堆积到第一个组件上后续的组件会为空。
如果组件只需要用一个或者较少的话，就可以直接这样做。

module.exports = Event.extend(function Base(container, config) {this.config = {theme: {}}var cfg =config;// console.log(cfg)this.container = $(container);           //容器this.apis = config.apis;                 //hook一定要有this._data = null;                       //数据this.chart = null;                       //图表this.init(config);}

上面会有一个马良基础类初始化的过程，这边的this.container 就是整个组件的html

 /*** 公有初始化 */init: function (config) {//1.初始化,合并配置this.mergeConfig(config);//2.刷新布局,针对有子组件的组件 可有可无this.updateLayout();//3.子组件实例化//this.chart = new Chart(this.container[0], this.config);//4.如果有需要, 更新样式this.updateStyle();},render: function (data, config) {//你的js代码//如果有需要的话,更新样式this.updateStyle();},

在初始化完毕后就可以直接往里面添加元素执行js代码

const div = $('<div width="500"  height="'+cfg.y+'" style="position: fixed;left: 0px;top:0px;"></div>');
this.div  = div[0];

从这里就添加了一个div到页面里可以通过http://localhost:1111在控制台看到这个元素被添加了
var cfg =config; 加载了在package.josn里的配置
如果在package.josn里的config里定义了一个名称为‘y’的参数
在这里就可以直接调用了

可以在里面任意的编写代码来制作一些想要的效果。
比如做定时器倒计时，或者用$(div).append("")
之类的方法插入容器

附上一段代码用echar做的管道组件

index.js

//这里的代码写在马良基础类初始化的里面
//module.exports = Event.extend(function Base(container, config) {//创建你的元素
//}const canvas1 = $('<canvas  width="500"  height="'+cfg.y+'" style="position: fixed;left: 0px;top:0px;"></canvas>');this.canvas1 = canvas1[0];

//这里的代码写在初始化之后的render方法里render: function (data, config) {data = this.data(data);var cfg = this.mergeConfig(config);//获取你在package.js里面定义的configconsole.log(cfg)let c = this.canvas1;let context = c.getContext("2d");let width = 500;let height = cfg.y;this.fPoints = [{x: cfg.x, y: cfg.y,r:cfg.delay}];let fPoints = this.fPoints;context.clearRect(0, 0, width, height);function drawCircle() {for (let i = 0; i < fPoints.length; i++) {context.lineWidth = 0; context.shadowBlur = cfg.guan;context.shadowColor = cfg.color +'';context.fillStyle = cfg.color +'';context.fill();context.beginPath();context.arc(fPoints[i].x, fPoints[i].y, fPoints[i].r, 0, Math.PI * 2);context.closePath();}if (fPoints[0].y > 0) {fPoints[0].x -= 0;fPoints[0].y -= cfg.speed;}else if (fPoints[0].y < 1) {fPoints = [{ x: cfg.x, y: cfg.y,r:cfg.delay }];}}function render() {let prev = context.globalCompositeOperation;context.globalCompositeOperation = 'destination-in';context.globalAlpha = 0.9;context.fillRect(0, 0, width, height);context.globalCompositeOperation = prev;drawCircle();if (width !== 0) {//在动画没有结束前，递归渲染window.requestAnimationFrame(render);window.cancelAnimationFrame(render)}}render()//如果有需要的话,更新样式this.updateStyle();}

package.json
这边是config的配置

 "config": {"y": {"name": "起始y(长度)","type": "number","default": 420},"x": {"name": "起始X","type": "number","default": 452},"delay": {"name": "元素大小","type": "number","default": 8},"guan": {"name": "管道宽度","type": "number","default": 0},"color": {"name": "元素颜色","type": "color","default": "#1296db"},"speed": {"name": "元素速度","type": "number","default": 2.5}},

datav的组件和配置个人感觉还不是非常的完善，还在不断地改进。
没有详细的文档和视频，网络上也找不到其他的教程，开发起来还是比较痛苦的。
不过datav的开发者非常负责在钉钉群里能够及时的解决反馈的问题。
钉钉群：21931738

之前开发的时候非常头疼，给的教程内容太少只有几个页面，也没有详细的介绍，
尝试管道的时候也碰到了很多问题，不过datav的人员给拿去改造了一下成了上面的可以用的代码，十分感谢datav的技术。

另外这个demo是基于
基于canvas做出腾讯云首页效果
的文章尝试制作的管道效果

阿里datav自定义组件管道插件相关推荐

dataV 自定义组件开发（个人信息展示自动轮播）
组件开发快速入门(Node版本在 8.0.0 及以上,10.12.0以下) 安装开发工具:npm install --registry=https://registry.npm.taobao.org ...
微信小程序自定义组件/插件等解析
自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页 ...
微信小程序组件和插件
微信小程序的组件和插件一.基础组件 1.主要的基础组件 2.基础组件的使用 (1)基本用法 (2)其他用法二.自定义组件自定义组件的使用 (1)创建组件 (2)配置组件 (3)使用自定义组件三 ...
微信小程序_文档_05_框架_组件_插件_多线程_兼容_优化
基础组件框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发. 详细介绍请参考组件文档自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定 ...
Vue数据可视化组件库，类阿里DataV，提供SVG的边框及装饰，图表，飞线图等组件，简单易用，持续更新...
由于阿里DataV收费,接口维护略有麻烦,同时也基于兴趣和学习,自己从依赖到组件独立开发了一个组件库,从效果上跟阿里的DataV很像. 主要的组件类型 SVG的边框,主要用于提升页面效果,一个边框组件 ...
阿里云大数据组件的基本介绍
阿里云大数据组件的基本介绍注意:本文结合了本人对Hadoop生态和Spark的理解,阅读本文需要对传统的大数据组件有基本的认识和了解.本文不具备权威性,若要准确地了解阿里云大数据组件的特性请直接查看 ...
25000字总结Android优秀的第三方框架、各种学习资料汇集一系统组件、Design组件、自定义组件等等
说明以下内容博主很多也没有用过分享出来大家一起学习用到的时候可以来查看有问题可以沟通希望大家不要污染了学习环境如果觉得有帮助点个赞支持一下系统控件 TextView Github ...
uni-app简介、条件编译、App端Nvue开发、HTML5+、开发环境搭建、自定义组件、配置平台环境、uniCloud云开发平台
uni-app简介 : 概述:uni-app是一个前端跨平台框架:会uni-app就可以用一套代码(类似vue语法)打包出安卓.ios.及各种小程序(微信.qq.支付宝等)端跨平台发布. 生态:完整的 ...
app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...

阿里datav自定义组件管道插件

阿里datav自定义组件管道插件相关推荐

最新文章

热门文章

阿里datav自定义组件 管道插件

阿里datav自定义组件 管道插件相关推荐

最新文章

热门文章

阿里datav自定义组件管道插件

阿里datav自定义组件管道插件相关推荐