【前端图表】echarts实现散点图x轴时间轴

话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日。

图片.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',
                        0.5,
                        "没翻身"
                    ],
                    [
                        '2017-03-02',
                        0.5,
                        "翻身"
                    ]
                ];
                var textStyle = {
                    color: '#333',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 14,
                };
                option = {
                    xAxis: {
                        type: 'time',
                        name: '时间轴',

                    },
                    yAxis: {
                        type: 'value',
                        name: '次数值',

                        max: 1,
                        min: 0,
                    },
                    series: [{
                        name: '',
                        data: data,
                        type: 'scatter',
                        symbolSize: 40
                    }]
                };

                MyScatter.setOption(option);
            });
        </script>
    </body>

</html>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏浅探ARKit

初识ARKit iOS卷

用于显示虚拟(3D模型)与现实(相机采集回来的数据)结合起来的view,传统的UIView并不能直接显示3D模型。

42718
来自专栏机器之心

资源 | Facebook开源DrQA的PyTorch实现:基于维基百科的问答系统

选自GitHub 机器之心编译 参与:Panda 今年 4 月,斯坦福大学和 Facebook 人工智能研究所在 arXiv 发布了一个基于维基百科的开放域问题...

3545
来自专栏数据结构与算法

1020 孪生蜘蛛

1020 孪生蜘蛛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 在G城保卫...

3015
来自专栏刘望舒

Android 人脸识别之人脸注册

2892
来自专栏HansBug's Lab

【LATEX】个人版latex论文模板

以下是我的个人论文模板,运行环境为Xelatex(在线ide:Sharelatex.com) 鉴于本人常有插入程序的需求,故引用了lstlisting \Req...

31312
来自专栏吉浦迅科技

让NVIDIA Jetson AGX Xavier火力全开的秘密

之前我们写过让Jetson TX2火力全开的秘密,让大家知道命令行工具nvpmodel能够定义一组参数,从而有效地定义给定功率的性能。

1853
来自专栏数据结构与算法

P1498 南蛮图腾

题目描述 自从到了南蛮之地,孔明不仅把孟获收拾的服服帖帖,而且还发现了不少少数民族的智慧,他发现少数民族的图腾往往有着一种分形的效果(看Hint),在得到了酋长...

3558
来自专栏专知

【干货】TensorFlow协同过滤推荐实战

【导读】本文利用TensorFlow构建了一个用于产品推荐的WALS协同过滤模型。作者从抓取数据开始对模型进行了详细的解读,并且分析了几种推荐中可能隐藏的情况及...

51911
来自专栏生信技能树

一篇文章学会ChIP-seq分析(下)

写在前面:《一篇文章学会ChIP-seq分析(上)》《一篇文章学会ChIP-seq分析(下)》为生信菜鸟团博客相关文章合集,共九讲内容。带领你从相关文献解读、资...

5737
来自专栏生信技能树

lncRNA实战项目-第三步-了解参考基因组及注释文件

下载原始测序数据: 在GEO数据库搜索GSE87182, 这里没有直接给出ftp地址,需要先从BioProject找到SRA号,可以得到RNA-Seq的SRA的...

3255

扫码关注云+社区