Vxe UI plug-in for compatibility with the echarts.
It corresponds to vxe-table v4 or vxe-pc-ui v4
npm install @vxe-ui/plugin-render-echarts echarts
// ...
import VXETable from 'vxe-table'
import echarts from 'echarts'
import VxeUIPluginRenderEcharts from '@vxe-ui/plugin-render-echarts'
import '@vxe-ui/plugin-render-echarts/dist/style.css'
// ...
// 方式1:NPM 安装,注入 echarts 对象
VXETable.use(VxeUIPluginRenderEcharts, {
echarts
})
// 方式2:CDN 安装,只要确保 window.echarts 存在即可
// VXETable.use(VxeUIPluginRenderEcharts)
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} |
<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: '折线图' }
]
}
}
}
}
}
Thank you to everyone who contributed to this project.
MIT © 2019-present, Xu Liangzhan