1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/x-extends-vxe-table-plugin-charts

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

На основе 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
})

API

Коды контекстного меню

Код Описание Параметры
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 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/x-extends-vxe-table-plugin-charts.git
git@api.gitlife.ru:oschina-mirror/x-extends-vxe-table-plugin-charts.git
oschina-mirror
x-extends-vxe-table-plugin-charts
x-extends-vxe-table-plugin-charts
master