https://github.com/x-extends/vxe-table-plugin-charts

📊 基于 vxe-table 的图表渲染插件
https://github.com/x-extends/vxe-table-plugin-charts

vxe-table

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/x-extends/vxe-table-plugin-charts
• Owner: x-extends
• License: mit
• Created: 2019-08-27T13:06:34.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2025-03-12T08:44:30.000Z (3 months ago)
• Last Synced: 2025-03-30T07:02:25.172Z (2 months ago)
• Topics: vxe-table
• Language: TypeScript
• Homepage:
• Size: 206 KB
• Stars: 8
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vxe-table-plugin-charts

[![gitee star](https://gitee.com/x-extends/vxe-table-plugin-charts/badge/star.svg?theme=dark)](https://gitee.com/x-extends/vxe-table-plugin-charts/stargazers)

[![npm version](https://img.shields.io/npm/v/vxe-table-plugin-charts.svg?style=flat-square)](https://www.npmjs.com/package/vxe-table-plugin-charts)

[![npm downloads](https://img.shields.io/npm/dm/vxe-table-plugin-charts.svg?style=flat-square)](http://npm-stat.com/charts.html?package=vxe-table-plugin-charts)

[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)

基于 [vxe-table](https://www.npmjs.com/package/vxe-table) 的图表渲染插件（依赖区域选取功能），基于 [echarts](https://github.com/apache/incubator-echarts) 实现

## Compatibility

对应 vxe-table v4 版本  

## Installing

```shell

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

```

```javascript

// ...

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

```javascript

// ...

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

```html

  

  

  

  

  

```

```javascript

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

[MIT](LICENSE) © 2019-present, Xu Liangzhan