在angular中使用echarts

废话不多说，直接开始

1. 安装echarts：npm install echarts --save
2. 在需要使用echarts的component中引入echarts:import * as echarts from 'echarts';

3. 由于没有在展示echarts的dom中使用angular指令可以直接在生命周期函数ngOnInit中使用this.initCharts();

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

   4.定义dom

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

   5.定义initCharts()函数

   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);
   }

其结果为：