关于做angular引入echarts

1.安装ngx-echarts

npm install echarts --save

npm install ngx-echarts --save

2.在项目中引入echarts

在项目包配置文件中引入js脚本

//angular-cli.json文件

{
    "apps": [{
        "scripts":[
            "../node_modules/echarts/dist/echarts.min.js",
            "../node_modules/echarts/map/js/china.js",
            "../node_modules/echarts/dist/extension/bmap.js"
        ]
    }]
}

3.使用

echarts.module.ts

import { NgModule } from '@angular/core';
import { EchartsComponent } from './echarts/echarts.component';
import { AngularEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    AngularEchartsModule
  ],
  declarations: [EchartsComponent],
})
export class EchartsModule { }

echarts.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-echarts',
  templateUrl: './echarts.component.html',
  styleUrls: ['./echarts.component.scss']
})

export class EchartsComponent implements OnInit{
      options: any;

      constructor() {
      }

       ngOnInit() {
    
        this.options = {
          title: {
            text: '第一个 ECharts 实例'
          },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
        }
      }


}

补充

echarts.component.html

<div echarts [options] = "options" [loading]="showloading" class="demo-chart"></div>

 

例如：

html

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

ts

onChartInit(ec) {
  this.echartsIntance = ec;
}

resizeChart() {
  if (this.echartsIntance) {
    this.echartsIntance.resize();
    this.echartsIntance.showLoading();
  }
}

最新版API文档

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

Service服务

NgxEchartsService 是全局 echarts 对象的包装器。您可以直接获取本机echarts对象或使用包装器方法。例如：

import {NgxEchartsService} from 'ngx-echarts';

//...
constructor(private es: NgxEchartsService) {}

ngOnInit() {
  const echarts = this.es.echarts;
  echarts.registerMap('HK', HK_GEO_JSON);
  // Or you can:
  // this.es.registerMap('HK', HK_GEO_JSON);
}