Vs 概述
Vs 是一個基於
d3.js
和vue.js
的資料視覺化分析包,適用於圖表,dashboard 製作。
目前支援的元件
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
,謝謝支援!