`

echart添加攥取事件

 
阅读更多
http://echarts.baidu.com/echarts2/doc/example/event.html 参考

option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高','最低']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {readOnly:false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    dataZoom : {
        show : true,
        realtime : true,
        start : 40,
        end : 60
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : true,
            data : function (){
                var list = [];
                for (var i = 1; i <= 30; i++) {
                    list.push('2013-03-' + i);
                }
                return list;
            }()
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'最高',
            type:'line',
            data:function (){
                var list = [];
                for (var i = 1; i <= 30; i++) {
                    list.push(Math.round(Math.random()* 30) + 30);
                }
                return list;
            }()
        },
        {
            name:'最低',
            type:'bar',
            data:function (){
                var list = [];
                for (var i = 1; i <= 30; i++) {
                    list.push(Math.round(Math.random()* 10));
                }
                return list;
            }()
        }
    ]
};
var ecConfig = require('echarts/config');
function eConsole(param) {
    var mes = '【' + param.name + '】';
    if (typeof param.seriesIndex != 'undefined') {
      for(var i in param){
            if (param.hasOwnProperty(i)) { 
                 mes += i + ":" + param[i];
            };
        }
       window.location.href="www.test.com/zuanqu?data="+mes; 
    }
    if (param.type == 'hover') {
        document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
    }
    else {
        document.getElementById('console').innerHTML = mes;
    }
    console.log(param);
}
/*
// -------全局通用
REFRESH: 'refresh',
RESTORE: 'restore',
RESIZE: 'resize',
CLICK: 'click',
DBLCLICK: 'dblclick',
HOVER: 'hover',
MOUSEOUT: 'mouseout',
// -------业务交互逻辑
DATA_CHANGED: 'dataChanged',
DATA_ZOOM: 'dataZoom',
DATA_RANGE: 'dataRange',
DATA_RANGE_HOVERLINK: 'dataRangeHoverLink',
LEGEND_SELECTED: 'legendSelected',
LEGEND_HOVERLINK: 'legendHoverLink',
MAP_SELECTED: 'mapSelected',
PIE_SELECTED: 'pieSelected',
MAGIC_TYPE_CHANGED: 'magicTypeChanged',
DATA_VIEW_CHANGED: 'dataViewChanged',
TIMELINE_CHANGED: 'timelineChanged',
MAP_ROAM: 'mapRoam',
*/
myChart.on(ecConfig.EVENT.CLICK, eConsole);
myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
//myChart.on(ecConfig.EVENT.HOVER, eConsole);
myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
0
1
分享到:
评论

相关推荐

    echart图表移动端应用

    同时,对于触摸操作的支持也是移动端应用的关键,ECharts已经内置了对触摸事件的处理,但开发者可能需要根据具体需求进行自定义。 总的来说,将ECharts应用于移动端,需要掌握ECharts的API,理解响应式设计,关注...

    echart报表加打印

    - **第三方库**:如`printThis.js`,它可以更方便地控制打印样式和内容,包括隐藏元素、添加页眉页脚等。 5. **示例项目实践** 在这个"报表Echart加打印"项目中,开发者将ECharts图表与打印功能相结合,创建了一...

    Echarts-all,修改了源码,添加鼠标右键监听

    百度Echarts文件,修改源码,添加了鼠标右键事件。 调用方式与其他官方方法一样。 实例:myChart.on(ecConfig.CONTEXTMENU, myfunction); (CONTEXTMENU为右键事件名称) ,(myfunction为自定义事件) function ...

    echartmap 3 世界地图 添加中国省份轮廓

    echartmap 3 世界地图 添加中国省份轮廓。 使用方法: //使用ajax加载;也可以修改为AMD的形式,然后使用requirejs进行加载 $.get('./world.json', function (json) { //注册到地图中。 echarts.registerMap('...

    qt实现echart和百度地图附加多选combox控件

    这通常涉及到添加一个模型来存储可选项,以及修改选择逻辑,使用户可以同时选择多个条目。为了实现这个功能,我们需要覆盖一些关键的方法,如`currentIndexChanged()`和`addItems()`,并可能需要使用...

    Angularjs-echarts 点击事件

    Angular-echarts是 wangshijun对echarts利用Angular封装的组件,github地址https://github.com/wangshijun/angular-echarts。附件只是在源码例子里上添加了点击事件。

    以中国为中心Echart世界地图实例

    总的来说,这个“以中国为中心Echart世界地图实例”为我们提供了一个很好的起点,学习如何使用ECharts定制地图,包括设置地图中心、调整比例尺、添加交互效果,以及结合数据进行可视化。开发者可以根据自己的需求,...

    兼容手机端的echart例子,数据为静态的,当demo用

    这通常涉及到响应式设计,包括图表的自动缩放、布局调整以及触摸事件的处理。此示例中,开发者已经考虑到了这些因素,使得图表在手机端可以正常显示和交互。 接着,我们来看其中包含的三种图表类型: 1. **折线图*...

    下拉框选择事件动态加载echart数据

    -- 下拉框选项在这里添加 --&gt; // ECharts图表初始化 var myChart = echarts.init(document.getElementById('main')); ``` 接下来,我们需要实现下拉框的事件监听。通常我们会使用JavaScript或jQuery来...

    各种echart图形示例

    在本压缩包中,"各种echart图形示例"显然是一个包含多种ECharts图表实例的集合,可能是HTML、JavaScript或者JSON文件,用于展示ECharts的各种功能和用法。 ECharts支持的图形类型广泛,包括但不限于: 1. 折线图...

    QT与Echart交互生成图形化表格

    QT与Echart交互生成图形化表格是一种常见的技术实践,它结合了C++的QT框架和JavaScript的Echart库,使得开发者能够利用QT的系统级功能和Echart的丰富图表展示能力,实现桌面应用中的可视化数据展示。以下是关于这个...

    echart 实例

    ECharts 提供了丰富的API和扩展接口,允许开发者自定义图表样式、添加自定义图例、轴标签等,满足各种个性化需求。 总结,ECharts是一个强大且灵活的JavaScript可视化库,通过掌握其基本使用、图表类型、数据格式...

    echart主题

    echart主题,echart主题,echart主题,echart主题, echart主题

    Echarts添加蒙层(刷子),功能: 可拉伸拖拽+触发事件

    4.绑定拖拽事件。 基础文章目录如下: 文章链接:...

    echart最全省市经纬度

    echart最全省市经纬度下载直接可用echart最全省市经纬度下载直接可用echart最全省市经纬度下载直接可用echart最全省市经纬度下载直接可用echart最全省市经纬度下载直接可用

    echart 3.1 源代码

    源代码揭示了这些交互事件的监听和处理机制。 4. **组件系统**:ECharts 包含可复用的组件,如坐标轴、图例、提示框等。通过源码,我们可以了解这些组件的设计模式和它们如何组合成完整的图表。 5. **性能优化**:...

    Echart在android基本使用

    然而,你提到的是"Echart在Android基本使用",这涉及到将 ECharts 库集成到 Android 应用程序中的过程。在 Android 中使用 ECharts,我们需要通过一些额外的步骤来实现,因为 ECharts 原本是为 Web 开发设计的。 1....

    百度echart地图完成版

    这些资源可以帮助用户快速理解和使用ECharts地图功能,可能包括如何加载地图数据、设置地图区域、添加交互功能、调整颜色和样式等方面。 在深入讲解ECharts地图功能时,我们可以关注以下几个关键知识点: 1. **...

    echart拓扑图单节点拖拽互不影响demo

    在这个"echart拓扑图单节点拖拽互不影响demo"中,`index.vue`文件很可能是包含了ECharts实例创建、事件监听和数据管理的Vue组件代码。具体实现细节,例如如何配置ECharts选项,如何处理拖拽事件,以及如何与后端交互...

    echart统计图

    关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于...

Global site tag (gtag.js) - Google Analytics