文章目录
文章参考
安装依赖库
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 {}
组件中使用
- html文件中注册
<div echarts [options]="chartOption" class="demo-chart"></div>
要设置容器的高度
.demo-chart {
height: 400px;
}
- 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"
]
组件中使用
- html文件中注册
<div id="chart-container" class="demo-chart"></div>
要设置容器的高度
.demo-chart {
height: 400px;
}
- 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)
}