在angular项目中使用echarts图表，以及动态更新echart数据

在angular中使用echart，必须安装echart依赖和ngx-echart依赖
在app.module.ts中导入ngx-echarts依赖之后，在@NgModule中导入 echart依赖
安装步骤
npm install echarts -S
npm install ngx-echarts -S

app.module.ts 代码如下：

import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
 imports: [
   NgxEchartsModule.forRoot({
     /**
      * This will import all modules from echarts.
      * If you only need custom modules,
      * please refer to [Custom Build] section.
      */
     echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
   }),
 ],
})

在component中使用echarts，代码：

<div echarts   [options]="options" class="demo-chart"  (chartInit)="onChartInit($event)"></div>

component.ts:

import { EChartOption } from 'echarts';
export class TeachnumberComponent implements OnInit {
  onChartInit(ec) {
    this.echartsIntance = ec;
    //获取到echart对象
    
  },
  methods(data1) {
  //数据切换之后调用此函数来渲染echart
    this.options = {
      backgroundColor: '#31313D',
    
      title: {
        show: false
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        show: false
      },
      grid: {
        containLabel: true,
        show: false
      },
      xAxis: {
        type: 'category',
        boundaryGap: [0, 0.01],
        show: true,
        data: data1.yAxisData,
      },
      yAxis: {

        type: 'value',

        axisLine: {
          show: false 
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
        }
      },
      textStyle: {
        fontSize: 18,
        color: '#fff'
      },
      series: [
        {
          type: 'bar',
          
          data: data1.seriesData,
          itemStyle: {
            normal: {
              label: {
                formatter: function (c) {
                  return (c.data).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                },
                show: true,
                position: "top",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: "12",
                  color: "#fff"
                }
              },
              color: function (params) {                          
                var colorList = ['#FADD6F', '#8F6CD0', '#FE914C', '#F899C5', '#3CC8A1', '#44B9FF'].reverse()
                return colorList[params.dataIndex]
              }
            },

          },
        },
      ]
    };

    this.echartsIntance.setOption(this.options); //手动重新渲染echart
  }
}

动态更新数据核心内容：通过onChartInit()函数，在初始化时获取到echart对象，然后使用echartsIntance.setOption()方法重新渲染echart。