【前端图表】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 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

Python-OpenCV 处理图像(二):滤镜和图像运算

喜欢自拍的人肯定都知道滤镜了,下面代码尝试使用一些简单的滤镜,包括图片的平滑处理、灰度化、二值化等:

2301
来自专栏图形学与OpenGL

3.6.2 编程实例-河南地图绘制

#include <iostream> #include <fstream> #include<vector> #include <GL/glut.h> usi...

1171
来自专栏智能计算时代

IBM Watson提供的认知计算服务介绍

Cognitive Service Introduction Twitter:@huiwenhan Weibo:@huiwenhan Agenda Wats...

3578
来自专栏一棹烟波

OpenGL进行简单的通用计算实例

博主作为OpenGL新手,最近要用OpenGL进行并行的数据计算,突然发现这样的资料还是很少的,大部分资料和参考书都是讲用OpenGL进行渲染的。好不容易找到一...

2857
来自专栏编程微刊

【前端统计图】echarts多条折线图和横柱状图实现

2693
来自专栏小特工作室

基于iTextSharp的PDF文档操作

  公司是跨境电商,需要和各种物流打交道,需要把东西交给物流,让他们发到世界各地。其中需要物流公司提供一个运单号,来追踪货物到达哪里?!   最近在和DHL物流...

27510
来自专栏CreateAMind

Sim-to-Real: 仿真训练直接迁移到真实机器人

851
来自专栏CreateAMind

paper:Multi-Level Discovery of Deep Options

981
来自专栏落影的专栏

OpenGL ES实践教程(二)摄像头采集数据和渲染

教程 这一篇教程是摄像头采集数据和渲染,包括了三部分内容,渲染部分-OpenGL ES,摄像头采集图像部分-AVFoundation和图像数据创建纹理部分-G...

4555
来自专栏ImportSource

自己动手写区块链-公钥和私钥

在区块链中,我们需要用到公钥和私钥。在之前的自己动手写区块链-发起一笔交易(Java版)中,我们就使用了公钥和私钥。其中公钥是钱包的地址,私钥则类似钱包的密码。

2166

扫码关注云+社区

领取腾讯云代金券