Composição de componentes dos tutoriais da série de visualização de dados

FlyFish é uma plataforma de orquestração de visualização de dados de código aberto do Cloud Intelligence. Ao configurar o modelo de dados, ele fornece aos usuários centenas de componentes gráficos visuais e a codificação zero pode obter uma tela grande visual legal que atende às suas próprias necessidades de negócios. Deve-se notar que este tutorial é aplicável apenas ao FlyFish, uma plataforma de visualização de dados de código aberto para inteligência em nuvem. Se você gosta do nosso projeto, clique no endereço do repositório de código abaixo e clique em Estrela no repositório GitHub / Gitee .

Introdução do Fly Fish

FlyFish é uma plataforma de desenvolvimento de aplicativos de baixo limiar, altamente escalável e de código baixo, projetada e desenvolvida independentemente pela Cloud Wisdom, fornecendo uma solução eficiente e completa para cenários de desenvolvimento de visualização de dados. Feiyu fornece uma rica biblioteca de componentes e modelos de aplicativos, que podem completar o desenvolvimento de visualização de dados arrastando e soltando, e usuários com experiência zero de desenvolvimento também podem concluir o trabalho de desenvolvimento de visualização de dados. Ao mesmo tempo, a Feiyu também oferece recursos de expansão flexíveis, suporta configuração de desenvolvimento de componentes, funções personalizadas e eventos globais e garante desenvolvimento e entrega eficientes para cenários de demanda complexos.

FlyFish é recomendado

Método 1: experiência do ambiente de demonstração online

Método 3: baixar e implantar o Gitee localmente

Método 2: download e implantação do GitHub localmente

Componentes

Composição do diretório

A composição do diretório da plataforma de orquestração de visualização de dados de código aberto FlyFish é mostrada na figura a seguir:

resolução de diretório

build/webpack.config.dev.js

Análise: Este arquivo é usado principalmente para configuração do webpack na fase de desenvolvimento.

build/webpack.config.production.js

Parsing: Este arquivo é usado principalmente na fase de empacotamento (usado para personalizar o comportamento do pacote).

package.json

Resolução: Cada componente pode instalar suas próprias dependências para gerenciamento.

Nota: Se você usa desenvolvimento online, para evitar erros no empacotamento de serviço causados ​​por salvar o código posteriormente, se você usa dependências independentes, você precisa clicar nas dependências de instalação no canto superior direito para instalar as dependências no pré-ambiente.

assets

Análise: usado para armazenar vários recursos estáticos.

src/Component.js

Análise: código do componente.

src/index.less

Resolução: estilos de componentes.

Se a variável estática interna enableLoadCssFile do componente for false, ocorrerá o problema de perda de estilo. A solução é alternar para true ou alterar outros métodos de adição de estilo, como style-component ou jquery style head.

src/main.js(entry)

Resolução: arquivo de entrada do componente. O registro de componentes é realizado principalmente neste arquivo. O código central é o seguinte:

src/setting.js(entry)

Configuração de componentes, dados, entrada de registro de eventos. Nesse arquivo, a configuração, os eventos e os dados da pasta de configurações são registrados no componente de tela grande. O código principal é o seguinte:

src/settings/data.js

Análise: É usado para definir o painel de dados após a visualização em tela grande do componente ser clicada durante o processo de desenvolvimento. O código principal é o seguinte:

src/settings/options.js

Análise: É usado para definir o painel de atributos de estilo para a visualização em tela grande do componente durante o processo de desenvolvimento. O código principal é o seguinte:

src/settings/event.js 

Parsing: usado para definir eventos disponíveis para componentes, o código principal é o seguinte:

options.json

Parsing: alguns nomes de geometria e classe usados ​​para configurar o componente. A modalidade específica será exibida no painel de estilo e o código principal é o seguinte:

Perguntas frequentes

1. Os arquivos no diretório são todos necessários?

   Exceto assets , Component.js , src/settings.js são todos os arquivos necessários, especialmente src/main.js e src/setting.js são os principais arquivos de entrada que compilamos para componentes. É recomendado que você use uma estrutura de diretório padrão.

Benefícios de código aberto

Se você gosta do nosso projeto, por favor, não se esqueça de clicar no endereço do repositório de código abaixo e clicar em Estrela no repositório GitHub / Gitee , precisamos do seu incentivo e apoio. Além disso, participe imediatamente do projeto FlyFish para contribuir para se tornar um Colaborador FlyFish, e haverá 10.000 yuans em dinheiro esperando por você.

Endereço do GitHub: https://github.com/CloudWise-OpenSource/FlyFish

Endereço do Gitee: https://gitee.com/CloudWise/fly-fish

Diretrizes de contribuição do FlyFish: http://bbs.aiops.cloudwise.com/d/717-flyfish

Centro de modelos FlyFish: https://www.cloudwise.ai/flyFishComponents.html

Pesquise xiaoyuerwise no WeChat ou digitalize o código QR abaixo, anote [Flying Fish] para se juntar ao grupo de intercâmbio de desenvolvedores Flying Fish da comunidade AIOps e comunique-se cara a cara com o projeto FlyFish PMC.

{{o.name}}

{{m.name}}