首页 > 建站教程 > JS、jQ、TS >  echarts hover鼠标移上去改变颜色正文

echarts hover鼠标移上去改变颜色

    echarts是百度推出的一款非常优秀基于js的可视化图标生成插件,受众面非常广,使用简单,提供了大量的借口,可以做柱状、地图、饼状等各种图表。
    我爱模板网今天在使用Echarts的时候,遇到一个问题,就是客户要求鼠标移动上去,列表项显示其他颜色,效果如下:


鼠标移上去之前


鼠标移上去之后

    官方提供的demo有很多,但是就是没找到怎么改,只能自己找每项参数,看看能不能找到,一开始搜索例如hover、mouseover等等,都没找到,后来,总算找到了,是 emphasis。代码片段如下:
//设置饼状图items样式
itemStyle: {
	//正常状态
  normal: {
	borderWidth:.5,
	borderColor:'rgba(90,165,242,1)',
	color:function(params) {
	  var colorList = [
		'#c3dbf3','#c3dbf3','#c3dbf3'
	  ];
	  return colorList[params.dataIndex]
	},
	shadowBlur: 1,
	shadowColor: 'rgba(255, 255, 255, 1)',
	label : {
		position : 'inner'
	},
	labelLine : {
		show : false
	}
  },
    //hover状态
	emphasis:{
		color:function(params) {
		  var colorList = [
			'#407cbb','#407cbb','#407cbb'
		  ];
		  return colorList[params.dataIndex]
		}
	}
},
	animationType: 'scale',
	animationEasing: 'elasticOut',
	animationDelay: function (idx) {
	  return Math.random() * 200;
	}
}
     希望本文对大家有用!