Using Echarts in Angular

Without further ado, let’s get started

1. Install echarts:npm install echarts --save
2. Introducing Echarts in components that need to use Echarts:import * as echarts from 'echarts';

3. Since you don’t use Angular directives in the DOM that show Echarts, you can use this.initCharts() directly in the lifecycle function ngOnInit;

   ngOnInit(): void {
     console.log('ngOnInit()');
     this.initCharts();
   }

   4. Define the dom

   <div class="lineChart"></div>

   5. Define initCharts() function

   initCharts(): void {
     const lineChart = echarts.init(document.querySelector('.lineChart'));
     const option = {
       xAxis: {
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       yAxis: {
         type: 'value'
    },
       series: [{
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: 'line'
    }]
     };
     lineChart.setOption(option);
   }

The results are: