现在位置首页 / Jquery/Jquery Mobile /正文

echarts实现自动显示tooltip

作者: IT小兵 | 2016年11月29日| 热度:℃ | 评论: |参与:

最近需要实现echarts图形中hover效果轮播(即tooltip在各个数据点上轮流显示)的功能,以下就是我学习的一个过程,只是提供思路,具体场景需要自己修改。(仅针对echarts 2.2.7及以下版本,最后的代码有3.0以上的使用方法)

 

关于echarts大家可以查看官网文档

文档中有这么一段话:

自2.1.8起,我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的,build文件夹下已经包含了由echarts-optimizer生成的单文件:

  • dist(文件夹) : 经过合并、压缩的单文件


    • line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)

    • bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)

    • scatter.js : 散点图

    • k.js : K线图

    • pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)

    • radar.js : 雷达图

    • map.js : 地图

    • force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)

    • chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)

    • funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)

    • gauge.js : 仪表盘

    • eventRiver.js : 事件河流图

    • treemap.js : 矩阵树图

    • venn.js : 韦恩图

    • echarts.js : 这是包含AMD加载器的echarts主文件,需要通过script最先引入

    • chart(文件夹) : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件,根据应用需求可实现图表类型按需加载

  • source(文件夹) : 经过合并,但并没有压缩的单文件,内容同dist,可用于调试

要的就是source文件下面的文件,可以调试,把source下面的echarts-all.js导入自己的工程,在找一个例子就可以运行看效果了。

<div id="chart" style="width: 800px; height: 500px;">
</div>
<span id="hover-console"></span>
<span id="console"></span>
<script src="./js/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('chart'));
    console.log(myChart);
    var option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['销量']
        },
        xAxis : [
            {
                type : 'category',
                data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"销量",
                "type":"bar",
                "data":[5, 20, 40, 10, 10, 20]
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    var ecConfig = 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;
        }
    }
    function eHover(param) {
        var mes = '【' + param.type + '】';
        if (typeof param.seriesIndex != 'undefined') {
            mes += '  seriesIndex : ' + param.seriesIndex;
            mes += '  dataIndex : ' + param.dataIndex;
        }
        document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
    }
    myChart.on(ecConfig.EVENT.HOVER, eHover);
</script>

先说一下大概思路,由于是canvas上面绘图,所以界面上没有对应的dom元素,所以没法用js中的事件来控制。

我们要触发事件,就需要先得到图上面的数据元素,然后再考虑怎么触发事件。 

 

稍微看一下源码,就发现里面经常出现zrender,所以要先弄清楚zrender做什么的,查看zrender资料

看了zrender的介绍,大概知道是用来处理canvas的绘画的,同时还封装了dom的事件(模拟)。

了解了zrender之后还是继续调试看源码,echarts-all.js文件太大,不太方便,可以下载zrender的源码查看对应的代码文件。

 

最开始我是想从例子中的hover事件入手,进行调试查看,最后查看到实际是mousemove事件触发的,然后发现zrender中有个storage。

查看了一下storage:

/**
     * 内容仓库 (M)
     * @alias module:zrender/Storage
     * @constructor
     */
    var Storage = function () {
        // 所有常规形状,id索引的map
        this._elements = {};
        this._roots = [];
        this._displayList = [];
        this._displayListLen = 0;
    };

 是不是发现了新大陆!!!_elements,对,我们要的就是它。

但是怎么得到呢,后面在echarts中找到了getZrender(),添加代码:

 var zrender = myChart.getZrender();
          var elements = zrender.storage._elements;
                  console.log(elements);

运行后可以在console中看见elements的内容:

确实是我们想要的。

 然后就是要处理触发事件了,怎么在指定坐标触发事件呢?网上查了查没查到相关信息,很多网友说的是不能再指定坐标触发事件,当时我就懵逼了!!!

但是想想,zrender里面封装了事件的,可以看看怎么从这里入手,是的,最后找到了解决办法:

zrender.trigger('mousemove', {
zrenderX: style.x,
zrenderY: style.y
});


说的比较粗糙,此文仅供参考,如过您有更好的方法希望能够分享出来,大家一起学习,哈哈!

下面贴上完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .chart {
            height: 500px;
            width: 800px;
        }
    </style>
</head>
<body>
<div id="chart">
</div>
<span id="hover-console"></span>
<span id="console"></span>
<script src="./js/echarts-all.js"></script>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('chart'));
    console.log(myChart);
    var option = {
        tooltip: {
            show: true
        },
        legend: {
            data:['销量']
        },
        xAxis : [
            {
                type : 'category',
                data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"销量",
                "type":"bar",
                "data":[5, 20, 40, 10, 10, 20]
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    var ecConfig = echarts.config;
    function eHover(param) {
        var mes = '【' + param.type + '】';
        if (typeof param.seriesIndex != 'undefined') {
            mes += '  seriesIndex : ' + param.seriesIndex;
            mes += '  dataIndex : ' + param.dataIndex;
        }
        document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
    }
    myChart.on(ecConfig.EVENT.HOVER, eHover);
    //可以获取有效的数据元素,数据元素属性包含坐标点和长宽(如果页面有变化需要重新获取)
    var counts = option.series[0].data.length;
    setTimeout(function() {
        autoHover();
        setInterval(autoHover, 1000 * counts);
    }, 1000);
    function autoHover() {
        var zrender = myChart.getZrender();
        var elements = zrender.storage._elements;
        var times = 0;
        console.log(elements);
        for (var key in elements) {
            var style = elements[key].style;
            //根据series中的一系列name值对elements进行归类排序,然后在进行hover
            //过滤条件需要完善
            if (elements[key]._echartsData) {
                console.log(style);
                (function (style, times) {
                    setTimeout(function () {
                        zrender.trigger('mousemove', {
                            zrenderX: Math.ceil(style.x + style.width/2),
                            zrenderY: Math.ceil(style.y + style.height/2)
                        });
                    }, 1000 * times);
                })(style, times);
                times++;
                times %= counts;
            }
        }
    }
</script>
</body>
</html>

原文:http://www.cnblogs.com/chengwb/p/5833454.html

点击阅读本文所属分类的更多文章: Jquery/Jquery Mobile 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询