在Angular项目中导入并使用Echarts

首先在项目中安装Echarts

npm install echarts --save

创建一个测试页面test-page并设置好相应权限后，在html中放置一个div并设置好id为lineChart

此处需要设置图表div的长宽才会显示

<div id="lineChart" style="width: 30rem;height:20rem;"></div>

在TS文件中导入echarts

import * as echarts from 'echarts';

并声明一个函数，在函数中定义DOM并设置图表及其参数

ngOnInit(): void {
    this.initCharts();
  }
​
  ngAfterViewInit(): void {
​
  }
​
  initCharts(): void {
    // 获取DOM
    const lineChart = echarts.init(document.getElementById('lineChart'));
    // console.log(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);
  }

根据不同的图表在官网示例里均有模板，导入后修改相应的参数即可使用。