Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ECharts折线图渲染json格式数据(格式为对象)

ECharts折线图渲染json格式数据(格式为对象)

作者头像
王小婷
发布于 2025-05-20 02:42:53
发布于 2025-05-20 02:42:53
4900
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
        <script>
            // 折线图
            $.ajax({
                url: "test.json",
                data: {},
                type: 'GET',
                success: function(data) {
                    console.log(JSON.stringify(data))
                    hrFun(data.echatX, data.echatY);
                },
            });
            // 心率
            var hrChart = echarts.init(document.getElementById("main"));
            function hrFun(x_data, y_data) {
                hrChart.setOption({
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器,坐标轴触发有效
                            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['心率值']
                    },
                    grid: {
                        left: '3%',
                        right: '20%',
                        bottom: '20%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: x_data,
                    }],
                    yAxis: [{ // 纵轴标尺固定
                        type: 'value',
                        scale: true,
                        name: '心率值',
                        min : 0, // 就是这两个 最小值
                        max : 'dataMax', // 最大值
                        splitNumber: 20,
                        boundaryGap: [0.2, 0.2]
                    }],
                    series: [{
                        name: '心率',
                        type: 'line',
                        data: y_data
                    }]
                }, true);
            }
        </script>
    </body>
</html>

json数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "echatX": ["2020-11-18 00:08:36", "2020-11-18 00:18:42", "2020-11-18 00:28:46", "2020-11-18 00:38:33",
        "2020-11-18 00:48:43", "2020-11-18 00:58:36", "2020-11-18 01:08:40", "2020-11-18 01:18:36", "2020-11-18 01:28:42",
        "2020-11-18 01:38:39", "2020-11-18 01:48:45", "2020-11-18 01:58:35", "2020-11-18 02:08:34", "2020-11-18 02:18:32",
        "2020-11-18 02:28:38", "2020-11-18 02:38:37", "2020-11-18 02:48:44", "2020-11-18 02:58:49", "2020-11-18 03:08:38",
        "2020-11-18 03:18:42", "2020-11-18 03:28:35", "2020-11-18 03:38:44", "2020-11-18 03:48:35", "2020-11-18 03:58:50",
        "2020-11-18 04:08:40", "2020-11-18 04:18:46", "2020-11-18 04:28:48", "2020-11-18 04:38:46", "2020-11-18 04:48:35",
        "2020-11-18 04:58:46", "2020-11-18 05:08:38", "2020-11-18 05:18:34", "2020-11-18 05:28:46", "2020-11-18 05:38:35",
        "2020-11-18 05:48:41", "2020-11-18 05:58:38", "2020-11-18 06:08:41", "2020-11-18 06:18:49", "2020-11-18 06:28:46",
        "2020-11-18 06:38:43", "2020-11-18 06:48:40", "2020-11-18 06:58:47", "2020-11-18 07:08:36", "2020-11-18 07:18:35",
        "2020-11-18 07:28:51", "2020-11-18 07:38:45", "2020-11-18 07:48:39", "2020-11-18 07:58:42", "2020-11-18 08:08:51",
        "2020-11-18 08:18:37", "2020-11-18 08:28:43", "2020-11-18 08:38:46", "2020-11-18 08:48:54", "2020-11-18 08:58:52",
        "2020-11-18 09:08:51", "2020-11-18 09:18:36", "2020-11-18 09:28:41", "2020-11-18 09:38:42", "2020-11-18 09:48:48",
        "2020-11-18 09:58:52", "2020-11-18 10:08:48", "2020-11-18 10:18:38", "2020-11-18 10:28:49", "2020-11-18 10:38:44",
        "2020-11-18 10:48:37", "2020-11-18 11:08:49", "2020-11-18 11:18:49"
    ],
    "echatY": [80, 112, 90, 91, 104, 99, 107, 106, 121, 105, 106, 109, 102, 79, 81, 64, 70, 89, 108, 86, 62, 60, 74, 71,
        112, 89, 81, 117, 90, 62, 90, 100, 99, 104, 103, 93, 113, 114, 74, 86, 115, 80, 119, 113, 96, 104, 111, 98, 93, 101,
        93, 101, 60, 78, 79, 93, 69, 98, 124, 104, 108, 100, 104, 74, 100, 102, 75
    ],
    "echatY2": []
}

