Interop Between Code and No-Code: Using 3D Echart to Visualize Data in Your Project

Introduction

Most of no-code platforms will provide you with atomic-level components, like buttons, lists, and tables. These elements are fantastic for crafting functional web applications, but what if you yearn for something more? Imagine adding dynamic features like embedded iframes, stunning 3D charts, or intuitive voice input and output. Here's where the interop between code and no-code transforms your project. In Momen, custom code can help you achieve sophisticated functionality, giving you full developer power.

In this article, we'll showcase how to add a 3D Echarts in Momen via code component. The 3D Echart is a powerful visualization tool for displaying data in three-dimensional space, ideal for scenarios that involve trends across cities and years.

Preview

Using 3D Echart in Momen

1. Create Data Model and Import Data

   1.   Create Data Models:

   • Start by creating a data model in your database that includes fields like city name, year, and relevant data values (e.g., population, sales).

   

   2.   Import Data:

   • Import your data file into the database, utilizing Excel or other sources.

2. Publish and Import Code Component Repos

   1.   Steps:

   • Follow our official doc to create the code component repo.

   2.   Import into Project:

   • Once published, import the repo into your project.

3. Add Components to the Page

   1.   Components Needed:

   • Add the following components for the 3D Echart setup:

     • Bar3DEchart: The core component for data visualization.

     • Data Selector - City: For selecting specific cities.

     • Data Selector - Year: For selecting specific years.

   2.   Configuration:

   • City Selector: Configure to ensure it displays data based on user selections.

   

   • Year Selector: Configure similarly for year selection.

     

   • Bar3DEchart: Integrate this component to respond dynamically to the selectors’ values.

   

3. Publish the Page

   • After configuration, click the “Publish” button to make the page live, enabling real-time user interaction with the data.

Customizing Your Configuration

Change Data Source

Follow these steps to switch the data source for the 3D Echart. This requires some TypeScript (TS) knowledge and familiarity with GraphQL (GQL).

Steps:

1. Fetch Database Data:

   1. Navigate to src->components->Bar3DEchart-db.ts, find the getData function, and adjust the GraphQL query to match your database structure.

2. Adjust Data Processing:

   1. Go to src->components->Bar3DEchart->processData.ts and update data type definitions and extraction logic to align with the new database fields.

3. Update Data Display Logic:

   1. Modify the fetchAndProcessData() function in src->components->Bar3DEchart->option.ts to ensure data is accurately reflected in the chart.

4. Test Locally:

   1. Run npm run dev in your terminal to start the local environment and verify configurations.

5. Publish Changes:

   1. Once confirmed, publish your changes with momen publish.

Changing Echart Chart Types

The 3D Echart utilizes the Apache ECharts library. To change the chart type or style, refer to the ECharts documentation and modify the option.ts configuration. Steps:

1. Open option.ts:

   1. Access it via src->components->Bar3DEchart->option.ts.

2. Consult Documentation:

   1. Use the ECharts documentation to make necessary adjustments to the chart configuration, including type, axis display, colors, and more.