@vxe-ui/plugin-render-chart NPM

@vxe-ui/plugin-render-chart

Vxe UI plug-in, support for rendering simple charts.

Compatibility

It corresponds to vxe-table v4 or vxe-pc-ui v4

Installing

npm install @vxe-ui/plugin-render-chart

// ...
// Use vxe-pc-ui
import { VxeUI } from 'vxe-pc-ui'
// Use vxe-table
// import { VxeUI } from 'vxe-table'
import VxeUIPluginRenderChart from '@vxe-ui/plugin-render-chart'
import '@vxe-ui/plugin-render-chart/dist/style.css'
// ...

VxeUI.use(VxeUIPluginRenderChart)

API

bar 柱状图

bar Props

属性	描述	类型	可选值	默认值
bar.width	柱子宽度	number,string	—	—
bar.max	柱子最大值	number	—	—
colors	柱子颜色列表	string[]	—	—
tooltip.formatter	提示内容格式	string	—	—
label.color	显示值的颜色	string	—	—
label.formatter	显示值的格式（{row, value}）	string	—	—

pie 饼图

pie Props

属性	描述	类型	可选值	默认值
diameter	饼图直径	number,string	—	—
margin	饼图间距	number,string	—	1px
colors	扇区的颜色列表	string[]	—	—
tooltip.formatter	提示内容格式	string	—	—
ring.diameter	内圆直径	number,string	—	—
ring.color	内圆的颜色	string	—	—
label.color	显示值的颜色	string	—	—
label.formatter	显示值的格式（{row, value}）	string	—	—

Table Demo

<template>
  <vxe-table
    border
    show-overflow
    height="400"
    :data="tableData">
    <vxe-column type="checkbox" width="60"></vxe-column>
    <vxe-column field="name" width="200"></vxe-column>
    <vxe-column field="num1" title="Bar" :cell-render="{name: 'bar'}"></vxe-column>
    <vxe-column field="num2" title="Ring" :cell-render="{name: 'pie'}"></vxe-column>
    <vxe-column field="num3" title="Rate" :cell-render="{name: 'rate'}"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 100, name: 'test1', num1: [30, 47], num2: [60, 36, 36], num3: 3 },
        { id: 101, name: 'test2', num1: [15, 22], num2: [85, 22, 97], num3: 1 },
        { id: 102, name: 'test3', num1: [75, 36], num2: [45, 84, 66], num3: 5 }
      ]
    }
  }
}
</script>