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. Java命令学习系列（六）——jinfo

    jinfo可以输出java进程.core文件或远程debug服务器的配置信息.这些配置信息包括JAVA系统参数及命令行参数,如果进程运行在64位虚拟机上,需要指明-J-d64参数,如:jinfo -J ...

  2. go语言之进阶篇主协程先退出导致子协程没来得及调用

    1.主协程先退出导致子协程没来得及调用 示例: package main import ( "fmt" "time" ) //主协程退出了,其它子协程也要跟着退 ...

  3. [leetcode]Longest Consecutive Sequence @ Python

    原题地址:https://oj.leetcode.com/problems/longest-consecutive-sequence/ 题意: Given an unsorted array of i ...

  4. Rotate Image leetcode java

    题目: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwis ...

  5. 自动化打包 Jenkins 持续集成 Git Gradle MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  6. jQuery UI全教程之一(dialog的使用教程)

    jQuery UI目前的版本已经更新到了1.8.7.个人感觉和easyui相比起来,jQuery UI在界面的美观程度和可定制型更强一些.所以再次将一些jQuery UI组件的用法说明一下,方便日后查 ...

  7. 【Scala】Scala-Map使用方法

    Scala-Map使用方法 scala map put_百度搜索 Scala中的Map使用例子 - CSDN博客 How to populate java.util.HashMap on the fl ...

  8. __attribute__中constructor和destructor[总结]

    1.前言 最近看到一份代码,看到一个函数前面用__attribute__((destructor))修饰,当时感觉有点怪怪的,搜了整个程序,也没发现哪个地方调用这个函数.于是从字面意思猜想,该函数会在 ...

  9. Java-Shiro（四）：Shiro

    https://blog.csdn.net/visket2008/article/details/78539334 不错的视屏教程,很实用:https://www.bilibili.com/video ...

  10. linux kernel系列四：嵌入式系统中的文件系统以及MTD

    本节介绍File System和MTD技术 一 FS 熟知的FS有ext2,3,4.但是这些都是针对磁盘设备的.而ES中一般的存储设备为Flash,由于Flash的特殊性: Flash存储按照Bloc ...