英文:
Adding a highlight style to EChart Items?
问题
在这一行的echart中，我希望每个符号（黑色点）在鼠标悬停在符号上时变成白色，并带有蓝色边框。
这是图表的配置。
data: this.data,
silent: true,
sampling: 'average',
symbolSize: 12,
symbol: 'circle',
type: 'line',
itemStyle: {
color: 'rgba(0,0,0, 0.6)',
},
lineStyle: {
width: 5,
color: 'rgba(0,0,0,0.4)',
},
itemStyle 控制符号的颜色。如何添加悬停效果呢？
我以为添加 emphasis 会起作用，所以我尝试了以下两种配置：
嵌套在 Emphasis 中的 Item Style
emphasis: {
itemStyle: {
color: 'white',
borderColor: 'blue',
borderWidth: 2,
},
},
嵌套在 Item Style 中的 Emphasis
itemStyle: {
color: 'rgba(0,0,0, 0.6)',
emphasis: {
color: 'white',
borderColor: 'blue',
borderWidth: 2,
},
},
但是都没有任何效果。
英文:
In this line echart I'd like each symbol (The black dot) to turn white with a blue border when the symbol is hovered over.
This is the configuration for the chart.
data: this.data,
silent: true,
sampling: 'average',
symbolSize: 12,
symbol: 'circle',
type: 'line',
itemStyle: {
color: 'rgba(0,0,0, 0.6)',
},
lineStyle: {
width: 5,
color: 'rgba(0,0,0,0.4)',
},
The itemStyle controls the color of the symbol. How do we add a hover effect to that?
I thought adding emphasis would do it and so I tried both of these configurations:
Item Style Nested in Emphasis
emphasis: {
itemStyle: {
color: 'white',
borderColor: 'blue',
borderWidth: 2,
},
},
Emphasis Nested in Item Style
itemStyle: {
color: 'rgba(0,0,0, 0.6)',
emphasis: {
color: 'white',
borderColor: 'blue',
borderWidth: 2,
},
},
But neither has any effect.
答案1
得分: 1
我已经搞清楚了... silent 选项被设置为 true。在这种情况下，tooltip 不会显示，并且 emphasis 被关闭。
英文:
OK ... Figured it out ... The silent option was set to true. When that's the case the tooltip does not get displayed and the emphasis is switched off.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论