专栏首页前端之攻略echart3 click点击事件使用 原

echart3 click点击事件使用 原

myChart.on('click', function (param) { // alert(json.stringify(param));//这里根据param填写你的跳转逻辑

    mes=param.dataIndex+1; //      输出点击柱子的index   

    mes=param.data;    //      输出点击柱子的数组

     mes=param.data[0];   //      输出点击柱子的具体的某个数据

     document.getElementById('console').innerHTML = mes; //付给指定的div

    param 对象里面主要含有下面属性

  1. Object
    1. $vars:Array[3]
    2. data:90
    3. dataIndex:6
    4. event:Object
    5. name:"14"
    6. seriesIndex:0
    7. seriesName:"计量点压力"
    8. type:"click"
    9. value:90

  代码片段

    var myChart4 = echarts.init(document.getElementById('barchart1'), theme);
    myChart4.setOption(option4);
    echarts.connect([myChart1, myChart2, myChart3, myChart4]);
    ObjectResize(myChart4.resize);

    function chartClick(param) {
        document.getElementById('console1').innerHTML = option3.xAxis.data[param.dataIndex]
        document.getElementById('console2').innerHTML = " P:" + option2.series[0].data[param.dataIndex] + " bar(abs)"
        document.getElementById('console3').innerHTML = " Qb:" + option3.series[0].data[param.dataIndex] + " Sm3/h"
        document.getElementById('console4').innerHTML = " Q:" + option3.series[1].data[param.dataIndex] + " Sm3/h"
        document.getElementById('console5').innerHTML = " Qb:" + option4.series[0].data[param.dataIndex] + " Sm3/h"
        document.getElementById('console6').innerHTML = option4.xAxis.data[param.dataIndex]
        document.getElementById('h-xslj').innerHTML = "小时累计供气量"

    }
    myChart1.on('click', chartClick);
    myChart2.on('click', chartClick);
    myChart3.on('click', chartClick);
    myChart4.on('click', chartClick);

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 函数式组件完整例子 原

    之前创建的组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。 在下面这个例子中,我们标记组件为 functio...

    tianyawhl
  • 后台传的图片流在前端展示图片

    tianyawhl
  • Bootstrap Table 后端分页

    之前一直用的前端分页,在数据不是太多的情况下,前端分页还是很方便的,也可以使用自带的搜索等功能,如果数据量比较多的情况就要使用后端分页。

    tianyawhl
  • post multipart data boundary问题 使用curl 向jersey post文件

    原以为curl 模拟post file跟post string类似,-d参数一加 ,header一加就完了,这次遇到个问题,却怎么都搞不定。 curl模拟pos...

    财主刀刀
  • Delphi实战中讲解FormCreate,FormShow,FormActivate

    在网上百度就可以看到关于FormCreate,FormShow,FormActivate的讲解和介绍,一般来说执行的顺序为:

    Vaccae
  • python3+requests:pos

    前言:post请求我在python接口自动化2-发送post请求详解(二)已经讲过一部分了,主要是发送一些较长的数据,还有就是数据比较安全等,可以参考Get,P...

    py3study
  • 基于Docker的Elasticsearch集群搭建

    由于默认es实例是1g,太吃内存了,我们修改一下jvm参数,每个es目录下放一个jvm.option文件:

    niceyoo
  • Java-构造方法调用顺序

    执行结果: 开始创建一个ChildClass对象… 创建FatherClass 创建ChildClass 要点: ①关于构造方法结合继承概念的调用,有...

    Fisherman渔夫
  • 【融职培训】Web前端学习 第6章 jQuery Ajax 2 Ajax入门

    在某些项目中,我们只希望获取页面的局部数据,而不必整页刷新,这个时候就需要使用Ajax来实现功能了。

    学习猿地
  • Web前端学习 第6章 jQuery Ajax 2 Ajax入门

    在某些项目中,我们只希望获取页面的局部数据,而不必整页刷新,这个时候就需要使用Ajax来实现功能了。

    学习猿地

扫码关注云+社区

领取腾讯云代金券