echarts柱形图实现点击事件且改变颜色样式

因为一些需求，要实现柱状图的点击事件，还有改变点击柱子的颜色，实现原理如下：通过柱状图的点击事件获取点击的柱子的对应参数（如x轴名字，y轴数值等），这里我拿的是x轴名字myChart.on('click',function(params){checkName = params.name}然后重构柱状图myChart.on('click',function(params...

YCRUCAN

9810人浏览 · 2019-12-13 15:58:47

YCRUCAN · 2019-12-13 15:58:47 发布

因为一些需求，要实现柱状图的点击事件，还有改变点击柱子的颜色，实现原理如下：

通过柱状图的点击事件获取点击的柱子的对应参数（如x轴名字，y轴数值等），这里我拿的是x轴名字

myChart.on('click',function(params){
    checkName = params.name
}

然后重构柱状图

myChart.on('click',function(params){
    checkName = params.name;
     myChart.setOption(option);
}

3.通过判断选中的名字改变柱子的颜色样式

 series : [
    	        {
    	            type:'bar',
    	            barWidth:40,//宽度
    	            data:levelsum,
    	            itemStyle: {
  	                	 normal: {
  	                		label:{show:true},
  				            color: function (params){
  				            //判断选中的名字改变柱子的颜色样式
  				            	if(checkName  === params.name){
  				            		return '#2f4554';
  				            	}else {
  				            		return '#c23531';
  				            	}
                         }
  	                }
  	              },
    	        }
    	    ]

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var checkName='';//点击柱子的名字
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]，
                itemStyle: {
  	                	 normal: {
  	                		label:{show:true},
  				            color: function (params){
  				               //通过判断选中的名字改变柱子的颜色样式
  				            	if(checkName === params.name){
  				            		return '#2f4554';
  				            	}else {
  				            		return '#c23531';
  				            	}
                         }
  	                }
  	              },
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        //点击事件
        myChart.on('click',function(params){
             //点击的柱子的名称
		    checkName = params.name;
		    //柱形图重构
		     myChart.setOption(option);
       }
    </script>
</body>
</html>

效果如下：
在这里插入图片描述