series: [ { type: "bar", barWidth: "50%", data: [], itemStyle: { emphasis: { shadowColor: '#ff0000', shadowBlur: 20 } },和myChart.off('click'); myChart.on('click', params => { console.log(params); const itemStyle = myChart.getOption().series[0].itemStyle; const color = itemStyle.color(params); console.log('color:', color); itemStyle.emphasis = { shadowColor : color, shadowBlur: 10, // 模糊大小 shadowOffsetX: 0, // 阴影横向偏移量 shadowOffsetY: 0, // 阴影纵向偏移量 }; console.log(itemStyle); console.log('itemStyle.emphasis=>>>>>',itemStyle.emphasis); myChart.setOption({ series: [{ itemStyle: itemStyle }] }); });并不生效
时间: 2024-02-10 20:17:06 浏览: 122
可视化模板二:用echarts实现金字塔图
根据您提供的代码,可能存在以下问题:
1. 点击事件中获取颜色的方式不正确。您尝试使用 `itemStyle.color(params)` 获取颜色,但是该方式不是获取当前被点击的数据项的颜色,而是获取整个序列的颜色数组。如果您想要获取当前被点击的数据项的颜色,可以使用 `params.color` 获取。
2. 修改 itemStyle.emphasis 属性时,可能需要将其他属性也设置为对应的值。在您的代码中,只设置了 shadowColor 和 shadowBlur,但是阴影的偏移量没有设置,所以阴影看不到。您可以将 shadowOffsetX 和 shadowOffsetY 也设置为 0,例如:
```
itemStyle.emphasis = {
shadowColor: color,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0
};
```
3. 在更新图表数据时,可能需要将整个 series 配置项都更新,而不仅仅是 itemStyle。您可以将更新代码修改为以下形式:
```
myChart.setOption({
series: [{
type: 'bar',
barWidth: '50%',
data: data,
itemStyle: itemStyle
}]
});
```
其中,data 和 itemStyle 分别为您之前获取的数据和样式。
综上所述,以下是可能可以解决问题的代码片段:
```
let data = [120, 200, 150, 80, 70, 110, 130];
let itemStyle = {
emphasis: {
shadowColor: '#ff0000',
shadowBlur: 20
}
};
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
barWidth: '50%',
data: data,
itemStyle: itemStyle
}]
};
myChart.on('click', params => {
const color = params.color;
itemStyle.emphasis = {
shadowColor: color,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0
};
myChart.setOption({
series: [{
type: 'bar',
barWidth: '50%',
data: data,
itemStyle: itemStyle
}]
});
});
```
阅读全文