`

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报表加打印

    - **第三方库**:如`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('...

    Angularjs-echarts 点击事件

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

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

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

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

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

    echart实例echart实例

    例如,可以通过`on`方法监听事件,自定义图表的交互行为。 5. **自定义主题** ECharts允许开发者自定义图表的主题,包括颜色、字体、边框等,通过`echarts.registerTheme()`方法注册新主题。 6. **多图表联动** ...

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

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

    各种echart图形示例

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

    echart 实例

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

    echart主题

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

    echart最全省市经纬度

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

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

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

    echart 3.1 源代码

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

    东莞中山 Echart地图东莞中山 Echart地图

    东莞中山 Echart地图

    Echart在android基本使用

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

    百度echart地图完成版

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

    echart统计图

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

    echart全国城市坐标

    echart全国城市坐标,json数据:"上海":[121.48,31.22],"嘉定":[121.24,31.4]

    qt 使用Echart 绘图

    - 创建一个新的Qt项目,例如名为`EchartDemo`,并添加一个`WebView`控件。 - 将ECharts库文件(如`echarts.min.js`)放入项目的资源文件夹中,确保在`.pro`文件中正确引用这些资源。 2. **创建HTML页面**: - 在...

Global site tag (gtag.js) - Google Analytics