# vxe-table-plugin-charts

**Repository Path**: x-extends/vxe-table-plugin-charts

## Basic Information

- **Project Name**: vxe-table-plugin-charts
- **Description**: 基于 vxe-table pro 的图表渲染插件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2019-08-27
- **Last Updated**: 2025-03-12

## Categories & Tags

**Categories**: webui

**Tags**: None

## 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
<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>
```

```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