echarts点击图标实现不同图片的切换

做过这样一个需求，就是需要把图例图标换成自己想要的图片，并在点击隐藏显示的时候切换不同的图片，下面写一个小例子：

这是未点击前的效果：

点击后切换图标图片：

下面是实现的代码：

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

js代码如下：

// 基于准备好的dom，初始化echarts实例  
        var myChart = echarts.init(document.getElementById('main'));  
  
        // 指定图表的配置项和数据  
        var option = {  
            title: {  
                text: '销量走势'  
            },  
            //提示框  
            tooltip: {  
                //触发类型：坐标轴触发  
                trigger: 'axis',  
            },  
            //图例  
            legend: {  
                selected:{  
                    '阿玛尼':true,  
                    '安踏':true  
                },  
                data:[{  
                    name:'阿玛尼',  
                    icon:'image://images/1.jpg',//显示你需要展示的图片  
                    textStyle:{  
                        fontSize:12,  
                        fontWeight:'bolder',  
                        color:'red'  
                    }  
                },{  
                    name:'安踏',  
                    icon:'image://images/2.jpg',  
                    textStyle:{  
                        fontSize:12,  
                        fontWeight:'bolder',  
                        color:'blue'  
                    },  
                }],  
                bottom:5,  
                  
            },  
            xAxis: {  
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]  
            },  
            //控制y轴线是否显示  
            yAxis: {  
                axisLine: {show: false}  
            },  
            series: [{  
                name: '阿玛尼',  
                type: 'line',  
                data: [5, 20, 36, 10, 10, 20]  
            },{  
                name: '安踏',  
                type: 'line',  
                data: [7, 13, 25, 10, 15, 6]  
            }]  
        };  
  
        // 使用刚指定的配置项和数据显示图表  
        myChart.setOption(option);  

图例默认的图片配置完成啦，接下来要想实现图片的切换，需要用到echarts的legendselectchanged事件函数：

myChart.on('legendselectchanged',function(params){
        	var selected=params.selected;
        	var setiesName=params.name;
        	switch(setiesName){
        		case '阿玛尼' :
        			if(selected['阿玛尼']){
        				option.legend.data[0].icon='image://images/1.jpg';
        				option.legend.selected['阿玛尼']=true;
        			}else{
        				option.legend.data[0].icon='image://images/3.jpg';
        				option.legend.selected['阿玛尼']=false;
        			}
        			break;
        		case '安踏':
        		if(selected['安踏']){
    				option.legend.data[1].icon='image://images/2.jpg';
    				option.legend.selected['安踏']=true;
    			}else{
    				option.legend.data[1].icon='image://images/4.jpg';
    				option.legend.selected['安踏']=false;
    			}
        		break;	
        	}
        	myChart.setOption(option);//这一步不要忘记哦！！！

想实现一个提示框显示多列数据，非X非Y轴数据请看小编另一篇博客（还没时间写，会赶紧补上啦，有技术问题欢迎给小编留言！！转载请注明出处，分享是一件快乐的事！！！）