Vue2 添加數據可視化支持的方法步驟

這篇文章主要介紹了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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。