Antdv Table Charts

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

在线预览

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
}

声明

内部项目使用，组件功能仅满足特定需求。第三方可使用但不负责更新和解决问题。