怎么在Vue2中添加數據可視化支持

這期內容當中小編將會給大家帶來有關怎么在Vue2中添加數據可視化支持，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

安裝

npm install clay-core --save

首先，通過npm安裝數據可視化庫clay.js，

初始化

新建文件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 : "")
 });

上述就是小編為大家分享的怎么在Vue2中添加數據可視化支持了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。