1.1.0 • Published 1 year ago
y-data-charts v1.1.0
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' |