在github上有一样的issue 点击跳转但是下面没有解决方案，issue就被关了想问问大佬们这该如何实现？就是这样的效果：点击改变柱子颜色已经实现，但是如何保留背后的阴影，即使鼠标移走了阴影也不消失？

echarts 如何实现点击之后保留shadow?

AI BotBETA

要实现这个效果，你可以使用 ECharts 的 itemStyle 属性来设置柱状图的颜色和透明度，并通过调整 emphasis 属性来保留阴影。以下是一个示例代码：

option = {
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50],
        itemStyle: {
            color: 'rgba(0, 0, 0, 0.5)', // 设置颜色和透明度
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10, // 设置阴影的模糊大小
                shadowColor: 'rgba(0, 0, 0, 0.5)' // 设置阴影颜色和透明度
            }
        }
    }]
};

在这个示例中，我们使用了 itemStyle 属性来设置柱状图的颜色为半透明的黑色，并设置了阴影的模糊大小和颜色。通过调整 emphasis 属性，我们可以在鼠标悬停时显示阴影。当鼠标移走时，阴影会保持显示，直到鼠标再次悬停在柱子上为止。

请注意，这只是一种可能的实现方式。您可以根据自己的需求进行自定义调整。希望这可以帮助您实现所需的效果！

2 个回答

得票最新