echarts默认高亮,点击时候高亮,其它不高亮

8 篇文章 1 订阅
    // 默认高亮
    this.serviceRequestCharts.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: 0,
    });
    for (var i = 1; i <= 2; i++) {
      this.serviceRequestCharts.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: i,
      });
    }

    // 圆柱图上添加点击事件
    var _this = this;
    this.serviceRequestCharts.on("click", function (param) {
      // 0"项目任务" 1部门任务 2零星任务
      // this.$forceUpdate();
      if (param.dataIndex != _this.dataIndex) {
        //没用选中的取消高亮
        _this.serviceRequestCharts.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: _this.dataIndex,
        });
      }
      _this.dataIndex = param.dataIndex;
      console.log(_this.dataIndex);
      _this.serviceRequestCharts.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: _this.dataIndex,
      });
    });
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要让 ECharts 图表中的 legend 文字在移入时高亮,你可以使用 ECharts 的事件监听器和 API 来实现。以下是一个示例代码,演示了如何实现这个效果: ```javascript // 创建图表实例 var myChart = echarts.init(document.getElementById('myChart')); // 图表的配置项 var option = { // 其他配置项... // 设置 legend 的样式 legend: { // 其他配置项... textStyle: { // 设置默认状态下的文本样式 color: '#333', fontWeight: 'normal' }, selectedMode: 'single', // 设置为单选模式,以便只高亮一个 legend // 监听鼠标移入事件 // 当鼠标移入时,将选中的 legend 文字进行高亮 // 并将其他的 legend 文字恢复默认样式 selected: { 'Legend 1': true, // 默认选中的 legend 'Legend 2': false, 'Legend 3': false, // ... }, // 监听 legendselectchanged 事件 // 当 legend 选中状态发生改变时触发 // 在事件处理函数中更新图表的状态 // 可以根据需要自定义处理逻辑 // 例如,更新图表数据、样式等 emphasis: { // 监听鼠标移入事件 focus: 'series' }, blur: { focus: 'none' } }, // 其他配置项... }; // 使用配置项显示图表 myChart.setOption(option); ``` 请注意,上述代码中的 'Legend 1'、'Legend 2'、'Legend 3' 是示例中的 legend 名称,你需要根据你的实际需求替换为你的 legend 名称。你还可以根据需要自定义其他样式和事件处理逻辑。详细的配置选项和事件监听器请参考 ECharts 的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值