Ts语言的angular给出代码:在前端存储了由后端传入的数组movie 其内容为[“1900”:1 ,“1992”:2,“1993”:5],双引号里的内容表示年份,冒号后的数字代表电影数量,用echarts画出随年份变化的电影数量变化趋势图
时间: 2023-06-27 07:02:38 浏览: 46
以下是一个简单的 Angular 组件示例,使用 ECharts 库绘制电影数量变化趋势图:
```typescript
import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
@Component({
selector: 'app-movie-chart',
template: '<div #chart style="width: 100%; height: 400px;"></div>'
})
export class MovieChartComponent implements OnInit {
movie: { [key: string]: number } = {
'1900': 1,
'1992': 2,
'1993': 5
};
ngOnInit(): void {
const chart = echarts.init(this.chart.nativeElement);
const option = {
xAxis: {
type: 'category',
data: Object.keys(this.movie)
},
yAxis: {
type: 'value'
},
series: [{
data: Object.values(this.movie),
type: 'line'
}]
};
chart.setOption(option);
}
}
```
此示例中,我们使用 `echarts` 库创建了一个柱状图,并使用 `ngOnInit()` 方法在组件初始化时绘制了它。其中,`this.movie` 对象包含从后端传入的年份和电影数量信息。我们使用 `Object.keys()` 和 `Object.values()` 方法分别获取年份和电影数量的数组,然后将这些数组作为 `xAxis.data` 和 `series.data` 配置项传递给 ECharts 组件,以便正确呈现电影数量变化趋势图。