ngx-echarts is an Angular directive for ECharts

Install

---

                         	
npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D
							
						

After Installing, include NgxEchartsModule in your ChartsModule class in chart.module.ts would look like this:

---

                                    
import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    ...,
    NgxEchartsModule
  ],
})
export class ChartsModule { }

							
						

EchartComponent class in echart.component.ts would look like this

---

                                    
import { Component, OnInit } from "@angular/core";
import { EChartOption } from "echarts";

@Component({
    selector: "app-echart",
    templateUrl: "./echart.component.html",
    styleUrls: ["./echart.component.scss"]
})
export class EchartComponent {                       
 bar_chart: EChartOption = {
        grid: {
            top: "6",
            right: "0",
            bottom: "17",
            left: "25"
        },
        xAxis: {
            data: ["2014", "2015", "2016", "2017", "2018"],

            axisLabel: {
                fontSize: 10,
                color: "#9aa0ac"
            }
        },
        tooltip: {
            show: true,
            showContent: true,
            alwaysShowContent: false,
            triggerOn: "mousemove",
            trigger: "axis"
        },
        yAxis: {
            axisLabel: {
                fontSize: 10,
                color: "#9aa0ac"
            }
        },
        series: [
            {
                name: "sales",
                type: "bar",
                data: [13, 14, 10, 16, 11, 13]
            },

            {
                name: "growth",
                type: "bar",
                data: [10, 14, 10, 15, 9, 25]
            }
        ],
        color: ["#9f78ff", "#32cafe"]
    };
    constructor() { }
    }
							
						

echart.component.html would look like this

---

                         	
<div echarts [options]="line_bar_chart" class="echart-height"></div>
							
						

Type	URL
ngx-echart	https://github.com/xieziyu/ngx-echarts