# Como incorporar gráficos interativos do ECharts no NoteRich Os dados são tão valiosos quanto a sua capacidade de entendê-los. No campo da Gestão do Conhecimento Pessoal (PKM), transformar números brutos e dados estruturados em insights visuais é crucial. O **NoteRich** preenche a lacuna entre texto e dados, suportando nativamente o **Apache ECharts**, permitindo que você incorpore gráficos interativos e prontos para publicação diretamente em suas notas. Diferente de ferramentas baseadas em nuvem que enviam seus dados para servidores externos para renderização, o NoteRich processa e renderiza os gráficos do ECharts inteiramente em seu dispositivo local. Isso garante que seus dados confidenciais permaneçam 100% privados, oferecendo uma experiência de visualização interativa e sem problemas. --- ## Por que o ECharts no NoteRich? O Apache ECharts é uma biblioteca de visualização de código aberto conhecida por sua fluidez, profundidade e compatibilidade entre plataformas. Ao integrar o ECharts de forma nativa, o NoteRich oferece várias vantagens distintas: - **Renderização sem código**: Escreva a configuração JSON padrão em um bloco de código Markdown, e o NoteRich renderiza instantaneamente em um gráfico interativo. - **100% local e privado**: O mecanismo de renderização é executado localmente no seu navegador. Seus dados nunca saem de seu dispositivo. - **Interatividade avançada**: Desfrute de zoom, rotação, dicas de ferramentas e alternância de legendas sem precisar escrever uma linha de JavaScript. - **Geração automática por AI**: Permita que a AI local do NoteRich analise suas tabelas ou prompts de linguagem natural para gerar automaticamente o JSON do ECharts. --- ## Os fundamentos: incorporando seu primeiro gráfico Incorporar um gráfico no NoteRich é tão simples quanto escrever um bloco de código Markdown. Você só precisa especificar `echarts` como o identificador de idioma e fornecer um objeto JSON `option` válido do ECharts. ```echarts { "title": { "text": "Crescimento Local-First", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "data": [120, 200, 150, 80, 70, 110], "type": "bar", "itemStyle": { "color": "#000", "borderRadius": [4, 4, 0, 0] } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` Quando você entra no modo de visualização ou lê a nota, o mecanismo de renderização do NoteRich intercepta o bloco `echarts`, inicializa a instância do ECharts e a vincula ao DOM com capacidade de redimensionamento automática. --- ## Profundidade: Configurações avançadas de gráficos Uma vez que você domina os fundamentos, pode aproveitar todo o poder do ECharts para criar visualizações complexas e multidimensionales. ### 1. Múltiplas séries e gráficos mistos Você pode facilmente combinar diferentes tipos de gráficos, como sobrepor um gráfico de linha com um gráfico de barra, definindo vários objetos na array `series` e utilizando duas eixos Y. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Notas Criadas", "Total Acumulado"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Diário", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Total", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Notas Criadas", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Total Acumulado", "type": "line", "yAxisIndex": 1, "smooth": true, "data": [120, 138, 147, 169, 184, 214, 239], "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` ### 2. Gráficos de pizza e donut para composição Visualizar proporções é fácil com a série `pie` do ECharts. Você pode personalizar o raio para criar gráficos de donut impressionantes que combinem com a estética minimalista do NoteRich. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Uso de Armazenamento", "type": "pie", "radius": ["40%", "70%"], "avoidLabelOverlap": false, "itemStyle": { "borderRadius": 10, "borderColor": "#fff", "borderWidth": 2 }, "label": { "show": false, "position": "center" }, "emphasis": { "label": { "show": true, "fontSize": 20, "fontWeight": "bold", "color": "#000" } }, "data": [ { "value": 1048, "name": "Notas de Texto", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Anexos", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Bases de Dados", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Visualização powered by AI: de texto para gráfico Escrever JSON manualmente é poderoso, mas o NoteRich leva isso um passo adiante com seu **Motor de Visualização de AI Local**. Você nem sempre precisa escrever a configuração manualmente. ### Linguagem Natural para Gráficos Você pode simplesmente descrever o gráfico que deseja em inglês, e a IA local do NoteRich gerará o JSON do ECharts para você. *Exemplo de prompt: "Crie um gráfico de radar comparando as características do NoteRich, Notion e Obsidian em termos de privacidade, velocidade, suporte offline e extensibilidade."* ### Detecção automática de tabelas Se você tiver uma tabela em Markdown em sua nota, a IA do NoteRich pode analisar os dados estruturados e sugerir ou gerar automaticamente a configuração correspondente do ECharts. Essa transição suave de dados brutos para insights visuais acontece inteiramente em seu dispositivo, garantindo que seus dados analíticos permaneçam estritamente privados. --- ## Desempenho e carregamento lento Uma preocupação comum ao incorporar vários gráficos interativos em um único documento é o desempenho. O NoteRich resolve isso com uma arquitetura de carregamento lento altamente otimizada. 1. **Observador de Interseção**: Os gráficos não são renderizados até que passem pelo viewport. Isso reduz drasticamente o tempo de carregamento inicial de documentos longos. 2. **Estruturas de Tela Esqueletadas**: Enquanto um gráfico está sendo carregado ou inicializando, uma interface de usuário leve é exibida, evitando mudanças de layout (CLS) e mantendo uma experiência de leitura suave. 3. **Redimensionamento Responsivo**: O NoteRich atribui automaticamente um `ResizeObserver` a cada instância do ECharts, garantindo que os gráficos se adaptem perfeitamente à redimensionagem da janela ou à alternância de painéis sem intervenção manual. --- ## Práticas recomendadas para ECharts no NoteRich Para aproveitar ao máximo o ECharts no NoteRich, lembre-se dessas dicas: - **Garanta que o JSON seja válido**: Assegure-se de que sua configuração seja um JSON válido. O NoteRich exibirá uma mensagem de erro no editor se a sintaxe estiver incorreta, evitando falhas no aplicativo. - **Corresponda ao tema**: A interface do NoteRich é minimalista e monocromática. Use cores como `#000` (principal), `#666` (texto secundário) e `#eaeaea` (bordas/backgrounds) em suas configurações de gráficos para manter harmonia visual. - **Use `grid` para alinhamento**: Defina sempre a propriedade `grid` para garantir que seus eixos e rótulos tenham espaço suficiente e não sejam cortados pelos bordes do container. - **Aproveite a IA Local**: Para gráficos complexos, deixe a IA fazer o trabalho pesado. Você sempre pode ajustar o JSON gerado manualmente para aperfeiçoar o resultado. --- ## Conclusão A integração de visualização de dados interativa diretamente no fluxo de trabalho de anotações elimina a necessidade de alternar entre ferramentas externas como Excel ou Tableau. Com suporte nativo ao **ECharts**, o **NoteRich** permite que você transforme sua base de conhecimento local em um painel visual dinâmico e profundamente perspicaz — tudo mantendo a privacidade e a filosofia de prioridade local que você espera. Comece a incorporar seus dados hoje e veja suas notas ganhar vida. --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">ECharts</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Visualização de Dados</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Prioridade Local</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Power by AI</span> </div>