问题

在这一行的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: &#39;average&#39;,
          symbolSize: 12,
          symbol: &#39;circle&#39;,
          type: &#39;line&#39;,
          itemStyle: {
            color: &#39;rgba(0,0,0, 0.6)&#39;,
          },
          lineStyle: {
            width: 5,
            color: &#39;rgba(0,0,0,0.4)&#39;,
          },

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: &#39;white&#39;,
              borderColor: &#39;blue&#39;,
              borderWidth: 2,
            },
          },

Emphasis Nested in Item Style


          itemStyle: {
            color: &#39;rgba(0,0,0, 0.6)&#39;,
            emphasis: {
              color: &#39;white&#39;,
              borderColor: &#39;blue&#39;,
              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.

This is a working demo with the tooltip and the emphasis.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。