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

安装

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    数据可视化 将数据通过图表的形式展现出来将大大的提升可读性和阅读效率 本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等 技术栈 vue2.x vuex 存储公共变量,如色值等 vue-router 路由 element-ui 饿了么基于vue2开发组件库,本例使用了其中的datePicker echarts 一款丰富的图表库 webpack.ES6.Babel.Stylus... 项目截图 开发 组件化 本项目完全采用组件化的思想进行开发.使用vue-router作为路由,每个页面

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

    安装 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 =

  • java 在file的尾部添加数据的两种方法总结

    java 在file的尾部添加数据的两种方法总结 问题描述:   在文件的末尾追加内容 方法1:利用RandomAccessFile类  1.将randomAccessFile模式设置为rw  2将randomAccessFile移动(seek)到文件末尾  3追加数据  4关闭流 方法2:利用FileWriter类  1.将FileWriter构造方法第二个参数置为true.表示在尾部追加  2追加数据  3.关闭流 实现代码: package cn.com; import java.io.F

  • 微信小程序云函数添加数据到数据库的方法

    1.新建小程序,建立云开发快速启动模板 这里和普通小程序的区别有三点 一是 project.config.json写上云函数所在目录"cloudfunctionRoot": "cloudfunctions/", 二是app.json写上"cloud":true 三是 app.js 添加,用于记录访问用户 onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础

  • Mysql 查询数据库容量大小的方法步骤

    查询所有数据库的总大小 方法如下: mysql> use information_schema; mysql> select concat(round(sum(DATA_LENGTH/1024/1024),2),'MB') as data from TABLES; +-----------+ | data | +-----------+ | 3052.76MB | +-----------+ 1 row in set (0.02 sec) 统计一下所有库数据量 每张表数据量=AVG_ROW_L

  • VS2019如何添加头文件路径的方法步骤

    大家在编写程序的时候往往会创建许多头文件,那么在VS2019中我们该怎么调用自己创建的头文件呢,其实只需要将头文件的路径添加到工程的编译环境中就行了,下面就来看看吧! 1.点击项目->属性->C/C+±>常规->附加包含路径,将路径添加进去. 最后再单击确定,就成功将自制的头文件路径添加成功啦! VS2019中设置了头文件路径却提示找不到头文件的一种原因 最近在设置VS2019工程中头文件的时候,出现一个很奇怪的问题:明明设置了头文件的附加包含目录,但是仍然提示头文件找不到.一种原

  • jQuery实现表单动态添加数据并提交的方法

    本文实例讲述了jQuery实现表单动态添加数据并提交的方法.分享给大家供大家参考,具体如下: 情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.a

  • c# 向MySQL添加数据的两种方法

    下面介绍两种执行SQL命令的方法,并作出相应地总结,第一种介绍一种常规用法,下面进行做简要地分析,首先我们需要执行打开数据库操作首先创建一个MySqlConnection对象,在其构造函数中传入一个连接字符串,然后执行Open操作打开数据库,在正确打开数据库之后我们才能进行相关的动作,在ExecuteSQL这个函数中, 我们执行MySqlCommand myCmd = new MySqlCommand(CmdString, conn),从而创建MySqlCommand对象,其中传入的两个参数分别

  • 使用R语言绘制3D数据可视化scatter散点图实现步骤

    使用R语言绘制3D数据可视化scatter散点图实现步骤

    目录 Step1. 绘图数据的准备 Step2. 绘图数据的读取 Step3.绘图所需package的调用 Step4.绘图 调整3D点的大小 调整透明度 注意事项 它来了它来了,它顺着网线走来了…哈哈,今天小仙给大家带来的是3D散点图. 强调一下啊,咱们这个教程里第一次出现了3D图,第一次出现了交互式图形(简单粗暴的理解, 用鼠标点击会动的图) 今天主要给大家介绍一下plotly这个R包,顺便分享下3D散点图的画法.plotly是一个在线的数据分析和可视化工具,图表类型丰富.可交互等等一堆优点

  • Laravel6.0.4中将添加计划任务事件的方法步骤

    此版本包括计划任务事件.新的 JSON 断言方法和所有最新更改.让我们来看看这个版本中的一些亮点新特性: 首先,在 TestResponse 类中添加了一个 assertJsonPath() 断言,对于在 JSON 响应中使用针对嵌套属性的点符号断言值,这个断言非常方便: $this->getJson(route('api.post.show', [$post->id])) ->assertJsonPath('tags', []) ->assertJsonPath('comment

  • 在IIS8服务器添加WCF服务支持的方法

    在IIS8服务器添加WCF服务支持的方法

     最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少对WCF服务的Managed Handler,按照以下步骤添加后,IIS8即支持WCF服务. 1. 首先添加MIME类型 扩展名".svc",MIME类型 "application/octet-stream"  2. 然后在"Handler Mappings&quo

随机推荐