Echarts

ECharts is a powerful, interactive charting and visualization library for web pages. This documentation will guide you through the steps to include and use ECharts in your Angular project.

Install from NPM

Install the ECharts library from the command prompt in the root directory of the project:

yarn add echarts --save
Include ECharts in HTML

You can include the ECharts script directly in your HTML file:

<script src="assets/libs/echarts/echarts.js"></script>
Creating the EChart Component

You will need a dedicated component for the EChart. Below is an example of how to set up the component and the corresponding TypeScript logic:

HTML Template
<app-domix-echart [chartData]="basicLineChartOptions"></app-domix-echart>
TypeScript Logic
// src/app/index.component.ts
import { Component } from '@angular/core';
import { LayoutSettingService } from './layout-setting.service'; // Import your settings service
import { DomixEchartComponent } from './domix-echart/domix-echart.component'; // Import your chart component
import { ColorService } from './color.service'; // Import your color service

@Component({
    selector: 'app-index',
    standalone: true,
    imports: [
       DomixEchartComponent,
    ],
    templateUrl: './index.component.html',
})
export class IndexComponent {
    basicLineChartOptions: any = {};

    constructor(private settingService: LayoutSettingService, public colorsService: ColorService) {
        this.settingService.settings$.subscribe(() => {
            this.renderChart();
        });
        this.renderChart(); // Initial chart rendering
    }

    renderChart(): void {
        this.basicLineChartOptions = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line',
                },
            ],
            color: this.colorsService.getColor(!this.settingService.isDark() ? ['bg-primary-500', 'bg-gray-200', 'bg-gray-800'] : ['bg-primary-500', 'bg-dark-800', 'bg-dark-100']),
            grid: {
                top: '5%',
                left: '6%',
                right: '0%',
                bottom: '8%',
            },
        };
    }
}
Styling the Chart

You can customize the appearance of the chart using CSS and the color settings you provide. Ensure that your color service returns the appropriate colors based on your application’s theme.

This setup demonstrates how to integrate ECharts into an Angular application and render a line chart. You can customize the chart further based on your application needs.

Receive the latest updates directly in your inbox!

Be the first to know about new updates and exclusive discounts. No spam, just great offers!

How about

A Custom Project?

With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.

Hire Us
Domiex Admin & Dashboards
230+

Total Pages

5+

Layouts

11+

Application

We provide quick support withing one business day to all of our customers.

© Domiex Created & Crafted by SRBThemes.