图片.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Echarts分段折线图图例样式visualMap颜色修改
王小婷
2025/05/19
1260
Echarts分段折线图图例样式visualMap颜色修改
【前端统计图】echart折线图ajax请求json数据
先上图,写了一个echart折线图ajax请求json数据的小demo,帮助自己更好的理解图表知识。
王小婷
2019/07/16
1.4K0
【前端统计图】echart折线图ajax请求json数据
Echarts统计图自适应
之前做折线图的时候,y轴数据都是写成固定了的,如果是统计步数的话,y轴坐标就要根据走了多少步来自适应了,如果没写的话,就会出现以下的这种情况,折线超出了整个坐标抽,就是一个bug了,只要修改一下属性即可,今天写一下Echarts统计图自适应。
王小婷
2019/11/27
1K0
Echarts柱状图折线图混合使用
前面用到的更多的是单个统计图,有些统计图里面,使用柱状图折线图混合使用的,下面写的是用ajax+json本地模拟数据,发送请求,渲染出一个柱状图折线图混合图表。
王小婷
2025/05/19
1000
Echarts柱状图折线图混合使用
SSH攻击ip列表【不定时更新】
  有时我们的linux主机经常被ssh攻击,主要是密码爆破,ytkah通过查看centos登录记录发现一个异常ip是112.85.42.181,搜索了相关资料发现已经有人也碰到类似情况,以下是收集的SSH攻击IP列表,有遇到相同问题的朋友建议屏蔽下列ip
