Vs – 基於 d3.js 和 vue.js 的資料視覺化

GopherJ發表於2019-03-04

Vs 概述

Vs 是一個基於 d3.jsvue.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

部分截圖

Vs – 基於 d3.js 和 vue.js 的資料視覺化
Vs – 基於 d3.js 和 vue.js 的資料視覺化
Vs – 基於 d3.js 和 vue.js 的資料視覺化

最後

如果你有任何建議或者其他希望也在未來支援的圖表請提 issue 或者郵件,cocathecafe@gmail.com,喜歡請 star,謝謝支援!

相關文章