fundo
No trabalho diário, às vezes os líderes estão interessados em determinadas estatísticas de dados e exigem que os analistas peguem dados e os enviem regularmente. Diante desse requisito, podemos projetar uma tela grande para exibir os dados com os quais os líderes se preocupam de maneira visual; agora, com a ajuda do componente "Gerar Echarts Chart H5 Page", podemos realizar uma estatística sobre os dados na tabela do banco de dados e, em seguida, exibir os dados como um gráfico visual e enviá-lo diretamente aos usuários de negócios por e-mail, WeChat, DingTalk, etc., realizando estatísticas e envio de relatórios totalmente ETLCloudautomatizados SQL.
Seleção de ferramentas
- banco de dados ClickHouse
- Implantação do Docker ETLCloudV2.2
- Componente de entrada da tabela da biblioteca ETLCloud, componente de página H5 do gráfico Echarts, componente de mensagem DingTalk
Observação: a versão da comunidade é selecionada aqui e Dockero método de implantação é leve e rápido de iniciar: docker pull ccr.ccs.tencentyun.com/restcloud/restcloud-etl:V2.2.
comprar componentes
Como o componente "Gerar página H5 do gráfico Echarts" não está incluído na ETLCloudversão da comunidade, vá primeiro à biblioteca de componentes oficial para escolher comprar (o componente que gera Echartsa página do gráfico H5é gratuito). Selecione Chart Statistical Analysis na biblioteca oficial de componentes - gere gráfico Echarts página H5 - clique em comprar e, em seguida, você pode visualizá-lo na página do componente que comprei (faça o login primeiro).
Instalar componentes
Depois que o componente "Generate Echarts Chart H5 Page" for adquirido com sucesso, ele poderá ETLCloudser instalado na página "Data Processing Components" do plano de fundo de gerenciamento. Selecione a instalação remota e uma lista de componentes adquiridos aparecerá; aqui, escolha instalar na categoria de componentes gerais e atualize a página após a conclusão da instalação.
Prática: Estatísticas de Dados - Visualização - Envio DingTalk
Em seguida, entre em nossa prática de migração: todo o processo de código zero, visualização, arrastar e soltar e todo o processo de estatísticas de dados, visualização de gráficos e push podem ser concluídos com um clique do mouse.
fonte de dados
A fonte de dados seleciona o banco de dados de poesia da migração do artigo anterior ClickHouse.
-- 柱状图-查询唐诗宋词所有作者的作品数量并排序（仅列出作品数量超过1000的作者）
SELECT author, count(*) AS count FROM poetry.poetry GROUP BY author HAVING count >=1000 ORDER BY count DESC;
Crie aplicativos e processos
Crie um aplicativo e preencha as informações básicas de configuração do aplicativo. Em seguida, crie um fluxo de dados e preencha as informações.
Depois de criar o processo, você pode clicar no botão "Process Design" para entrar na página de configuração de visualização do processo.
Processo de configuração visual
Antes de configurar o processo, apresente brevemente as várias áreas desta página de configuração: o lado esquerdo é a área do componente, o topo do meio é a área funcional e a maior parte do meio é a área de desenho do processo. Clique duas vezes no componente na área de desenho e você pode ver a área de item de configuração detalhada do componente que aparece em um estilo de gaveta.
- Entrada em lote da tabela do banco de dados: ClickHouse
No componente de entrada à esquerda, selecione "Library Table Input", arraste-o para a área central de desenho do processo e clique duas vezes para entrar no estágio de configuração.
Passo 1: Selecione a fonte de dados que configuramos ClickHousee selecione poetryo banco de dados.
Etapa 2: Configure a instrução SQL para dados estatísticos.
Passo 3: Selecione o campo de saída final.
Etapa 4: visualização dos dados, confirme SQLse as informações do resultado da declaração e da consulta atendem às expectativas.
- Gerar gráfico Echarts página H5
Nos componentes gerais à esquerda, selecione "Generate Echarts Chart H5 Page", arraste-o para a área central de desenho do processo e clique duas vezes para entrar no estágio de configuração.
Preencha o código para gerar o gráfico Echarts no código da página H5. Você pode consultar Echartso exemplo oficial para completar a exibição do gráfico; além disso, preste atenção aos campos nos resultados estatísticos da etapa anterior, aqui estão authore , e obtenha o valor da variável countno código .${}
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<title>柱状图</title>
<meta charset="utf-8">
</head>
<body>
<center>需要修改item.age和item.total为api返回rows行中的字段id
<div id="container" style="height: 500px;width:100%;"></div>
</center>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">
</script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {
};
var option;
option = {
xAxis: {
type: 'category',
data: [#foreach($item in $data)
'$!{item.author}', #end
]
},
yAxis: {
type: 'value'
},
series: [{
data: [#foreach($item in $data)
'$!{item.count}', #end
],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
- notícias Dingding
Nos componentes gerais à esquerda, selecione "Mensagem DingTalk", arraste-o para a área central de desenho do processo e clique duas vezes para entrar no estágio de configuração. Como abrir e configurar o robô DingTalk não é apresentado aqui. Selecione Texto tipo de mensagem e insira o conteúdo da mensagem, aqui, ${pageurl}obtenha o valor da variável de endereço da página do gráfico gerado na etapa anterior através de .
Nota: Ao configurar os robôs no grupo DingTalk, preste atenção à correspondência de palavras-chave e conteúdo da mensagem.As palavras-chave que configuro aqui são: Tang Poetry e Song Ci.
- Melhore o processo
Por fim, 流程线conectando o início , a entrada da tabela da biblioteca , a geração da página H5 do gráfico Echarts , a mensagem DingTalk e os componentes finais , a configuração do processo de estatísticas de dados, visualização do gráfico e envio é concluída. Concluído~
executar processo
Salve o processo e execute-o; então você pode visualizar o log do processo correspondente e monitorar visualmente o progresso da migração.
Nota: Após ser enviado para o grupo DingTalk pelo robô, o IPendereço do link é Dockero endereço do container, que não pode ser acessado diretamente.Aqui, após IPsubstituir pelo Dockerdo host IP, você pode abrir o display diretamente no navegador.
Para confirmar se nosso gráfico está correto, consulte ClickHousenovamente .
registro de problema
Ao executar o processo, há um problema de erro com os componentes instalados: ou seja, os componentes que nós mesmos instalamos não foram encontrados. Depois, entrei em contato com a equipe técnica oficial, enviei um ETLGenerateHtmlPage.classarquivo, coloquei no diretório especificado e cn.restcloud.etl.module.plugin.reportexecutei com sucesso.
- Mensagem de erro:
java.lang.Class-java.lang.Exception: nó:GenerateHtmlPagenão existe, faça o download no mercado de componentes ou defina você mesmo! - Solução: Copie o componente para o diretório especificado do container:
/usr/tomcat/webapps/ROOT/WEB-INF/classes/cn/restcloud/etl/module/plugin/report.
# 进入容器
[root@etl ~]# docker exec -it de63b29c71d0 /bin/bash
root@de63b29c71d0:/usr# cd /usr/tomcat/webapps/ROOT/WEB-INF/classes/cn/restcloud/
# 这个目录一开始不存在，先在容器中创建目录
root@de63b29c71d0:/usr/tomcat/webapps/ROOT/WEB-INF/classes/cn/restcloud# mkdir -p etl/module/plugin/report
# 从宿主机复制文件到容器的指定目录
[root@etl ~]# docker cp /opt/ETLGenerateHtmlPage.class de63b29c71d0:/usr/tomcat/webapps/ROOT/WEB-INF/classes/cn/restcloud/etl/module/plugin/report
Successfully copied 6.14kB to de63b29c71d0:/usr/tomcat/webapps/ROOT/WEB-INF/classes/cn/restcloud/etl/module/plugin/report
# 重启ETLCloud服务
[root@etl ~]# docker restart de63b29c71d0
de63b29c71d0
Resumir
O descrito acima é todo o processo de converter os dados estatísticos em ETLCloudgráficos e enviá-los para o DingTalk, realizando a automação total das estatísticas e envio de relatórios; ao mesmo tempo, também experimentei como instalar e usar novos componentes do mercado oficial de componentes.ClickHouseEcharts
Referência
Se você tiver alguma dúvida ou encontrar algum bug, sinta-se à vontade para entrar em contato comigo.
Seus comentários e sugestões são bem vindos!