在做项目的过程中，总会遇到这样或者那样的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. cors跨域的前端实现---根据资料整合的

    1.服务端 搁response中增加Access-Control-Allow-Origin:‘*’ eg:  context.Response.AddHeader("Access-Contr ...

  2. Windows 一键关闭UAC、防火墙、IE配置脚本

    有时候,在环境需求下,需要关闭windows防火墙,UAC,以及IE选项配置. 对不懂电脑来说是比较麻烦的,老是得教他们,关键还记不住…… so,以下脚本就可以解决这个问题 注:脚本 需要右键 以管理 ...

  3. 【VC++学习笔记四】MFC应用程序中框架类的获取

    一.文档类中 获取视图: 先获取主窗体,在根据主窗体获取视图 pMain->GetActiveDocument();注意类型转换 由于文档中可能包含多个视图,可以按照下面函数获取: CView* ...

  4. POJ——T3160 Father Christmas flymouse

    Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 3496   Accepted: 1191 缩点,然后每个新点跑一边SPFA ...

  5. 洛谷 P1889 士兵站队

    P1889 士兵站队 题目描述 在一个划分成网格的操场上, n个士兵散乱地站在网格点上.由整数 坐标 (x,y) 表示.士兵们可以沿网格边上.下左右移动一步,但在同时刻任一网格点上只能有名士兵.按照军 ...

  6. 在XEN上启动guest时loopback设备不足

    现象: 通常出现在用户挂载了多个img到guest上,会发现无法再创建guest或者无法启动guest的现象. /var/log/xen/xen-hot-plug.log中错误如下: xenstore ...

  7. 排序(1)---------选择排序(C语言实现)

    选择排序的基本思想: 选择排序(Selection sort)是一种简单直观的排序算法. 它的工作原理例如以下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素 ...

  8. 4.Maven之（四）Maven命令

    转自:https://blog.csdn.net/u012152619/article/details/51473410

  9. 3.常用Bracket插件

    转自:https://blog.csdn.net/iso_wsy/article/details/52608205 1.Emmet 如果你从事Web前端开发的话,对该插件一定不会陌生.它可以加快你的 ...

  10. 10.cocos2d坐标系

    一.笛卡儿坐标系 OpenGl坐标系为笛卡儿右手系.x向右,y向上,z向外.在cocos2d-lua中坐标系原点在屏幕的左下角,x向右,y向上,z则是指的zorder(层级). 二.世界坐标系,本地坐 ...