datav
Vue数据可视化组件库(类似阿里DataV,大屏数据展示),提供SVG的边框及装饰、图表、水位图、飞线图等组件,简单易用
- DataV是一个基于Vue的数据可视化组件库(当然也有React版本)
- 提供用于提升页面视觉效果的SVG边框和装饰
- 提供常用的图表如折线图等
- 飞线图/轮播表等其他组件
npm安装
$ npm install @jiaminghi/data-view
yarn安装
yarn add @jiaminghi/data-view
使用
import Vue from 'vue'
import DataV from '@jiaminghi/data-view'
Vue.use(DataV)
// 按需引入
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
Charts
Charts是一个轻量级的简易图表,主要为DataV大屏数据展示组件库提供图表支持,在该场景下不考虑图表交互,仅需展示效果,因此插件不提供交互及复杂功能
npm安装
npm install @jiaminghi/charts
yarn安装
yarn add @jiaminghi/charts
#使用
import Charts from '@jiaminghi/charts'
const container = document.getElementById('container')
const myChart = new Charts(container)
myChart.setOption({
title: 'My Chart',
// ...otherConfig
})
#快速体验
<!--资源位于个人服务器仅供体验和测试,请勿在生产环境使用-->
<!--调试版-->
<script src="http://lib.jiaminghi.com/charts/charts.map.js"></script>
<!--压缩版-->
<script src="http://lib.jiaminghi.com/charts/charts.min.js"></script>
<script>
const Charts = window.Charts.default
// do something
</script>