echart添加点击事件，获取点击处的数据

最新推荐文章于 2024-09-09 14:08:32 发布

轻松qinsong

最新推荐文章于 2024-09-09 14:08:32 发布

阅读量5.9w

点赞数 6

分类专栏：前端-HTML

本文链接：https://blog.csdn.net/u014136910/article/details/50933587

版权

前端-HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
      <script src="js/ECharts/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'js/ECharts/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
               var ecConfig = require('echarts/config');  
              myChart.on(ecConfig.EVENT.CLICK, eConsole); 
                var option = {
					      
					    tooltip : {
					        trigger: 'axis'
					        
					    },
					    legend: {
					    	x:'right',
					    	
					        data:['人数']
					    },
					   
					    calculable : true,
					    xAxis : [
					        {
					            type : 'category',
					            boundaryGap : false,
					            data : [10,20,30,40,50,60,70,80,90,100]
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value',
					            axisLabel : {
					                formatter: '{value} 人'
					            } 
					        }
					    ],
					    series : [
					    	
					        {
					           <span style="color:#ff0000;"><strong> clickable : true,</strong></span>
					            name:'人数',
					            type:'line',
					            data:[1,2,3,4,5,6,7,8,9,0],
					        }
					       
					    ]
					};
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
       function eConsole(param) {    
	 if (typeof param.seriesIndex == 'undefined') {    
 		   return;    
         }    
        if (param.type == 'click') {    
          alert(param.data+1);    
            }    
        }
    </script>
</body>

这三个地方是必须的