Vue 的可拖动图表网格库 – Vuetiful-Board

Vue 的可拖动图表网格库 – Vuetiful-Board
插件名称 vuetiful-board
发布时间 2021年9月11日
插件作者 medistream-team

Vuetiful-Board 是一个用于创建可拖动图表和网格的 JavaScript 库。

特征:

  • 4个内置主题
  • 暗光模式。
  • 可编辑的布局

安装和下载:

# NPM
$ npm i vuetiful-board --save

如何使用它:

1. 导入 Vuetiful-Board 库。

import VuetifulBoard from 'vuetiful-board'
Vue.use(VuetifulBoard)

2. 绘制一个基本的图表网格。

<vuetiful-board
  :theme="classic"
  :dark-mode="true"
  :col-num="12"
  :row-height="30"
  :layout-editable="true"
  :datasets="[
    {
        chartInfo: {
          series: [200, 12, 40, 25, 34, 6, 23],
          options: {
            chart: {
              type: 'pie',
            },
            title: {
              text: 'The recent inflow route',
              align: 'center',
              style: {
                fontSize: '18px',
                fontWeight: 'bold',
              },
            },
            labels: [
              'SNS',
              'Recommend',
              'Homepage',
              'Blog',
              'Kakaotalk Channel',
              'Rumor',
              'ETC',
            ],
            fill: {
              opacity: 1,
            },
            legend: {
              position: 'bottom',
            }
          }
        },
        gridInfo: {
          x: 6, y: 0, w: 6, h: 12, i: '1', static: false
        },
      },
  ]"
/>

3.可能的道具。

<vuetiful-board
  :theme="classic"
  :dark-mode="true"
  :col-num="12"
  :row-height="30"
  :layout-editable="true"
  :datasets="[
    {
        chartInfo: {
          series: [200, 12, 40, 25, 34, 6, 23],
          options: {
            chart: {
              type: 'pie',
            },
            title: {
              text: 'The recent inflow route',
              align: 'center',
              style: {
                fontSize: '18px',
                fontWeight: 'bold',
              },
            },
            labels: [
              'SNS',
              'Recommend',
              'Homepage',
              'Blog',
              'Kakaotalk Channel',
              'Rumor',
              'ETC',
            ],
            fill: {
              opacity: 1,
            },
            legend: {
              position: 'bottom',
            }
          }
        },
        gridInfo: {
          x: 6, y: 0, w: 6, h: 12, i: '1', static: false
        },
      },
  ]"
/>