Este artigo é um artigo espelhado de tradução automática, por favor clique aqui para ir para o artigo original.

Vista: 14060|Resposta: 2

[Angular] 【Practice】Angular6.x apresenta o tutorial do gráfico de echarts

[Copiar link]
Publicado em 24/04/2019 15:27:55 | | | |
prefácio

Como o Angular2+ é desenvolvido usando TypeScript, se você quiser usar echarts, deve instalar o plugin Angular NGX-echarts. As renderizações são as seguintes:



Endereço do GitHub:O login do hiperlink está visível.
Conhecimento e API relacionados ao echarts:O login do hiperlink está visível.

Instalação

Comando de Instalação do NPM:

npm install module_name -S, ou seja, npm install module_name --save write-dependenciesnpm install module_name-D --d, ou seja, npm install module_name --save-dev escreve devDependencies


Introduziu o módulo ngx-echarts

Introduza o módulo NgxEchartsNa app.modules.ts módulo raiz

Como minha página é um subcomponente, preciso importá-la em um submóduloNão precisa ser importado no módulo pai app.modules.ts, o código é o seguinte:

Submódulos não podem importar componentes do módulo pai, se você quiser compartilhar o componente do cabeçalho, importe o componente do cabeçalho para cada módulo que deseja usar.
Módulos compartilhados também são módulos pais que podem exportar coisas de módulos filhos, você adiciona o que precisa ser compartilhado em um módulo e depois importa em outros módulos

Links de referência:O login do hiperlink está visível.


Página HTML componente itsvse.component.html introduzida:

Altura do Conjunto da Folha de Estilo CSS:

itsvse.component.ts código (ambos os códigos TS abaixo são aceitáveis)

Método 1:

Método 2:

Por fim, execute o projeto e você pode ver o efeito do gráfico echarts.






Anterior:Angular6 apresenta o tutorial do mapa Baidu
Próximo:Docker na Prática
 Senhorio| Publicado em 10/05/2019 10:48:10 |
 Senhorio| Publicado em 10/05/2019 16:25:17 |
Disclaimer:
Todo software, material de programação ou artigos publicados pela Code Farmer Network são apenas para fins de aprendizado e pesquisa; O conteúdo acima não deve ser usado para fins comerciais ou ilegais, caso contrário, os usuários terão todas as consequências. As informações deste site vêm da Internet, e disputas de direitos autorais não têm nada a ver com este site. Você deve deletar completamente o conteúdo acima do seu computador em até 24 horas após o download. Se você gosta do programa, por favor, apoie um software genuíno, compre o registro e obtenha serviços genuínos melhores. Se houver qualquer infração, por favor, entre em contato conosco por e-mail.

Mail To:help@itsvse.com