在做项目的过程中，总会遇到这样或者那样的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. LG Gram 2018 z980 白

    因为今年8代处理器i5的双核变成了四核,感觉是个换电脑的好时机,本来打算买macbook,但是6月的发布会并没有发布,于是开始寻找一些比较有特点的笔记本电脑. 了解了这样一款笔记本 LG GRAM 1 ...

  2. 喜马拉雅FM

    import requestsimport jsonstart_url ='https://www.ximalaya.com/revision/play/album?albumId=3595841&a ...

  3. 紫书 例题 9-9 UVa 10003 (区间dp+递推顺序）

    区间dp,可以以一个区间为状态,f[i][j]是第i个切点到第j个切点的木棍的最小费用 那么对于当前这一个区间,枚举切点k, 可以得出f[i][j] = min{dp(i, k) + dp(k, j) ...

  4. @MapperScan 和 @ComponentScan 区别

    1.首先@MapperScan和@ComponentScan都是扫描包 2.@ComponentScan是组件扫描注解,用来扫描@Controller  @Service  @Repository这类 ...

  5. Android 第三方分享中遇到的问题以及解决方案

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 第三方登录和分享过程中难免遇到各种纠结的问题,下面将我遇到的分享给大家. 先说第三方登录 1.首先要 ...

  6. 新手学，java使用分水岭算法进行图像切割（一）

    近期被图像切割整的天昏地暗的,在此感谢老朋友周洋给我关于分水岭算法的指点!本来打算等彩色图像切割有个完满的结果再写这篇文章,可是考虑到到了这一步也算是一个阶段,所以打算对图像切割做一个系列的博文,于是 ...

  7. 带你彻彻底底弄懂Scroller

    Scroller的使用 这是一个滑动帮助类.并不能够使View真正的滑动,而是依据时间的流逝.获取插值器中的数据.传递给我们.让我们去配合scrollTo/scrollBy去让view产生缓慢滑动,产 ...

  8. elasticsearch index 之 create index（二）

    创建索引需要创建索引并且更新集群index matedata,这一过程在MetaDataCreateIndexService的createIndex方法中完成.这里会提交一个高优先级,AckedClu ...

  9. js设计模式--------基本概念的理解

    1.闭包,前面已经说过,这里不再做说明 2.封装    对于JS而言,他不像java一样存在私有,公有 ,可以让对象在一些细节方面存在差异,降低他们的耦合程度,对数据做一些约束,我们可以更容易调试,封 ...

  10. #学习笔记#——JavaScript 数组部分编程（四）

    7.合并数组 arr1 和数组 arr2.不要直接修改数组 arr,结果返回新的数组 function concat(arr1, arr2) { return arr1.concat(arr2); } ...