Angular6+引入 Echarts4+ 并使用

1、安装 echarts (默认最新)

    npm install --save-dev echarts

2、安装ngx-echarts(默认最新)

    npm install ngx-echarts --save

3、Angular项目中引入 echarts

   在 angular.json中（具体文件路径根据node_modules引入的版本路径）

"projects": {
    "architect": {
        "build": {
            "options": {
                "scripts": [
                      "./node_modules/echarts/dist/echarts.min.js",
                      "./node_modules/echarts/map/js/china.js",
                      "./node_modules/echarts/dist/extension/bmap.js"
                 ],
             }
        }
    }

}

4、使用echarts

4.1  app.component.html

最新版API文档

输入	类型	默认值	注释
[options]	object	null	它与官方演示站点中的选项相同。
[merge]	object	null	您可以使用它来更新部分内容options，尤其是在需要更新图表数据时。事实上，价值merge将用于echartsInstance.setOption()与notMerge = false。
[loading]	boolean	false	当数据未准备好时，使用它来切换echarts加载动画。
[autoResize]	boolean	true	当容器的宽度发生变化时，图表将自动调整大小。
[initOpts]	object	null	[initOpts]将使用的值echarts.init()。它可能包含devicePixelRatio，renderer，width或height性质
[theme]	string	null	使用它来初始化主题echarts。您需要将主题文件包含在angular-cli.json其他模块解析器中。
[loadingOpts]	object	null	输入对象以自定义加载样式。

4.2 app.component.ts

// 延迟加载图表
  showloading:boolean = true;

  chartOption = {
    title: {
      text: '堆叠区域图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '联盟广告',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '视频广告',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '直接访问',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '搜索引擎',
        type: 'line',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        areaStyle: { normal: {} },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  }
  
  constructor(private tableService:TableServiceService,
    private cdf:ChangeDetectorRef,
    private ngZone:NgZone) { }
  
  ngOnInit() {
    
    setTimeout(()=> {
      this.showloading = false;
    }, 3000);
    
    
  }

4.3、app.component.scss

.demo-chart{
    position: relative;
    width: 400px;
    height: 400px;
}