vxe-table-plugin-charts

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

Usage no npm install needed!

<script type="module">
  import vxeTablePluginCharts from 'https://cdn.skypack.dev/vxe-table-plugin-charts';
</script>

README

vxe-table-plugin-charts

gitee star npm version npm downloads npm license

基于 vxe-table PRO 的图表渲染插件,基于 echarts 实现

Installing

npm install xe-utils 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'
// ...

VXETable.use(VXETablePluginCharts)

Import on demand

// ...
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)

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
  resizable
  height="500"
  :data="tableData"
  :mouse-config="{ area: true }"
  :context-menu="{body: {options: bodyMenus}}"
  :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' }
      ],
      bodyMenus: [
        [
          { code: 'CHART_LINE', name: '折线图' }
        ]
      ]
    }
  }
}

License

MIT © 2019-present, Xu Liangzhan