在做项目的过程中，总会遇到这样或者那样的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. Copying GC (Part one)

    目录 GC复制算法 copy()函数 将传递给自己的参数复制,然后递归复制其孩子 new_obj()函数 执行过程 缺点 Cheney的GC复制算法 copy()函数 执行过程 被隐藏的队列 优缺点 ...

  2. 重大漏洞：Bitlocker成摆设，多款固态硬盘硬件加密均可被绕过

    荷兰拉德堡德大学的两名研究人员日前发表论文,描述了固态硬盘流行加密软件Bitlocker中的关键漏洞.固态硬盘需要口令来加密和解密其上存储的内容,但该口令可以被绕过. 荷兰拉德堡德大学的两名研究人员日 ...

  3. Windows系统的关机、休眠和睡眠状态究的区别

    原文:Windows系统的关机.休眠和睡眠状态究的区别 相信有些小伙伴跟我一样,对电脑的一些常用操作或名词不太熟悉,今天我们就简单来聊聊电脑的关机.休眠和睡眠状态究竟有何区别吧! 如果你在电脑左下角的 ...

  4. HOJ——T 2430 Counting the algorithms

    http://acm.hit.edu.cn/hoj/problem/view?id=2430 Source : mostleg Time limit : 1 sec Memory limit : 64 ...

  5. 设计模式实例(Lua)笔记之六（Adapter模式）

    1.描写叙述 "我"在 2004 年的时候带了一个项目,做一个人力资源管理,该项目是我们总公司发起的项目,公司一共同拥有 700 多号人,包含子公司,这个项目还是比較简单的,分为三 ...

  6. android-开发环境相关概念

    Android中IDE.ADT.SDK.JDK.NDK的解释 1. IDE: Intelligent Development Environm的简称.即智能开发环境.是一种开发工具.常用的IDE有ad ...

  7. POJ 3042 区间DP（费用提前计算相关的DP）

    题意: 思路: f[i][j][1]表示从i到j的区间全都吃完了 现在在j点 变质期最小是多少 f[i][j][0]表示从i到j的区间全都吃完了 现在在i点 变质期最小是多少 f[i][j][0]=m ...

  8. c#数据类型格式转换大全

    来源:网络 1.DateTime   数字型         System.DateTime currentTime=new System.DateTime();    1.1 取当前年月日时分秒   ...

  9. sql中去掉换行符和回车符

    sql 中,char(13),char(10)或nchar(13),nchar(10)可表示SQL中的回车换行符,但是会以空格的形式显示.replace(replace(字段名,char(10), ' ...

  10. log大全

    http://www.iconfont.cn/search/index?q=%E6%88%91%E7%9A%84&page=3