ngx-echarts legend点击不置灰

本文介绍了如何在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
       });
   }
}

### ngx-echarts 版本列表及发布说明 ngx-echarts 是一个 Angular (版本 >= 2.x) 的指令库,用于集成 ECharts (版本 >= 3.x),使得在 Angular 应用中使用 ECharts 变得更加简便[^1]。 #### 获取版本信息的方法 为了获取具体的版本列表及其对应的发布说明,通常有几种方法: - **访问官方文档或 GitHub 发布页面**:大多数开源项目的官方网站或者其托管平台(如GitHub、GitCode)都会有一个专门的页面来展示所有的发行版以及每个版本的变化日志。对于 `ngx-echarts` 来说,可以前往该项目主页查看详细的版本历史和更新记录。 - **通过 NPM 查询命令** 可以通过 npm 提供的相关命令查询特定包的同版本号。例如,在终端执行如下命令即可看到所有可用的历史版本: ```bash npm view ngx-echarts versions --json ``` 这将会返回 JSON 格式的版本数组,其中包含了每一个发布的稳定版次。 另外,如果想要了解某个具体版本的信息,则可以直接指定该版本号作为参数传递给上述命令: ```bash npm show ngx-echarts@<version> changelog ``` 这里的 `<version>` 需要替换为你感兴趣的版本编号,比如 "4.7.0" 或者其他任何已知的有效标签名。 #### 示例代码片段 下面是一个简单的例子,展示了如何安装最新版本的 `ngx-echarts` 并将其引入到 Angular 项目当中: ```typescript // 安装依赖项 npm install echarts ngx-echarts --save import { NgxEchartsModule } from 'ngx-echarts'; @NgModule({ imports: [ // ... NgxEchartsModule.forRoot({ /* options */ }) ], }) export class AppModule {} ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值