series中的symbolSize设置圆点大小，itemStyle中的color设置圆点颜色，外圆环使用边框属性实现即borderWidth、borderColor：
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
lineStyle: { color: '#3f7cf3', width: 2 },
symbolSize: 3, // symbol大小
itemStyle: {
normal: {
color: 'red', // 中心圆点及hover时提示框中数值前面的圆点的颜色
borderWidth: 20, // symbol边框
borderColor: '#3f7cf3' // symbol边框颜色
}
},
data: [150, 230, 224, 218, 135, 147, 260]
}
]
};
效果：文章来源：https://www.toymoban.com/news/detail-517130.html
文章来源地址https://www.toymoban.com/news/detail-517130.html
到了这里，关于Echarts折线图交点呈现为圆点加圆环的效果实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
