脚本宝典收集整理的这篇文章主要介绍了Vs - 基于 d3.js 和 vue.js 的数据可视化,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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/#/
如果你有任何建议或者其他希望也在未来支持的图表请提 issue
或者邮件,cocathecafe@gmail.com
,喜欢请 star
,谢谢支持!
以上是脚本宝典为你收集整理的Vs - 基于 d3.js 和 vue.js 的数据可视化全部内容,希望文章能够帮你解决Vs - 基于 d3.js 和 vue.js 的数据可视化所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。