问题现象:自定义myTool1中的onclick事件中处理逻辑时,在draw方法中赋值后,无法及时刷新,只能点击一次或者鼠标离开当前画布才能绘制图像。
问题原因:鼠标点击图标后,当前鼠标没有在当前的dom上,无法触发ngx-echarts中的ngOnChanges方法,导致无法绘制。
解决办法:不用echarts定义的图标事件,自己定义个div引入图标,定义事件。
template: `
<div echarts [loading]="loading" [loadingOpts]="getLoadingOpts()"
[options]= "option" [initOpts]= "opts"
(chartClick)="chartClick($event)"
(chartInit)="onChartInit($event)" [ngStyle] = "getChartStyles()"></div>
<div [hidden]="drillDownLayered <= 0" name="fieldName" id="chart-dirll-icon"
[ngStyle]="{'margin-top': emptyDataTop*2+16 + 'px'}"
[ngClass]="{'chart-switch-Icon' : true}" (click)="goBack($event)">
<img [ngClass]="{'chart-icom-img' : true}"
src="/assets/img/charts/return-upper-level.png"></div>
<div [hidden]="!noDate" name="fieldName" id="chart-empty-text"
[ngStyle]="{'margin-top': emptyDataTop + 'px'}"
[ngClass]="{'chart-empty-position' : true}">{{noDate}}</div>
`,
styles: [
`
.chart-empty-position {
position: absolute;
margin-top: 50%;
font-size: 14px;
left: 45%;
}
.chart-switch-Icon {
position: absolute;
right: 20px;
width: 20px;
cursor:pointer;
}
.chart-icom-img {
right: 20px;
width: 20px;
}
img.chart-icom-img:hover {
right: 22px;
width: 22px;
-webkit-filter: drop-shadow(1px 1px 5px #999999);
filter: drop-shadow(1px 1px 5px #999999);
}
`,
],