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. H2：开源内存数据库引擎

    本资源由 伯乐在线 - 刘立华 整理 H2是一个开源的内存数据库.Java编写.快速.小巧(1.5MB jar包)还提供了Web控制台管理数据库内容. 主要功能 非常快速的数据库引擎. 开源. Jav ...

  2. Photoshop 使用阈值调整色阶

    1. 阈值原理 阈值的定义其实就是“临界点”,即过了这个临界点是一种情况(比如黑色),没有超过这个临界点是另外一种情况(比如白色),所以图像上只有黑.白两种情况出现.临界点的值由你定义: 阈值实际应用 ...

  3. NLP的神经网络训练的新模式

    https://blog.csdn.net/jdbc/article/details/53292414 该模式分为:embed.encode.attend.predict四部分.

  4. how to fix bug in daily work

    0 QE will begin test the product when system is stable. so they may log a lot of issues, and our dai ...

  5. 排序算法的实现（归并，快排，堆排，希尔排序 O(N*log(N))）

    今天跟着左老师的视频,理解了四种复杂度为 O(N*log(N))的排序算法,以前也理解过过程,今天根据实际的代码,感觉基本的算法还是很简单的,只是自己写的时候可能一些边界条件,循环控制条件把握不好. ...

  6. Flask Restful服务简单实现

    官网:http://flask.pocoo.org/docs/1.0/quickstart/#routing 1.安装 windows下:pip3 install Flask 具体参照:windows ...

  7. 零基础学python-7.2 字符串常量

    1.单双引號字符串是一样的 >>> 'abc',"abc" ('abc', 'abc') >>> 当你的python照着上面的样例来写,这个时候 ...

  8. 转：UFLDL_Tutorial 笔记（deep learning绝佳的入门资料 ）

    http://blog.csdn.net/dinosoft/article/details/50103503 推荐一个deep learning绝佳的入门资料 * UFLDL(Unsupervised ...

  9. 如何使用Android studio打开eclipse项目

    转: http://blog.csdn.net/zcw93219/article/details/50770445

  10. 原：wireshare使用技巧收集

    /data/local/tcpdump -p -vv -s 0 -w /sdcard/ThinkDrive.pcap     先抓一个pcap的包. 1. 查看所有的链接与流量 统计->对话 这 ...