echarts折线鼠标悬浮点大小、动画、样式、颜色设置

六月初六月初 Echarts 2019-02-28 13:49:10

echarts的悬浮点在折线、散点图、雷达图中都是必然出现的一个效果，那么对于如果我们对于悬浮点要进行一些样式修正要如何处理呢？

话不多说，直接来看关键点代码：（为了节约你的时间，大家可以直接到页面底部查看效果是否是你需要的！）

showSymbol: true,
symbol: 'circle',     //设定为实心点
symbolSize: 20,   //设定实心点的大小
hoverAnimation: false,//设置鼠标放上去动作
animation: false,//显示时动画
itemStyle : {  
	normal : {  
		color:'blue',//折线点颜色
		lineStyle:{  
			color:'orange'  //折线颜色
		}  
	},
}  ,

每个参数的作用，在后面都有注释！

完整案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
    </head>
    <body>
        <div id="test" style="height: 500px;width: 100%;">
            
        </div>
        <script>
            var BarBOX1 = echarts.init(document.getElementById("test"));
			option1 = {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
				showSymbol: true,
				symbol: 'circle',     //设定为实心点
				symbolSize: 20,   //设定实心点的大小
				hoverAnimation: false,//设置鼠标放上去动作
				animation: false,//显示时动画
				itemStyle : {  
					normal : {  
						color:'blue',//折线点颜色
						lineStyle:{  
							color:'orange'  //折线颜色
						}  
					},
				}  ,
					data: [764, 13, 56, 234, 124, 865, 234],
					type: 'line'
				}]
			};
            
            BarBOX1.setOption(option1);
        </script>
    </body>
</html>

echarts悬浮点样式、大小、颜色修改后实现的效果：


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！