Y-data-char NPM

y-data-charts

一个通过表格数据生成自己想要的图表

快速上手

npm install y-data-charts

引入y-data-charts

在main.js中写入一下内容:

  import vue from 'vue'
  import yDataCharts from 'y-data-charts'
  import 'y-data-charts/lib/y-data-charts.css' // 引入y-charts-report的样式
  import * as echarts from 'echarts'
  Vue.prototype.$echarts = echarts // 将echarts绑定在原型链上
  Vue.use(yDataCharts)

y-data-charts依赖echarts并且必须将echarts绑定到原型链上

源码地址：https://github.com/Yonina11-code/y-data-charts

数据配置项

根据相应的数据生成数据大屏

view-for-data 配置项

参数	说明	类型	是否必填	格式	默认值
barData	柱状图数据	Array	是		[]
numsData	左侧数据数据	Object	是		{}
title	子标题	String	否		''
ballsData	右侧数据项	Object	是		{}
ballPeriod	右侧小球旋转一周的时间	String	否	'xxs'(一定要带单位s)	'20s'
configOptions	数据配置项	Object	否	见下文

configOptions需要的参数说明

参数	说明	类型	是否必填	格式
title	大屏数据顶部标题	String	否(信用卡总收入监控)
itemConfig	数据格式配置项	Object	否	见下文
barOptions	柱状图格式配置项	Object	否	见下文

itemConfig

参数	说明	类型	是否必填	默认值
label	标题值	String	否	indicatorName
value	数据值	String	否	indicatorValue
unit	单位值	String	否	indicatorUnit
children	children值	Array	否	childIndicatorList

barOptions

参数	说明	类型	是否必填	默认值
dataset	数据值配置项(与echarts一致)	Object	否	dimensions: 'label', 'value'

echarts 数据大屏

axios core-js echarts lottie-web mockjs node-sass utils-lite vue y-data-chart

@infinitebrahmanuniverse/nolb-y-@everything-registry/sub-chunk-3194

1.0.0

3 years ago