1.安装:
npm install echarts --save
2.在 TypeScript 文件中导入echarts
import * as echarts from 'echarts';
3.根据官方demo和API,开发自己的需求即可
https://www.echartsjs.com/examples/4.html布局
5.ts代码
import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() {
}
ngOnInit() {
this.initCharts();
}
initCharts() {
const ec = echarts as any;
const lineChart = ec.init(document.getElementById('lineChart'));
const lineChartOption = {
xAxis: {
type: 'category',
data: \['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'\]
},
yAxis: {
type: 'value'
},
series: \[{
data: \[, , , , , , \],
type: 'line'
}\]
}
lineChart.setOption(lineChartOption);
}
}
效果:
手机扫一扫
移动阅读更方便
你可能感兴趣的文章