ngx-echart
ngx-echarts is an Angular directive for ECharts
Install
npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D
Chart Module
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 { }
Echart Components
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 Markup
echart.component.html
would look like this
<div echarts [options]="line_bar_chart" class="echart-height"></div>
Referral Url
Type | URL |
---|---|
ngx-echart | https://github.com/xieziyu/ngx-echarts |