如何解决ngx-echarts 从 API 更新数据
我遇到了更新我的 ngx-echarts 数据的问题(Angular 10) ngx-echarts : v6.0
我想从我的 api 中获取数据,然后将值更新到图表中。 实际上,它一次有效,另一次无效。 似乎这取决于加载页面的速度。 如果速度很快,则该值不会更新(但在控制台中我看到应该在图表内的值..)
我没有找到任何用于更新图表的好文档。 我希望现在有人可以纠正我。谢谢
import { delay } from 'rxjs/operators';
import { AfterViewInit,Component,ElementRef,Input,OnChanges,OnDestroy,OnInit,ViewChild } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { RestApiService } from '../../shared/rest-api/rest-api.service';
import { ActivatedRoute } from '@angular/router';
import { EChartOption } from 'echarts';
declare const echarts: any;
@Component({
selector: 'ngx-solar',templateUrl: './solar.component.html',styleUrls: ['./solar.component.scss']
})
export class SolarComponent implements AfterViewInit,OnInit {
id: any;
value: number = 10; //default value here
option: any = {};
themeSubscription: any;
dynamicData: any;
@Input('chartValue')
set chartValue(value: number) {
if (this.option.series) {
this.option.series[0].data[0].value = value;
this.option.series[0].data[1].value = 100 - value;
this.option.series[1].data[0].value = value;
}
}
ngOnInit(): void{
this.route.params.subscribe(params => {
this.id = params['id'];
});
this.dataService.getMetricsOfContainer(this.id).subscribe((res)=>{
console.log(JSON.stringify(res.cpu)); //value appears here all time
this.value = res.cpu;
// var myChart = echarts.init(document.getElementById('chart'));
// myChart.setoption(this.option);
});
}
constructor(private theme: NbThemeService,private dataService: RestApiService,private route: ActivatedRoute) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
const solarTheme: any = config.variables.solar;
this.option = Object.assign({},{
tooltip: {
trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)',},series: [
{
name: ' ',clockwise: true,hoverAnimation: false,type: 'pie',center: ['45%','50%'],radius: solarTheme.radius,data: [
{
value: this.value,name: ' ',label: {
normal: {
position: 'center',formatter: '{d}%',textStyle: {
fontSize: '22',fontFamily: config.variables.fontSecondary,fontWeight: '600',color: config.variables.fgheading,tooltip: {
show: false,itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0,1,[
{
offset: 0,color: solarTheme.gradientLeft,{
offset: 1,color: solarTheme.gradientRight,]),shadowColor: solarTheme.shadowColor,shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 3,{
value: 100 - this.value,label: {
normal: {
position: 'inner',itemStyle: {
normal: {
color: solarTheme.secondSeriesFill,],{
name: ' ',show: false,shadowBlur: 7,{
value: 28,itemStyle: {
normal: {
color: 'none',});
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}
HTML:
<nb-card size="tiny" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body>
<div id="chart" echarts [options]="option" class="echart">
</div>
<div class="info">
<div class="h4 value">6.421 kWh</div>
<div class="details subtitle-2"><span>out of</span> 8.421 kWh</div>
</div>
</nb-card-body>
</nb-card>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。