如何更改所选项目的颜色

Question

以记录的自定义系列渲染“矩形”元素的示例为例，如何在选择某个项目时让颜色发生变化？

第一步当然是添加

selectedMode: "single"

，但然后我就卡住了。

我尝试添加这个：

select: {
  itemStyle: {
    color: "#4338ca",
  },
},
emphasis: {
  itemStyle: {
    color: "#be123c",
  },
},

但似乎没有考虑到（参见修改后的示例）。

与奖励相关的问题：当我在 VS Code 或在线编辑器中使用

api.style()

方法时，该方法被标记为已弃用，但 用户文档中没有提到此类弃用？

Answer 1

您必须在 renderItem 函数内定义 select 和 emphasis 的行为。

示例：

renderItem: function (params, api) {

    ...

    return {
        type: 'rect',
        shape: { ... },
        style: { ... },
        select: {
            style: { fill: '#4338ca' }
        },
        emphasis: {
            style: { fill: '#be123c' }
        }
    };
}

文档维护得不完美，经常会出现信息丢失或不完全正确的情况。