Vs - 基於 d3.js 和 vue.js 的數據可視化

Vs 概述

Vs 是一個基於 d3.js 和 vue.js 的數據可視化分析包，適用於圖表，dashboard 製做。

Github Repo

目前支持的組件

• d3Bar
• d3Line
• d3Pie
• d3ProgressArc
• d3SankeyCircular
• d3Timelion
• d3Timeline

主依賴

• d3.js v4
• vue.js v2.5

安裝

npm i -S GopherJ/Vs

使用

建議使用 vue-cli 搭建環境，如下只針對標準 vue.js 環境。

main.js

import Vs from 'Vs';

Vue.use(Vs);

template

// 水平柱狀圖
<d3-bar :data="data"></d3-bar>

// 圓餅圖 或者 甜甜圈
<d3-pie :data="data"></d3-pie>

// 曲線圖
<d3-line :data="data"></d3-line>

// 垂直柱狀圖
<d3-bar :data="data" :options="{ isVertical: true }"></d3-bar>

// Sankey 圖，詳見
// https://github.com/d3/d3-sankey
<d3-sankey-circular v-bind="dataSankey"></d3-sankey-circular>

// 時間軸圖
<d3-timeline :data="dataTimeline"></d3-timeline>

// 仿 kibana timelion
<d3-timelion :data="dataTimelion"></d3-timelion>

注意：以上均使用默認配置，柱狀圖，圓餅圖或者甜甜圈圖都默認須要傳入元素爲 { key: key, value: value} 類型的數組。Sankey 圖及其餘圖標支持的數據類型請見項目主頁。

預覽

https://gopherj.github.io/Vs/#/

文檔

https://github.com/GopherJ/Vs

部分截圖

最後

若是你有任何建議或者其餘但願也在將來支持的圖表請提 issue 或者郵件，cocathecafe@gmail.com，喜歡請 star，謝謝支持！