本周完成了新项目两个issue,由于是前台使用的是angularjs,而不是以往的angular,文件结构也不太相同。所以出现着:angularjs不熟悉,代码无从下手的情况。 在经过摸索之后,对于a
顺晟科技
2021-07-09 10:31:40
174
废话不多说,直接开始
安装echarts:npm install echarts --save
在需要使用echarts的component中引入echarts:import * as echarts from 'echarts';
由于没有在展示echarts的dom中使用angular指令可以直接在生命周期函数ngOnInit
中使用this.initCharts();
ngOnInit(): void {
console.log('ngOnInit()');
this.initCharts();
}
4.定义dom
<div></div>
5.定义initCharts()函数
initCharts(): void {
const lineChart = echarts.init(document.querySelector('.lineChart'));
const option = {
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'
}]
};
lineChart.setOption(option);
}
其结果为:
17
2022-11
09
2022-11
09
2022-11
21
2022-10
30
2022-09
30
2022-09