Davinci-二次开发：新增辅助图形-边框

最新推荐文章于 2024-04-29 04:19:57 发布

swzj

最新推荐文章于 2024-04-29 04:19:57 发布

阅读量2.5k

点赞数 3

分类专栏： Davinci

本文链接：https://blog.youkuaiyun.com/qq_43651437/article/details/106060485

版权

本文介绍了如何在Davinci BI平台上进行二次开发，新增辅助图形——边框。通过添加图形ID、创建组件、引入组件到index.ts、在LayerCore.tsx中添加组件以及设置图标等步骤，详细阐述了实现过程。Davinci是一个DVaaS平台，提供数据可视化解决方案，支持自定义辅助图形以增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Davinci 介绍

Davinci 是宜信出品的DVaaS（数据可视化及服务）的一款BI产品
Davinci 是一个 DVaaS（Data Visualization as a Service）平台解决方案，面向业务人员/数据工程师/数据分析师/数据科学家，致力于提供一站式数据可视化解决方案。既可作为公有云/私有云独立部署使用，也可作为可视化插件集成到三方系统。用户只需在可视化 UI 上简单配置即可服务多种数据可视化应用，并支持高级交互/行业分析/模式探索/社交智能等可视化功能。

概述：

Davinci 的 display功能目前只提供了四种辅助图形，矩形、标签、视频、时间器，边框和标签可以自己上传背景图片。对于没有设计帮助的我，嘿嘿嘿，下面我来说具体思路，本次新增的图形组件均来自dataV:http://datav-react.jiaminghi.com/
安装命令npm install @jiaminghi/data-view-react或cnpm install @jiaminghi/data-view-react或yarn add @jiaminghi/data-view-react 根据自己本身环境选择命令

注意

大部分和上一篇文章 Davinci-二次开发：新增辅助图形-装饰图形一样，就复制粘贴了。

效果:

效果图

前端目录结构

└── webapp
  └── app
    └── assets (资源文件)
      └──  json（存放了配置项）
       ├──  slideSettings（辅助图形配置项）
    └── containers
      └── Display
         ├── components
               ├──Layer
               | ├── LayerCore.tsx  辅助图形
                   ├── Conetent
                   | ├── SecondaryGraph  //单个辅助图形组件

      └── Widget                  //widget功能所在文件夹
        ├── component                 //组件
        | ├── Chart（图表驱动）
        | ├── Config
        | ├── Pivot（透视驱动）
        | ├── Widget
        | └── Workbench                   //工作台显示区（图表、数据、样式、配置）
        | | ├── ConfigSections                //各个图表样式（图例、颜色、标签、xy轴等）配置
        | | | ├── SpecSection
        | | | └── TableSection
        | | └── Dropbox
        ├── config                    //初始化配置信息（数据、样式、配置）
        | ├── chart（图表驱动）
        | └── pivot（透视驱动）
        ├── render                    //根据信息最后处理（拼装echarts需要的配置）
        | ├── chart（图表驱动）
        | └── pivot（透视驱动）
        ...

辅助图形的配置项存放在/app/assets/json/slideSettings 下

辅助图形扩展步骤

1.添加辅助图形id

在webapp\app\containers\Display\components\Setting\Form
目录下的constants.ts 添加相关配置
constants.ts 的 SecondaryGraphTypes 添加图形id slideSettings 将图形id和json文件对应

import slide from 'assets/json/slideSettings/slide.json'
import chart from 'assets/json/slideSettings/chart.json'
import rectangle from 'assets/json/slideSettings/rectangle.json'
import label from 'assets/json/slideSettings/label.json'
import video from 'assets/json/slideSettings/video.json'
import timer from 'assets/json/slideSettings/timer.json'
import decoration3 from 'assets/json/slideSettings