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. 14 道 JavaScript 题？

    http://perfectionkills.com/javascript-quiz/ https://www.zhihu.com/question/34079683 著作权归作者所有.商业转载请联系 ...

  2. ubuntu下如何批量修改文件后缀名

    正确的方法是: 在命令行中输入   rename   's/\.JPG/.jpg/'    *.JPG [注意] 在单引号中的最后一个'/'符号不能少! 意思是:把当前文件夹下的所有 .JPG文件 替 ...

  3. Dalvik虚拟机的内存管理

    Dalvik虚拟机的内存分为三种类型: Java Object Heap,    Bitmap Memory,   Native Heap.    下面,就这三种类型进行详细讲解:   一.    J ...

  4. 客户端连接SQL报"Cannot Generate SSPI Context"错误

    这种错误实在是让人头痛, 如果你遇到它还没有头痛的话, 请先看看微软给出的针对这个错误的这篇KB811889. 一般我遇到这种错误都是直接放弃, 重新运行sysprep之后再安装一遍所需要的软件. 然 ...

  5. Recover Binary Search Tree leetcode java

    题目: Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without chan ...

  6. javaScript:让文本框内的最后一个文字的后面获得焦点

    //当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myi ...

  7. mongoose系列——几行代码实现CRUD

    1. nodejs 确实好用,mongoose封装了mongodb,代码很简洁. const mongoose = require('mongoose'); mongoose.connect(&quo ...

  8. [Functional Programming] Daggy

    const daggy = require('daggy'); const {tagged, taggedSum} = daggy; const Coord = daggy.tagged('Coord ...

  9. 《数字图像处理原理与实践（MATLAB版）》一书之代码Part1

    本文系<数字图像处理原理与实践(MATLAB版)>一书之代码系列的Part1(P1~42).代码运行结果请參见原书配图. P20 I = imread('lena.jpg');BW1 = ...

  10. Android Toast 使用总结

    本文内容 环境 演示 Toast 使用 环境 Windows 2008 R2 64 位 Eclipse ADT V22.6.2,Android 4.4.3 三星 SM-G3508,Android OS ...