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 通过json自动生成Dom的代码
Apr 01 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
浅谈js原生拖放
2016/11/21 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
工厂厂长岗位职责
2013/11/08 职场文书
人力资源专业推荐信
2013/11/29 职场文书
上级检查欢迎词
2014/01/18 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
保护环境建议书100字
2014/05/13 职场文书
环境科学专业求职信
2014/08/04 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
完整版商业计划书
2014/09/15 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2014年导购员工作总结
2014/11/18 职场文书
面试通知邮件
2015/04/20 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
windows系统搭建WEB服务器详细教程
2022/08/05 Servers