Javascript 单击echart条形图时如何高亮显示条形图？

我使用echarts库创建了一个条形图。如何在用户单击条形图时高亮显示条形图，或者在单击条形图时应用条形图边框

---

是否有一种方法可以在触发条的单击事件时高亮显示条？

是的，有一种方法可以在单击时高亮显示条

当点击事件被触发时，您可以从参数中获得准确的点击数据（单条），然后您只需更改此数据的颜色（例如，减少alpha）即可实现“突出显示”目标

同时不要忘记其他数据（未点击）的恢复颜色

检查这个

let echartsObj=echarts.init（document.querySelector（“#canvas”）；
选项={
网格：{
左：“3%”，
对:"4%",，
底部：“3%”，
标签：正确
},
xAxis：[{
类型：'类别'，
数据：[周一、周二、周三、周四、周五、周六、周日]，
}],
亚克斯：[{
类型：“值”
}],
系列：[{
姓名：'直接访问',
类型：'bar'，
条形宽度：“60%”，
数据：[{
数值：10，
项目样式：{
颜色：“hsl（200,60%，45%）”
}
}, {
价值：52，
项目样式：{
颜色：“hsl（200,60%，45%）”
}
}, {
价值：200，
项目样式：{
颜色：“hsl（60,60%，45%）”
}
}, {
价值：334，
项目样式：{
颜色：“hsl（150,60%，45%）”
}
}, {
价值：390，
项目样式：{
颜色：“hsl（220,60%，45%）”
}
}, {
价值：330，
项目样式：{
颜色：“hsl（200,60%，45%）”
}
}, {
价值：220，
项目样式：{
颜色：“hsl（150,60%，45%）”
}
}]
}]
};
echartsObj.setOption（选项）
echartsObj.on（'click'，函数（参数）{
console.log（参数）
option.series[0]。data.forEach（（数据，索引）=>{
如果（索引===参数数据索引）{
如果（！data.isChecked）{
data.itemStyle.color=getHighLightColor（data.itemStyle.color）；
data.isChecked=true；
}
}否则{
if（data.isChecked）{
data.itemStyle.color=getOrigColor（data.itemStyle.color）；
data.isChecked=false；
}
}
})
echartsObj.setOption（选项）
});
函数getHighLightColor（颜色）{
返回颜色。替换（/（\d+）%\）/，（…参数）=>{
返回20+个数字（参数[1]）+“%””
});
}
函数getOrigColor（highlightColor）{
返回highlightColor。替换（/（\d+）%\）/，（…参数）=>{
返回编号（args[1]）-20+'%）'
});
}

---

可以这样突出显示：

chart.on('click', (params) => {
  chart.dispatchAction({
    type: 'highlight',
    seriesIndex: params.seriesIndex,
    dataIndex: params.dataIndex
  })
})

突出显示样式可以使用

emphasis.itemStyle

---

可以在此处找到文档：

我可以获取高光栏的代码片段吗？由于我们无法获得此事件的任何帮助。@请查看此演示，我相信您可以从中获得帮助。