x-extends/vxe-table-plugin-charts

Fork: 4 Star: 8 (更新于 2024-11-26 04:56:10)

license: MIT

Language: TypeScript .

📊 基于 vxe-table 的图表渲染插件

最后发布版本： 3.3.1 ( 2024-02-29 08:32:57)

GitHub网址

介绍
版本
相关

vxe-table-plugin-charts

基于 vxe-table 的图表渲染插件（依赖区域选取功能），基于 echarts 实现

Compatibility

对应 vxe-table v4 版本

Installing

npm install vxe-table@next vxe-table-plugin-charts@next echarts

// ...
import VXETable from 'vxe-table'
import echarts from 'echarts'
import VXETablePluginCharts from 'vxe-table-plugin-charts'
import 'vxe-table-plugin-charts/dist/style.css'
// ...

// 方式1：NPM 安装，注入 echarts 对象
VXETable.use(VXETablePluginCharts, {
  echarts
})

// 方式2：CDN 安装，只要确保 window.echarts 存在即可
// VXETable.use(VXETablePluginCharts)

Import on demand

// ...
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legendScroll'

import VXETablePluginCharts from 'vxe-table-plugin-charts'
import 'vxe-table-plugin-charts/dist/style.css'
// ...

VXETable.use(VXETablePluginCharts, {
  echarts
})

API

Context menu codes

code 编码	describe 描述	params 参数
CHART_BAR_X_AXIS	横向柱状图（如果设置了类别 category 则 series 至少一列，否则 series 至少两列）	{category?: field}
CHART_BAR_Y_AXIS	纵向柱状图（如果设置了类别 category 则 series 至少一列，否则 series 至少两列）	{category?: field}
CHART_LINE	折线图（如果设置了类别 category 则 series 至少一列，否则 series 至少两列）	{category?: field}
CHART_PIE	饼图（如果设置了类别 category 则 series 只需一列，否则 series 需要两列）	{category?: field}

Demo

<vxe-table
  height="500"
  :data="tableData"
  :mouse-config="{ area: true }"
  :menu-config="menuConfig"
  :edit-config="{trigger: 'dblclick', mode: 'cell'}">
  <vxe-column type="seq" width="60"></vxe-column>
  <vxe-column field="nickname" title="Nickname" :edit-render="{name: 'input'}"></vxe-column>
  <vxe-column field="sex" title="sex" :edit-render="{name: 'input'}"></vxe-column>
  <vxe-column field="age" title="Age" :edit-render="{name: 'input'}"></vxe-column>
  <vxe-column field="rate" title="Rate" :edit-render="{name: 'input'}"></vxe-column>
</vxe-table>

export default {
  data () {
    return {
      tableData: [
        { id: 100, name: 'Test1', nickname: 'Nickname1', sex: '1', age: 26, rate: '3' },
        { id: 100, name: 'Test2', nickname: 'Nickname2', sex: '0', age: 28, rate: '5' }
      ],
      menuConfig: {
        body: {
          options: [
            { code: 'CHART_LINE', name: '折线图' }
          ]
        }
      }
    }
  }
}

License

最近版本更新:(数据更新于 2024-09-27 16:50:23)

2024-02-29 08:32:57 3.3.1

2024-01-20 13:49:07 4.0.0

2021-03-23 23:25:50 1.7.1

2021-03-16 17:57:00 3.0.1

2021-03-16 09:51:12 3.0.0

2021-03-16 09:48:08 1.7.0

2020-12-21 19:05:21 1.6.3

2020-12-21 19:00:45 1.6.2

2020-12-11 20:00:28 1.6.1

2020-11-16 10:01:52 1.6.0

主题(topics):

vxe-table

x-extends/vxe-table-plugin-charts同语言 TypeScript最近更新仓库

2024-12-21 21:40:12 lobehub/lobe-chat

2024-12-21 12:01:51 siyuan-note/siyuan

2024-12-21 10:57:01 ai16z/eliza

2024-12-21 09:15:35 MetaCubeX/metacubexd

2024-12-21 04:50:26 mediar-ai/screenpipe

2024-12-20 19:36:48 vitejs/vite