echarts直角图形的x轴坐标的标签添加click事件

最新推荐文章于 2025-06-11 14:08:37 发布

原创最新推荐文章于 2025-06-11 14:08:37 发布 · 1.4w 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用ECharts配置柱状图，包括路径配置、图表初始化、数据加载及交互事件设置等。通过实例展示了如何调整图表样式、实现数据展示优化及添加交互功能。

<pre name="code" class="html"><!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:600px;height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="./comechart/js/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: './comechart/src'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    color: ['lime','red','#058DC7'],
					title: {
						x:'center',
				    		text: '颜色分类',

						link:'javascript:alert(1)',  //超链接改成click事件

						target:'self'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer : {
							type : 'shadow'    
						},
                        show: true,
						formatter:function(obj){
							var html = obj[0].name+"<br/>";
							for(var i = 0; i<obj.length;i++){
								var value = obj[i].data.toString();
								html+=obj[i].seriesName+":"+value.substr(value.lastIndexOf('-')+1)+"<br/>";	
							}
							return html;
						}
                    },
                    legend: {
                        x:'center',
				        y:'bottom',
				        padding:10,
				        data:['红','绿','蓝']
                    },
                    xAxis : [
						{
							 axisLabel : {
								formatter: function (value){return Math.abs(value);} 
							},
                            type : 'value'
                        }
                    ],
                    yAxis : [
                         {
                            type : 'category',
							position:'right',
							axisLabel : {clickable:true},
                            data:['一类','二类','三类']
                        }
                    ],
                    series : [
                        {
				            name:'红',
							clickable:false,
				            type:'bar',
				            data:[-3300, -6320, -13301]
				        },
				        {
				            name:'绿',
							clickable:false,
				            type:'bar',
				            data:[-800, -1600, -2010]
				        },
				        {
				            name:'蓝',
							clickable:false,
				            type:'bar',
				            data:[-400, -800, -1200]
				        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
				function eConsole(param) {  
					if (typeof param.seriesIndex == 'undefined') {  
							return;  
						}  
						if (param.type == 'click') {  
							alert(param.name);  
						}  
					}  
				var ecConfig = require('echarts/config');
				myChart.on(ecConfig.EVENT.CLICK, eConsole);
            }
        );
    </script>
</body>

修改的地方：

1）第一

paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}

修改为：

paths: {
echarts: './comechart/src' // 'http://echarts.baidu.com/build/dist'文件的存放路径
}

2）第二

series里面添加clickable:false

series : [
{
name:'当天正常签收',
  clickable:false,---------------------------------新添加设置柱子不可点击
type:'bar',
data:[-3300, -6320, -13301]
},
{
name:'未签收',
  clickable:false,,---------------------------------新添加设置柱子不可点击
type:'bar',
data:[-800, -1600, -2010]
},
{
name:'异常签收',
  clickable:false,,---------------------------------新添加设置柱子不可点击
type:'bar',
data:[-400, -800, -1200]
}
]

3）第三

xAxis / yAxis 添加axisLabel : {clickable:true}，xAxis / yAxis对应的type为type : 'category'

yAxis : [
{
type : 'category',
position:'right',
axisLabel : {clickable:true},
data:['分部','本部','总部']
}
]

4）第四

myChart添加onclick事件

myChart.setOption(option);
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
alert(param.name);
}
}
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
}