Echarts is a pure Javascript graphics library that runs smoothly on PC and mobile devices. It is compatible with most browsers (IE8/9/10/11),Chrome,Firefox,Safari, etc.

2. Method 1 (NgX-ECharts instruction mode)

1, download

npm install echarts --save
npm install ngx-echarts --save
Copy the code

2. Configure the echarts path in anuglar.json3. Reference this module in app.module.4. Use in component pages

<div
  echarts
  class="columnar-chart"
  [options]="chartOptions"
  (chartInit)="onChartInit($event, key)"
></div>
Copy the code

5. In the component controller

ChartOptions: EChartOption = {title: {text: 'ECharts sample '}, Tooltip: {}, Legend: {data:[' sales ']}, xAxis: {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"]}, yAxis: {}, series: [{name: 'sales' type:' bar 'data: [5, 20, 36, 10, 10, 20]}]}.Copy the code

6. If the development environment chart is displayed normally and an error is reported after packaging, please check the ECharts NGX-Echarts version.

1. Configure the path in angular.jsonDeclare the echarts variable in the typings.d.ts file. If you don’t have this file, create one under the SRC root.

declare var echarts: any;
Copy the code

3. Use in components

<div id="echarts"></div>
Copy the code

4. Controller

ChartOptions = {title: {text: 'ECharts starter '}, Tooltip: {}, Legend: {data:[' sales ']}, xAxis: {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"]}, yAxis: {}, series: [{name: 'sales' type:' bar 'data: [5, 20, 36, 10, 10, 20]}}; ngOnInit() { const myEcharts = echarts.init(document.getElementById("echarts")); myEcharts.setOption(this.chartOptions); }Copy the code

5. Run.