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

  1. 通过柱状图的点击事件获取点击的柱子的对应参数(如x轴名字,y轴数值等),这里我拿的是x轴名字
myChart.on('click',function(params){
    checkName = params.name
}
  1. 然后重构柱状图
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>

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

Logo

助力广东及东莞地区开发者,代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展,成为松山湖开发者首选的工作与学习平台

更多推荐