先声明一个参数value,然后在点击之后再次调用该echart
柱状图:
Mychart.on('click', function eConfig(param){
value=param.name;
queryData();
});
series : [
{
name:'数量',
type:'bar',
barWidth: '30%',
data:resultData,
// data:[10, 52, 200, 334, 390, 330, 220],
/* itemStyle: {
normal: {
// color:['#07a6ba','#4bc0c9','#3b56d9','#dbbb32','03ecef','#8648e7','#0fb2db']
color: function(params) {//柱子颜色
var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
return colorList[params.dataIndex]
}
}
}*/
//该处为点击事件
***itemStyle:{
normal: {
color: function(params) {
var key = params.name.replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, "");
if(key == value){
return "#FE8463";
}else{
return "#4ABACE";
}
}
}
}***
}
]
饼图:
Mychart.on('click', function eConfig(param){
value=param.name;
queryData();
});
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
***selectedMode:'single',***//饼图上移
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
barWidth :8,
/* itemStyle: {
normal: {
// color:['#07a6ba','#4bc0c9','#3b56d9','#dbbb32','03ecef','#8648e7','#0fb2db']
color: function(params) {//柱子颜色
var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
return colorList[params.dataIndex]
}
}
},*/
itemStyle:{
normal: {
color: function(params) {
var key = params.name.replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, "");
if(key == value){
return "#FE8463";
}else{
return "#4ABACE";
}
}
}
},
data:resultData
}
]