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));
 /在此我向大家推薦一個前端全棧開發交流圈：619586920  突破技術瓶頸，提升思維能力
export default clay;

clay.js啓動前可以有多項配置，用以針對具體開發環境進行調整或加強，上面我們加強了選擇器功能，因此，你可能還需要安裝sizzle:

npm install --save sizzle

使用

現在，就可以對照api使用這個庫了，舉例子：
比如修改entry.js裏面的方法：
1.首先在開頭導入：

import clay from './clay.js';

2.在需要的地方使用：

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

使用組件

首先，我們去組件庫中複製一個組件過來
複製到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,
 //在此我向大家推薦一個前端全棧開發交流圈：619586920  突破技術瓶頸，提升思維能力
  // 樹結構配置
  root: initTree => initTree,
  child: parentTree => parentTree.children,
  id: treedata =>
   treedata.name + (treedata.value ? "_" + treedata.value : "")
 });

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

獲取資料

本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：619586920，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。