Vs - 基于 d3.js 和 vue.js 的数据可视化

Vs - 基于 d3.js 和 vue.js 的数据可视化

技术杂谈小彩虹2021-08-20 21:37:30260A+A-

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

部分截图

最后

如果你有任何建议或者其他希望也在未来支持的图表请提 issue 或者邮件,cocathecafe@gmail.com,喜欢请 star,谢谢支持!

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们