在做项目的过程中，总会遇到这样或者那样的bug，这个时候就要看自己的动手能力有多强了，着手解决了一个bug之后，整个人都感觉很开心，端午下班之前遇到了一个小问题，echarts散点图鼠标划过散点的时候，没有显示从后台拿过来的数据，今天一看，原来是忘记写代码了，没有写返回数据，又怎么会返回需要的信息并且展示在前端界面？

紧跟着上一篇进行完善，本篇文章主要是解决echarts散点图鼠标划过散点显示信息的问题，篇幅较短，大约需要两分钟读完。


只需要在option里面写上返回需要的信息代码。

 tooltip: {

                    /*返回需要的信息*/

                    formatter: function(param) {

                        var value = param.value;

                        return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[2] + '(' + value[1] + ')' +

                            '</div>';

                    }

                },

改造后的效果如下，echarts散点图鼠标划过散点显示翻身的次数。



示例完整代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>五分钟上手之散点图</title>

        <!-- 引入 echarts.js -->

        <script src="js/echarts.min.js"></script>

        <script src="js/jquery-1.11.3.js"></script>

    </head>

    <body>

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

        <div style="height: 500px;width: 1000px;" id="Scatter"></div>

        <script type="text/javascript">

            $(document).ready(function() {

                var MyScatter = echarts.init(document.getElementById('Scatter'));

                var data = [

                    ['2012-03-01',

                        1,

                        "翻身"

                    ],

                    [

                        '2013-06-01',

                        2,

                        "没翻身"

                    ],

                    [

                        '2014-03-02',

                       3,

                        "翻身"

                    ],

                    [

                        '2015-03-03',

                       5,

                        "翻身"

                    ],[

                        '2016-03-04',

                       7,

                        "翻身"

                    ]

                ];

                var textStyle = {

                    color: '#333',

                    fontStyle: 'normal',

                    fontWeight: 'normal',

                    fontFamily: '微软雅黑',

                    fontSize: 14,

                };

                option = {

                     tooltip: {

                    /*返回需要的信息*/

                    formatter: function(param) {

                        var value = param.value;

                        return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[2] + '(' + value[1] + ')' +

                            '</div>';

                    }

                },

                    xAxis: {

                        type: 'time',

                        name: '时间轴',

                    },

                    yAxis: {

                        type: 'value',

                        name: '次数值',

                        max: 13,

                        min: 0,

                    },

                    series: [{

                        name: '',

                        data: data,

                        type: 'scatter',

                        symbolSize: 40

                    }]

                };

                MyScatter.setOption(option);

            });

        </script>

    </body>

</html>

注：

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

【前端图表】echarts散点图鼠标划过散点显示信息的更多相关文章

  1. easyui toopTip，鼠标划过悬浮，显示一个小提示框的方法

    easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...

  2. Unity鼠标移动到物体上显示信息

    相信大家玩游戏的时候,鼠标移动到游戏装备上,都会显示装备的的具体信息,那么接下来就写代码把,废话不多说. 下面是 效果图 鼠标移动到装备位置显示的信息,鼠标移动不在装备区域后不现实信息,下面是代码 : ...

  3. echarts柱状图鼠标移动在柱状图上显示数据给数据添加单位

    解决问题: 关键代码如下: tooltip : { trigger: 'axis', formatter:function(params){ return params[0].name+"& ...

  4. 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...

  5. canvas图表(4) - 散点图

    原文地址:canvas图表(4) - 散点图 今天开始完成散点图,做完这一节,我的canvas图表系列就算是完成了,毕竟平时最频繁用到的就是这几类图表了:柱状,折线,饼图,散点.经过编写canvas图 ...

  6. Web前端图表绘制JQuery插件jqplot

    在此之前使用了Chart.js.Highcharts,首先了解一下这两款插件的优势与不足,然后再来了解jqplot. 1.Chart Chart中文官网:http://chartjs.cn/ 1.1优 ...

  7. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  8. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  9. 鼠标划过图片title 提示实现

    鼠标划过图片title 提示实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. Ubuntu18.04上使用LLDB调试Chromium Android C++代码。

    ###动机###Chromium Android源代码庞大且复杂.在调试器LLDB下能帮助我们更好的理解代码流程.介绍使用LLDB调试器调试android上chromium的C++代码. [1] 编译 ...

  2. XTUOJ 1238 Segment Tree

    Segment Tree Accepted : 3 Submit : 21Time Limit : 9000 MS Memory Limit : 65536 KB Problem Descriptio ...

  3. Linux局域网登陆响应时间过长

    在局域网中,使用ssh登陆到其他机器上时,有时会出现等待10s以上才能正常登陆的问题. 原因: Linux默认使用dns解析登陆IP,但是在局域网,并没有dns服务器,而且机器上也没有添加 IP与域名 ...

  4. qmake生成Visual Studio工程

    整个Qt在Windows中都可以通过批处理来编译,当编译好Qt后,会生成qmake.exe. 在没有安装Qt-VS-Addin的情况下,如何使用别人提供的Qt *.pro项目文件呢? 使用qmake可 ...

  5. 虚拟局域网（VLAN）技术在企业网管理中的应用

    虚拟局域网(VLAN)技术在企业网管理中的应用 1.VLAN介绍     所谓VLAN 是指处于不同物理位置的节点根据需要组成不同的逻辑子网,即一个VLAN 就是一个逻辑广播域,它可以覆盖多个网络设备 ...

  6. 【深入篇】Andorid中常用的控件及属性

    TextView  android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/phone/map/al ...

  7. Self-Taught Learning

    the promise of self-taught learning and unsupervised feature learning is that if we can get our algo ...

  8. eclipse工作空间配置导出

    由于工作与学习的需求,需要使用不同的工作空间.而eclipse的新建工作空间其他以前的配置都没有继承过来,那么就得重新配置一遍. 经过学习其他前辈们的经验与自己的摸索总结一下3种方法: 方法一:使用e ...

  9. deep-in-es6(六)

    箭头函数 Arrow Functions 箭头函数在JavaScript诞生是就存在,JavaScript建议在HTML注释内包裹行内脚本,这样可以避免不支持JS代码的浏览器将JS显示为文本. < ...

  10. PHP 获取完整URL地址

    /** * 获取当前完整URL * @return string */ function get_url() { $sys_protocal = isset($_SERVER['SERVER_PORT ...