Vue2 添加数据可视化支持的方法步骤


Posted in Javascript onJanuary 02, 2019

安装

npm install clay-core --save

首先,通过npm安装数据可视化库clay.js,具体的api你可以查阅文档:

https://yelloxing.github.io/clay-core/doc/#/quickstart/environment

这是一个非嵌入的库。

初始化

新建文件src/clay.js/index.js

import render from 'clay-core';
import Sizzle from 'sizzle';

let clay = render(window);
clay.config("$sizzleProvider", () => (selector, context) => Sizzle(selector, context));

export default clay;

clay.js启动前可以有多项配置,用以针对具体开发环境进行调整或加强,上面我们加强了选择器功能,因此,你可能还需要安装sizzle:

npm install --save sizzle

使用

现在,就可以对照api使用这个库了,举例子:

比如修改entry.js里面的方法:

1.首先在开头导入:

import clay from './clay.js';

2.在需要的地方使用:

el: clay('#root')[0],

使用组件

首先,我们去组件库中复制一个组件过来,组件仓库地址:

https://github.com/yelloxing/clay-component

复制到clay.js文件夹中,因为组件基于浏览器开发,而不是模块开发,因此,你需要在组件开发加入:

import clay from "./index.js";

然后,clay.vue是使用方法:

clay("svg")
 .attr("width", 800)
 .attr("height", 700)

 // 使用组件
 .use("circleTree", {
  // 数据
  data: program.data,

  // 结点名称
  name: orgItem => orgItem.name,

  // 树的圆心和半径
  cx: 350,
  cy: 350,
  r: 300,

  // 树结构配置
  root: initTree => initTree,
  child: parentTree => parentTree.children,
  id: treedata =>
   treedata.name + (treedata.value ? "_" + treedata.value : "")
 });

本篇最终项目文件Github地址:github.com/yelloxing/vue.quick/tree/V5

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 #Javascript
如何使用less实现随机下雪动画详解
Jan 02 #Javascript
详解Vue2 添加对scss的支持
Jan 02 #Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 #Javascript
JS中数据结构之栈
Jan 01 #Javascript
微信小程序自定义导航栏
Dec 31 #Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 #Javascript
You might like
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
python中将字典转换成其json字符串
2014/07/16 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
大学自我鉴定范文
2013/12/26 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
激励口号大全
2014/06/17 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
初三英语教学计划
2015/01/23 职场文书