在做项目的过程中，总会遇到这样或者那样的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. nuxt 关闭ESlint 语法检测

    学习nuxt中在自己编写search组件的时候出现了各种类似于Expected indentation of 0 spaces but found 4的问题 上网搜是因为ESlint语法检测产生的问题 ...

  2. CrawlSpider爬取读书网

    crawlspider用于定义一些规则用于提取页面符合规则的数据,然后继续爬取. 一.开始一个读书网项目 scrapy startproject 项目名称cd 项目名称/项目名称/spidersscr ...

  3. 洛谷 P3040 [USACO12JAN]贝尔分享Bale Share

    P3040 [USACO12JAN]贝尔分享Bale Share 题目描述 Farmer John has just received a new shipment of N (1 <= N & ...

  4. jQuery11 data() : 数据缓存

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 关于ajax访问express服务器的跨域问题

    在学习es6的时候用promise封装了一个ajax <script type="text/javascript"> function getNews(URL) { l ...

  6. Regularized logistic regression

    要解决的问题是,给出了具有2个特征的一堆训练数据集,从该数据的分布可以看出它们并不是非常线性可分的,因此很有必要用更高阶的特征来模拟.例如本程序中个就用到了特征值的6次方来求解. Data To be ...

  7. C/C++(函数)

    函数 函数三要素:函数名,参数,返回值 重点研究函数的输入输出 随机数函数 //产生一组随机数 #include<stdio.h> #include<stdlib.h> #in ...

  8. hdu 1588 Gauss Fibonacci（矩阵嵌矩阵）

    题目大意: 求出斐波那契中的 第 k*i+b 项的和. 思路分析: 定义斐波那契数列的矩阵 f(n)为斐波那契第n项 F(n) = f(n+1) f(n) 那么能够知道矩阵 A = 1 1 1  0 ...

  9. Cannot use isset() on the result of an expression (you can use "null !== expression" instead)

    if (isset($array[2])){ 抛出错误  Cannot use isset() on the result of an expression (you can use "nu ...

  10. thinkphp缓存使用

    thinkphp缓存使用 一.总结 1.这里的缓存不是指的缓存的页面,而是cache,如果你缓存了一个数组,那么你就可以取出这个数组里面的数据进行使用,用法性质和cookie和session有点像 2 ...