angular6 安装百度echarts

文章参考

1. ngx-echarts npm
2. ngx-echarts 例子

安装依赖库

npm install echarts -S
npm install ngx-echarts -S

第一种：ngx-echarts 模块创建报表

app.module.ts 注册

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

组件中使用

1. html文件中注册

<div echarts [options]="chartOption" class="demo-chart">div>

要设置容器的高度

.demo-chart {
  height: 400px;
}

2. component.ts文件中注册数据和配置信息

import { EChartOption } from 'echarts';
 
// ...
 
chartOption: EChartOption = {
  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',
    },
  ],
};

第二种：引入echarts.min.js库（与标准HTML使用eharts方式一致）

在angular.json文件中配置，引入 echarts.min.js

"scripts": [
	"node_modules/echarts/dist/echarts.min.js"
]

组件中使用

1. html文件中注册

<div id="chart-container" class="demo-chart">div>

要设置容器的高度

.demo-chart {
  height: 400px;
}

2. component.ts文件中注册数据和配置信息

// 画折线图
drawLineChartByData (eventObj: any) {
  let chartOption = {
    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',
  	}],
  }
  var myChart = echarts.init(document.getElementById('chart-container'));
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(chartOption)
}