ngx-echarts legend点击不置灰

qwqasd123456

于 2021-11-30 15:36:36 发布

阅读量382

点赞数

CC 4.0 BY-SA版权

文章标签： echarts angular.js

本文链接：https://blog.youkuaiyun.com/qwqasd123456/article/details/121633729

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
       });
   }
}