Angular小博客
分享让你更聪明
// 安装echarts
npm i echarts --save
// 最新版本的echarts不需要这个
npm i @types/echarts --save-dev
<div #echartsBox style="width: 500px;height: 300px;"></div>
// 导入
import * as echarts from 'echarts';
const ec = echarts as any;
export class NgxEchartsComponent implements AfterViewInit, OnDestroy {
@ViewChild('echartsBox', {static: true}) echartsBox: ElementRef | any;
public echartsDom: any = null;
public option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
ngAfterViewInit(): void {
this.echartsDom = ec.init(this.echartsBox.nativeElement);
this.echartsDom.setOption(this.option);
}
}
写的有点着急,所以就简单用法吧。