• 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);
                        
  • 相关阅读:
    k8s 集群文件共享
    .net core 使用IOptionsXXX读取配置
    docker Dockerfile
    k8s 部署tomcatservice (NodePort通过节点向外提供服务)
    k8s 用Rinetd对外tomcatservice
    k8s 部署应用
    坑爹的matlab除法
    Cygwin/Git与Git Source Control Provider结合时初始目录
    手机电话号码从excel导入的最简单方法
    快捷方式改变电源计划,设置关闭显示器时间
  • 原文地址:https://www.cnblogs.com/liujiale/p/7250876.html
Copyright © 2020-2023  润新知