Echarts学习记录——如何给x轴文字标签添加事件

关键属性

axisLabel下属性clickable:true 
并给图表添加单击事件 
根据返回值判断点击的是哪里 
感觉自己的方法有点变扭，有更好办法的同学，请留下方式。

示例代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="ECharts">

<title>Echarts学习记录</title>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<script type="text/javascript">

    var width;

    var height;

    var myChart;

    $(function(){

        //自适应设置

        width = $(window).width();

        height = $(window).height();

        $("#mainBar").css("width",width-40);

        $("#mainBar").css("height",height-40);

        console.log(height);

        setEcharts();

    });

    $(window).resize(function() {

        width = $(window).width();

        height = $(window).height();

        $("#mainBar").css("width",width-40);

        $("#mainBar").css("height",height-40);

    }); 

    function setEcharts(){

        myChart = echarts.init(document.getElementById('mainBar'));

        //自适应

        window.onresize = myChart.resize;

        myChart.setOption({

            title : {

                text: '未来一周气温变化',

                subtext: '纯属虚构'

            },

            legend: {

                data:['蒸发量','降水量']

            },

            calculable : true,

            xAxis : [

                {

                    type : 'category',

                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],

                    //设置文字属性

                    axisLabel:{

                        clickable:true

                    }

                }

            ],

            yAxis : [

                {

                    type : 'value',

                }

            ],

            series : [

                {

                    name:'蒸发量',

                    type:'bar',

                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

                },

                {

                    name:'降水量',

                    type:'bar',

                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

                }

            ]

        });

        myChart.on('click', function (params) {

            if(params.value){

                alert("单击了"+params.name+"柱状图");

            }else{

                alert("单击了"+params.name+"x轴标签");

            }

        });

    }

</script>

<body>

    <div id="mainBar" style="border:1px solid #ccc;padding:10px;"></div>

    <!-- 标签式引入Eharts 如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。 -->

    <script type="text/javascript" src="http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script>

    <script>

    </script>

</body>

</html>

效果图

 

Echarts学习记录——如何给x轴文字标签添加事件的更多相关文章

  1. Echarts学习记录——如何去掉网格线及网格区域颜色

    关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...

  2. ECharts学习记录

    一.ECharts在GitHub的地址以及需要引入文件地址: 1.Github地址:https://github.com/ecomfe/echarts 2.官网下载文件地址:http://echart ...

  3. echarts使用记录（二）legend翻页，事件，数据集，设置y轴最大/小值，让series图形从右侧出往左移动

    1.有时候legend比较多的时候,需要做翻页比较好,有个属性legend的type属性设置为scroll,然后animation可以控制动画,官方文档均可查. 再就是scrollDataIndex, ...

  4. Echarts中线状图的X轴坐标标签倾斜样式

    在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的 http://www.cnblogs.com/phpgc ...

  5. JavaWeb学习记录（十三）——商城购物之添加订单的数据库级联操作

    一.方法实现 private JdbcTemplate jdbcTemplate = new JdbcTemplate(DBConn.getDataSource()); @SuppressWarnin ...

  6. JavaWeb学习记录（十九）——jsp标签库

    1.out标签 <%        //局部变量        String name="zsf>&<zz";        pageContext.se ...

  7. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  8. echarts x轴文字显示不全解决办法

    标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694

  9. echarts x轴文字显示不全（解决方案）

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

随机推荐

  1. Eclipse 乱码 解决方案总结（UTF8 -- GBK）

    UTF8 --> GBK;   GBK --> UTF8 eclipse的中文乱码问题,一般不外乎是由操作系统平台编码的不一致导致,如Linux中默认的中文字体编码问UTF8, 而Wind ...

  2. 数据库分库分表中间件：Mycat；分布式数据库;mysql的分布式事务

    官网:http://mycat.io/,里面有电子书籍可以下载:http://www.mycat.io/document/mycat-definitive-guide.pdf 旧版本下载地址:http ...

  3. SQLSERVER系统视图 sql server系统表详细说明

    参考 https://www.cnblogs.com/luluping/archive/2012/11/05/2754639.html https://www.cnblogs.com/litubin/ ...

  4. poj 1325 Machine Schedule 题解

    Machine Schedule Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14479   Accepted: 6172 ...

  5. ArcEngine C++ 10 程序的运行环境，ArcEngine RT的授权

    以前我一直以为 必须安装 Arcgis Desktop才可以授权,发现我错了,原来是这个样子的. 一.安装License manager,并授权许可server.txt 当然这个license也可以安 ...

  6. Downloading files from a server to client, using ASP.Net, when file size is too big for MemoryStream using Generic Handlers (ashx)

    Currently, I was trying to write an ASP.Net application that involved a user clicking a ASP.Net butt ...

  7. Python机器学习——线性模型

    http://www.dataguru.cn/portal.php?mod=view&aid=3514 摘要 : 最近断断续续地在接触一些python的东西.按照我的习惯,首先从应用层面搞起, ...

  8. java中正则表达式基本用法（转）

    https://www.cnblogs.com/xhj123/p/6032683.html 正则表达式是一种可以用于模式匹配和替换的规范,一个正则表达式就是由普通的字符(例如字符a到z)以及特殊字符( ...

  9. 数据科学家Docker历险记（1）：windows下环境搭建

    原文:http://www.xueqing.tv/cms/article/247 Docker是最近炒得很火热的一门技术,在网上可以找到关于它的介绍文章,比如<Docker到底是什么?为什么它这 ...

  10. Android自己定义View之仪表盘

    新建项目,新建DashBoardView继承自View实现OnGlobalLayoutListener接口,并重写OnDraw方法. 使用OnGlobalLayoutListener接口须要重写onG ...