潍坊市网站建设_网站建设公司_悬停效果_seo优化

这里记录一下我今天开发遇到的一个小难点以及解决办法。

需求：鼠标悬浮在echarts图上时，对应圆点样式需要实现如下图的样式。

1、按照元素的结构，是这样的，中间实心圆点，外面实线边框，线和原点之间是有透明背景色。

2、设置线上圆点的是series里面的symbol属性，而设置圆点高亮、突出显示的是emphasis属性

3、我通过使用下面的方式，发现在emphasis里面使用的symbol和symbolSize并没有生效，于是我去官方文档里找，也确实没有找到emphasis里面有这两个配置属性，但是AI却一直强调可以用，不知道为什么？

option.series = [ { type: "line", symbol: "circle", symbolSize: 5, showAllSymbol: true, legendHoverLink: false, // 鼠标悬浮时点的样式配置 emphasis: { symbol: "circle", symbolSize: 10, //高亮时圆点的大小 itemStyle: { color: textTitleColor, borderColor: "rgba(255,255,255,0.9)", borderWidth: 1, }, }, lineStyle: { color: textTitleColor, width: 1, }, data: value, }, ];

4、于是我想到，可不可以使用径向渐变来模仿中间的那个实心圆点和圆点周围的透明背景色，添加borderColor和borderWidth来加上边框，再通过scale来放大圆点，于是：

option.series = [ { type: "line", symbol: "circle", symbolSize: 5, showAllSymbol: true, legendHoverLink: false, // 鼠标悬浮时点的样式配置 emphasis: { scale:2, //放大圆点倍数 itemStyle: { // 使用径向渐变模仿从中心圆点扩散 color: { type: "radial", x: 0.5, y: 0.5, r: 0.4, colorStops: [ { offset: 0, color: textTitleColor }, // 中心纯色 { offset: 0.5, color: textTitleColor }, // 中间浅色 { offset: 1, color: "transparent" }, // 边缘透明 ], }, borderColor: "rgba(255,255,255,0.9)", borderWidth: 1, }, }, lineStyle: { color: textTitleColor, width: 1, }, data: value, }, ];

5、实现效果如下：

感觉能凑合这个效果，不知道还有没有其他更简单的方法可以实现，欢迎讨论交流~