ngx-echarts legend点击不置灰

最新推荐文章于 2024-06-20 17:18:58 发布

原创最新推荐文章于 2024-06-20 17:18:58 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #angular.js

本文介绍了如何在HTML中使用ECharts图表组件，并展示了如何在`chartInit`事件中获取图表实例以及如何处理`chartLegendSelectChanged`事件来改变图例的选中状态。通过`dispatchAction`方法动态控制图表的图例选择。

1 html代码

<div echarts id="powerline" [options]="option" (chartInit)="onChartInit($event)" (chartLegendSelectChanged)="chartLegendSelectChanged"></div>

1 使用chartInit获取到图标的实例

onChartInit ($event) {
    this.echartsInstance = $event;
}

2 legend的点击事件使用chartLegend

// name: 当前选中legend的名称，selected：所有legend现在的选中状态，type：代表使用的是什么方法
chartLegnedSelectChanged ( {name, selected, type }) {
   
    if (selected[name]) {
       // 使用api的dispatchAction来改变选中状态，对于dispatchAction这个方法可以参考echart的api
        this.echartsInstance._api.dispatchAction({
           type: 'legendSelect',
           name
       });
   }
}