@wodecorp/antdv-table-charts NPM

Antdv Table Charts

快速渲染原始查询数据为表格和图，支持完全的自定义图表以及额外扩展。

npm

在线预览

https://fairyever.github.io/antdv-table-charts/

安装

npm i @wodecorp/antdv-table-charts ant-design-vue --save

import AntdvTableCharts from '@wodecorp/antdv-table-charts'
import '@wodecorp/antdv-table-charts/dist/antdv-table-charts.css'

Vue.use(AntdvTableCharts)

注意需要自行引入 ant-design-vue 并至少保证全局注册 Table 和 Button 组件

import Vue from 'vue'

import { Table, Button } from 'ant-design-vue'

Vue.use(Table)
Vue.use(Button)

配置项

主要配置

prop	desc	required	default
columns	表格列配置	是	同 a-table
dataSource	表格数据	是	同 a-table
views	图表配置	是
view	当前显示的视图名称	否	'table'
viewController	是否使用自带的视图切换 UI	否	false
...	...	...	所有原版 a-table 支持的参数

views 配置项：

prop	desc	required	default
name	视图名称	是	''
title	视图标题	是	''
data	原始数据转图表数据规则	是	`{ row: '', col: '' }`
size	图表尺寸	否	`{ height: '500px', width: '100%' }`
option	图表配置工厂函数	是	`function ({ header, side, headerTrans, sideTrans, data }) { return {} }`

views.option 函数参数

prop	desc
data	转换后的数据
header	转换后的数据对应的表头
headerTrans	转换后的数据对应的表头并尝试进行字典对照
side	转换后的数据对应的索引
sideTrans	转换后的数据对应的索引并尝试进行字典对照

数据转换规则：

原始表格数据

[
  { name: 'Lucy',   chinese: 80, english: 90, math: 100 },
  { name: 'Ben',    chinese: 88, english: 99, math: 90  },
  { name: 'LiMing', chinese: 83, english: 92, math: 89  },
  { name: 'Hong',   chinese: 66, english: 87, math: 93  },
  { name: 'Jack',   chinese: 90, english: 97, math: 98  }
]

示例 1

row = 'name'
col = ['chinese', 'english', 'math']

|        | chinese | english | math | ← chart xAxis
| Lucy   |         |         |      | ← pie
| Ben    |         |         |      |
| LiMing |         |         |      |
| Hong   |         |         |      |
| Jack   |         |         |      |
    ↑
chart series

示例 2

row = ['chinese', 'english', 'math']
col = name

|         | Lucy | Ben | LiMing | Hong | Jack | ← chart xAxis
| chinese |      |     |        |      |      | ← pie
| english |      |     |        |      |      |
| math    |      |     |        |      |      |
    ↑
chart series

代码示例

<antdv-table-charts v-bind="charts"/>

{
  columns: [
    { title: '姓名', dataIndex: 'name', width: 100 },
    { title: '语文', dataIndex: 'chinese' },
    { title: '数学', dataIndex: 'math' },
    { title: '英语', dataIndex: 'english' }
  ],
  views: [
    {
      name: 'bar',
      title: '柱状图',
      data: {
        row: 'name',
        col: ['chinese', 'english', 'math']
      },
      option ({ header, side, headerTrans, sideTrans, data }) {
        return {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: sideTrans
          },
          xAxis: {
            type: 'category',
            data: headerTrans
          },
          yAxis: {
            type: 'value'
          },
          series: data.map((data, index) => ({
            type: 'bar',
            name: sideTrans[index],
            data: data
          }))
        }
      }
    },
    {
      name: 'bar-transverse',
      title: '横向柱状图',
      data: {
        row: 'name',
        col: ['chinese', 'english', 'math']
      },
      size: {
        height: '800px',
      },
      option ({ header, side, headerTrans, sideTrans, data }) {
        return {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: sideTrans
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: headerTrans
          },
          series: data.map((data, index) => ({
            type: 'bar',
            name: sideTrans[index],
            data: data
          }))
        }
      }
    },
    {
      name: 'line',
      title: '折线图',
      data: {
        row: 'name',
        col: ['chinese', 'english', 'math']
      },
      option ({ header, side, headerTrans, sideTrans, data }) {
        return {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: sideTrans
          },
          xAxis: {
            type: 'category',
            data: headerTrans
          },
          yAxis: {
            type: 'value'
          },
          series: data.map((data, index) => ({
            type: 'line',
            name: sideTrans[index],
            data: data
          }))
        }
      }
    },
    {
      name: 'pie',
      title: '饼图',
      data: {
        row: 'name',
        col: ['chinese', 'english', 'math']
      },
      option ({ header, side, headerTrans, sideTrans, data }) {
        return {
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: (data[0] || []).map((data, index) => ({
                value: data,
                name: headerTrans[index]
              }))
            }
          ]
        }
      }
    }
  ],
  dataSource: [],
  view: 'table',
  size: 'small',
  bordered: true,
  viewController: true
}