• 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.type + '】';
        if (typeof param.seriesIndex != 'undefined') {
            mes += '  seriesIndex : ' + param.seriesIndex;
            mes += '  dataIndex : ' + param.dataIndex;
        }
        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);
                        
  • 相关阅读:
    ES 分组排序java实现
    java多线程中的死锁、活锁、饥饿、无锁都是什么鬼?
    Java 虚拟机对锁优化所做的努力
    Docker 核心概念、安装、端口映射及常用操作命令,详细到令人发指。
    20条最最常用的Linux命令讲解
    Linux查看系统配置常用命令
    全面认识Docker和基本指令
    25个深度学习开源数据集
    Docker 简单运用
    一小时学会C# 6
  • 原文地址:https://www.cnblogs.com/liujiale/p/7250876.html
Copyright © 2020-2023  润新知