ytkah
2020/09/01
3.2K7
Echarts请求不同格式的json数据处理
在前面已经说到过关于Echarts请求json数据处理: 【前端统计图】echart折线图ajax请求json数据: https://www.jianshu.com/p/9e5c7e2cff05
王小婷
2019/10/15
3.2K0
Echarts请求不同格式的json数据处理
【前端统计图】echart多条折线图ajax请求json数据
关于echart折线图,用到的地方和场景也很多,昨天写的demo,基础之上可以继续扩展,今天的demo是echart多条折线图ajax请求json数据。
王小婷
2019/07/18
2K0
【前端统计图】echart多条折线图ajax请求json数据
欧拉计划——方阵中的最大乘积
08 02 22 97 38 15 00 40 00 75 04 05 07 78 52 12 50 77 91 08 49 49 99 40 17 81 18 57 60 87 17 40 98 43 69 48 04 56 62 00 81 49 31 73 55 79 14 29 93 71 40 67 53 88 30 03 49 13 36 65 52 70 95 23 04 60 11 42 69 24 68 56 01 32 56 71 37 02 36 91 22 31 16 71 51 67 63 89 41 92 36 54 22 40 40 28 66 33 13 80 24 47 32 60 99 03 45 02 44 75 33 53 78 36 84 20 35 17 12 50 32 98 81 28 64 23 67 10 26 38 40 67 59 54 70 66 18 38 64 70 67 26 20 68 02 62 12 20 95 63 94 39 63 08 40 91 66 49 94 21 24 55 58 05 66 73 99 26 97 17 78 78 96 83 14 88 34 89 63 72 21 36 23 09 75 00 76 44 20 45 35 14 00 61 33 97 34 31 33 95 78 17 53 28 22 75 31 67 15 94 03 80 04 62 16 14 09 53 56 92 16 39 05 42 96 35 31 47 55 58 88 24 00 17 54 24 36 29 85 57 86 56 00 48 35 71 89 07 05 44 44 37 44 60 21 58 51 54 17 58 19 80 81 68 05 94 47 69 28 73 92 13 86 52 17 77 04 89 55 40 04 52 08 83 97 35 99 16 07 97 57 32 16 26 26 79 33 27 98 66 88 36 68 87 57 62 20 72 03 46 33 67 46 55 12 32 63 93 53 69 04 42 16 73 38 25 39 11 24 94 72 18 08 46 29 32 40 62 76 36 20 69 36 41 72 30 23 88 34 62 99 69 82 67 59 85 74 04 36 16 20 73 35 29 78 31 90 01 74 31 49 71 48 86 81 16 23 57 05 54 01 70 54 71 83 51 54 69 16 92 33 48 61 43 52 01 89 19 67 48
lop
2019/03/13
5840
欧拉计划 Problem11
题目: 方阵中的最大乘积 在如下的20×20方阵中,有四个呈对角线排列的数被标红了。
Max超
2019/01/21
4250
ECharts折线图渲染json格式数据(格式为数组)
ECharts折线图渲染json格式数据(json格式,为数组) 需要对数组进行循环取值,将取到的值分别赋值给x轴和y轴
王小婷
2021/04/09
3.3K0
ECharts折线图渲染json格式数据(格式为数组)
ajax+json实现echarts多个统计图显示
前端时常会遇到这样的问题,有一个单独的模块用作统计图,将多个折线或者柱状图,混合使用,下面的例子是用ajax+json模拟了调用接口实现echarts多个统计图显示。 样式布局暂时就不放在上面了,以下是从项目里面复制过来的一个小的demo,代码仅供参考。
王小婷
2019/09/19
2.7K0
Echarts统计图标题居中显示
title: { text: '健康人数统计', // subtext:'', x: 'center', y: '7px', textStyle: { color: '#3A7BD5',
王小婷
2020/11/24
4.3K0
Echarts统计图标题居中显示
AkShare-股票数据-终止和暂停上市股票
作者寄语 新增终止和暂停上市股票数据接口 更新接口 "stock_info_sh_delist" # 上海证券交易所暂停和终止上市 "stock_info_sz_delist" # 深证证券交易所暂停和终止上市 终止(暂停)上市-深证 接口: stock_info_sz_delist 目标地址: 深证证券交易所 描述: 获取深证证券交易所终止(暂停)上市股票 限量: 单次获取深证证券交易所终止(暂停)上市股票 输入参数 名称 类型 必选 描述 indicator str Y indicator="终止上
数据科学实战
2020/07/23
7220
Echarts+ajax实现叠堆柱状图
示例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--统计图 --> <div class="row"> <div id="main" style="width: 900px; height: 350px; margin-top:80px;"></div>
王小婷
2019/12/11
9140
算法科普:神秘的 DES 加密算法
DES 算法是一种常见的分组加密算法,由IBM公司在1971年提出。DES 算法是分组加密算法的典型代表,同时也是应用最为广泛的对称加密算法。本文将详细讲述DES 的原理以及实现过程。
五分钟学算法
2019/09/03
8.4K1
算法科普:神秘的 DES 加密算法
xx外买APP设备指纹风控分析
电商行业的各个业务场景面临不同的风险种类:客户端漏洞利用、协议逆向、注册小号、商品信息被抓取、推广渠道作弊、营销活动被薅羊毛、商品秒杀等。 大多的防御方案是通过端上安全、链路安全、接口和数据传输安全保护,再借助设备安全核验技术、人机识别及时发现各种模拟行为和异操作风险、同时集合风控策略实现多节点防护。
我是小三
2021/10/13
7.6K1
[资源分享]计算机科学速成课
推荐 程序员的你一定要看,不是程序员的也可以看看,我已经安利刚中考完的我妹妹看了(培养程序媛...)
爬虫
2018/07/25
9920
[资源分享]计算机科学速成课
每天学一个 Linux 命令(115):accton
accton 命令是 Linux 系统进程管理命令之一,它的作用是打开进程统计,如果命令后面不带任何参数,就是关闭进程统计。
民工哥
2021/04/21
7790
使用 ZoomEye 寻找 APT 攻击的蛛丝马迹
作者:Heige(a.k.a Superhei)@知道创宇404实验室 时间:2020年5月25日
Seebug漏洞平台
2020/05/29
6560
使用 ZoomEye 寻找 APT 攻击的蛛丝马迹
键盘中断事件及其相关---小记
当我们在按下按键时,键盘会把按键的扫描码发送到主板的接口电路中,具体说就是端口60H。
书童小二
2018/09/03
1.6K0
键盘中断事件及其相关---小记
相关推荐
Echarts分段折线图图例样式visualMap颜色修改
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验