【前端图表】echarts散点图鼠标划过散点显示信息

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

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

图片.png

只需要在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散点图鼠标划过散点显示翻身的次数。

图片.png

图片.png

示例完整代码如下:

<!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后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据挖掘DT机器学习

《小美好》短评文本情感分析+生成词云

因为最近看了一下《致我们单纯的小美好》,虽然情节是有点“二”吧,但是看了觉得真的很怀念初高中的日子,一时玩心大发,于是就想搞点有意思的东西。。。首先去爬了豆瓣...

3869
来自专栏数据小魔方

用R语言复盘美国总统大选结果~

这两天各种社交媒体都被美国大选的消息刷屏,各种段子满天飞,把平时不怎么关注政治的小编都吸引了。 美国大选的投票数据,给小编的写作提供了非常宝贵的案例数据,毕竟四...

5234
来自专栏玉树芝兰

如何用Python处理自然语言?(Spacy与Word Embedding)

本文教你用简单易学的工业级Python自然语言处理软件包Spacy,对自然语言文本做词性分析、命名实体识别、依赖关系刻画,以及词嵌入向量的计算和可视化。

1231
来自专栏码神联盟

人脸识别 | Java 实现 AI人工智能技术 - 人脸识别-附源码

一是这几天确实比较忙,工作是饭碗,不能砸了吧,不然康哥吃啥,孩子的奶粉又得买了。靠工资肯定不够奶粉啊,还得有自己的一些其他项目,您说对吧,另外还在总结《Spri...

3.8K7
来自专栏数据小魔方

R语言数据地图——全球填色地图

今天这篇是昨天美国地图的续篇,同样的方法技巧,不同的对象。 整个过程以及代码并没有太大差别,只要拿到世界地图素材,根据之前的代码,自己修改参数和指标名称以及引用...

5567
来自专栏C/C++基础

CUDA Study Notes

SSE(Streaming SIMD Extensions,单指令多数据流扩展)指令集是Intel在Pentium III处理器中率先推出的。其中包含70条指令...

1122
来自专栏深度学习与数据挖掘实战

干货|PyTorch实用代码段集锦

Facebook公司开源的深度学习框架PyTorch越来越火,PyTorch易于上手。本文节选github中PyTorch的常用实用代码片段,供大...

2067
来自专栏落影的专栏

GPUImage详细解析(十一)美颜+人脸识别

前言 一个群友用琨君的美颜录制和讯飞离线人脸识别SDK做了一个demo,功能是录制视频,要求有美颜,并且能识别人脸并放置贴图。但是遇到一个问题: 录制过程能过...

4415
来自专栏小樱的经验随笔

CTF---密码学入门第四题 困在栅栏里的凯撒

困在栅栏里的凯撒分值:10 来源: 北邮天枢战队 难度:易 参与人数:4531人 Get Flag:2124人 答题人数:2285人 解题通过率:93% 小...

2945
来自专栏Golang语言社区

剖析Go的读写锁

package main import ( "fmt" "sync" "time" ) func main() { rw := new(...

36515

扫码关注云+社区