y-data-char

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']