跳到主要内容

从0到1创建一个仪表盘

以下图仪表盘为例，为大家讲解一下，如何从0到1设计一个仪表盘；

2.1 新建仪表盘​

输入仪表盘名称，保存即可；也可点击模板案例，查看已有仪表盘模块并复用。

备注：

  • 新建或者复制模版新建仪表盘的时，可以设置保护码，避免别人修改，或者删除；

2.2 进入设计页面​

2.3 插入图表，安排好整体布局​

点击左侧的组件菜单，选择需求的图表，并通过拖拽布局

2.4 插入数据集​

为了使图表会实时数据变化，我们也可以各个图表添加动态数据集；点击右侧操作栏中的“数据”，修改数据源类型和数据集。点击“刷新数据”按钮即可；

2.5 修改图表样式​

要想图表好看，还需要对图表的样式做修改，点击右侧操作栏中的“配置”，可对图表的标题、数值、颜色、字体等样式做设置；

2.6 保存​

制作好图表后，一定记得点击“保存”按钮，这样数据才不会丢失；再点击“预览”按钮，可对图表进行预览；

2.7 预览​

2.8 配置到JEECG菜单​

Vue3菜单配置—将设计好的仪表盘配置到菜单

{{ window._CONFIG['domianURL'] }}/drag/view?pageId=983949241741901824&token=${token}
  • 983949241741901824换成自己的仪表盘ID
  • 注意访问路径和前端组件的写法
  • 访问路径 随便定义即可