Слияние кода завершено, страница обновится автоматически
На основе vxe-table реализован плагин для построения графиков (с функцией выбора области), основанный на echarts.
Соответствует версии v4 vxe-table.
npm install 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'
// ...
// Способ 1: NPM установка, внедрение объекта echarts
VXETable.use(VXETablePluginCharts, {
echarts
})
// Способ 2: CDN установка, достаточно убедиться в существовании window.echarts
// VXETable.use(VXETablePluginCharts)
// ...
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-codes/dist/style.css'
// ...
VXETable.use(VXETablePluginCharts, {
echarts
})
Код | Описание | Параметры |
---|---|---|
CHART_BAR_X_AXIS | Горизонтальная гистограмма (если установлена категория category, то series должен содержать как минимум одну колонку, иначе — две колонки) | {category?: field} |
CHART_BAR_Y_AXIS | Вертикальная гистограмма (если установлена категория category, то series должен содержать как минимум одну колонку, иначе — две колонки) | {category?: field} |
CHART_LINE | Линейный график (если установлена категория category, то series должен содержать как минимум одну колонку, иначе — две колонки) | {category?: field} |
CHART_PIE | Круговая диаграмма (если установлена категория category, то 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: 'Линейный график' }
]
}
}
}
}
}
MIT © 2019-present, Xu Liangzhan
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )