阿里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里面定义的config
    console.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做出腾讯云首页效果
的文章尝试制作的管道效果