echarts 单击和双击实现程序代码

时间：2014-08-08 编辑：简简单单来源：一聚教程网

所谓的模拟就是用javascript的timer定时器，进行模拟2次单击的时间差。

通用例子：

setTimeout

在jQuery的$(document).ready(function(){})里面直接开写：

代码如下

复制代码

//定义setTimeout执行方法
var TimeFn = null;
$('div').click(function () {
    // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //执行延时
    TimeFn = setTimeout(function(){
        //do function在此处写单击事件要执行的代码
    },300);
});
$('div').dblclick(functin () {
     // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //双击事件的执行代码
})

从测试结果来看，如果前后两次点击的时间在 300ms 左右的时候，还是很容易出现 click 和 dblclick 事件被“同时”调用的情况，而如果间隔的时间更短或更长，则只会有 click 或 dblclick 事件。

至此，能一定程度上避免双击(dblclick)时触发单击(click)。

在echarts上的实现比较简单，只有在myChart绑定事件：EVENT.MAP_SELECTED。其他图形报表根据事件来，有得是click。

代码如下

复制代码

require([
            'echarts',
            'echarts/chart/line', //使用线性图，加载line模块
            'echarts/chart/map'
        ], function (ec) {
            // 基于已有dom,初始化图表

            ecConfig = require('echarts/config');
            zrEvent = require('zrender/tool/event');
            myChart = ec.init(document.getElementById('main'));
            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
                debugger
                var len = mapType.length;
                var mt = mapType[curIndx % len];
                if (mt == 'china') {
                    // 全国选择时指定到选中的省份
                    var selected = param.selected;
                    for (var i in selected) {
                        if (selected[i]) {
                            mt = i;
                            while (len--) {
                                if (mapType[len] == mt) {
                                    curIndx = len;
                                }
                            }
                            firstSeleted = mt;
                            break;
                        }
                    }
                } else {
                }
                seleted = mt;
                a += 1;
                timer1 = setTimeout(e2, 300);
            });
            myChart.setOption(option, true);
        });
        function e2() {
            clearTimeout(timer1);
            if (a == 2) {

                alert("双击" + seleted);
                //双击需要判断在哪个页面双击如，全国页面双击，或者省页面双击
                curIndx = 0;
                mt = 'china';
                option.tooltip.formatter = '点击进入该省
{b}:{c}';
                option.series[0].itemStyle.normal.label.formatter = '{a}:{b}';
                option.series[0].mapType = seleted;
                option.title.subtext = seleted + ' （点击切换）';
                option.series[0].data = [];
                parent.sendParamData(firstSeleted, a);
            }
            if (a == 1) {
                curIndx = 0;
                mt = 'china';
                alert("单击" + seleted);

                option.tooltip.formatter = '点击返回全国
{b}:{c}';
                //调用父页面的javascript 方法传入
                option.series[0].mapType = seleted;
                option.title.subtext = seleted + ' （点击切换）';
                option.series[0].data = [];
                //parent.sendParamData(firstSeleted,a);
            }
            if (a >=2) {
                curIndx = 0;
                mt = 'china';
            }
            a = 0;
        }


        function dataXRand(data) {
            //          myChart.clear();
            var arr = [];
            var arrData = data.split(";");
            for (var i = 0; i < arrData.length; i++) {
                var currentData = arrData[i];
                var arrCurrentData = currentData.split(":");
                var jsonData = { name: arrCurrentData[0], value: parseInt(arrCurrentData[1]) };
                arr.push(jsonData);
            }
            option.series[0].data = arr;
            myChart.setOption(option, true);
        }

上一个： WordPress短代码shortcode使用方法
下一个： disucz x2.5发帖上传图片按钮不显示无法上传图片

推荐专题

最新下载

热门教程

echarts 单击和双击实现程序代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程