Echarts+ajax实现一个简单折线图

最新推荐文章于 2024-06-19 23:29:50 发布
最新推荐文章于 2024-06-19 23:29:50 发布
阅读量357 收藏 7
点赞数
分类专栏： Echarts 文章标签： ajax js echarts
原文链接：https://www.jianshu.com/p/212cb6c0fde4
版权

html

<!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>

test.json

{
    "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": []
}

浏览器页面
在这里插入图片描述

bettercat
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts折线图,使用ajax动态加载数据
qq_37430574的博客
08-15 3780
官方API地址:http://echarts.baidu.com/echarts2/doc/doc.html 最权威的API手册,自己有什么不确定的属性一定要查官方API,度娘搜出的属性,不一定正确 效果图: 图1: 整体 图2:  提示框tooltip,当鼠标停留在某一拐点时出现的提示框 js代码: //环境监测 func
php+echarts+ajax完成一个简单的折线图
boosir的博客
06-28 4245
最近在完成企业报表图形处理时用了百度echarts，梳理一点以php为后端完成web页面的Ajax刷新图形 此处以最近在用的thinkphp5.0框架为例，多余内容不赘述 首先php页面随便建立一个控制器 public function index(){ $arr=array( 'title'=>array('text'=>'优惠券领取情况','subtext'=>'副标题
echart ajax json,echart多条折线图ajax请求json数据
weixin_42097967的博客
08-06 208
//折线图$.ajax({url:"test.json",data: {},type:‘GET‘,success:function(data) {console.log(JSON.stringify(data))bloodFun(data.echatX, data.echatY,data.echatY2);},});//基于准备好的dom，初始化echarts实例var bloodChart = ...
echarts 折线图 Ajax调用后台接口获取动态数据显示
li836779537的博客
08-28 2786
不说废话，注意：不要忘了引入JS <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.min.js"></script> 折线图效果图： 代码： <body> <div id="main" style="width: 100%;height:400px;"></div> </body> <script type="text/javas
echarts+node+ajax实现时间天气服务器_echarts气象图
最新发布
2301_76348014的博客
06-19 751
由于考虑到请求的时间问题，我将数据存储在data.json中。==》得到对应的DOM接口 =+=》插入数据，设置css样式。实现的就是通过fs模块读取数据，然后来得到数据，先得到对应的DOM结构，然后设置js与css样式。设置echarts图表时，最重要的时data数据。数组，而echarts的option设置的数据。1.七天的时间，以及他们对应的最高，最低温度。关于这个前端页面，相信各位的实力，应该不难。来实现项目的计划样子。2.七天的温度，以及对应的温馨提示信息。这个七天的信息都是通过网上数据得到的。
Echarts+ajax实现多条折线图
祈澈菇凉
11-20 1229
需求： 统计不同的时间段里面，监测到的血压数据，分别是高血压的数据和低血压的数据，需要使用两条折线图表示出来，这里就要用到了Echarts的多条折线图的demo了，并且使用ajax请求json数据，将请求到的数据渲染到图表里面进行表示~~ 示例代码如下: <!DOCTYPE html> <html> <head> <meta cha...
原生ajax+ECharts
qq_46926869的博客
11-12 462
我们有一个项目，需要使用到ECharts实现简单的各类图表的展示，我们实现起来主要的难点就在于：不同图表所需要的数据格式，比如柱状图和折线图等，需要两组数据，对应横坐标的参数和主要数据；但是饼状图不同它需要的则是类似于Json类数据的格式，所以不同的表类型不同导致所需要的数据也不相同。
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一个基于SVG/VML/Canvas的高性能、跨浏览器、跨平台的图表库，支持多种图表类型，如折线图、柱状图、饼图、散点图等。它提供了一套完整的API和交互设计，使得开发者能够方便地进行图表配置和定制，实现...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图-Java代码类资源
02-23
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如饼图、折线图、柱状图等，用于在Web应用中展示数据。在这个Java代码类资源中，开发者利用Echarts与AJAX、Java以及MySQL数据库相结合，实现了...
Echarts教程之通过Ajax实现动态加载折线图的方法
10-18
主要介绍了Echarts教程之通过Ajax实现动态加载折线图的方法，需要的朋友可以参考下
Echarts--Ajax动态实现折线图
www_96的博客
11-28 1165
Echarts–Ajax动态实现折线图 第一次使用Echarts。利用springboot搭建java项目框架，前端利用Echarts的折线图模板实现数据展示。 1.搭建springboot框架 详细查看上一篇博客 2.Echarts素材 百度下载需要的素材 3.修改代码 注意： 用ajax需要导入jquery $.ajax <!DOCTYPE html> <html sty...
Echarts高级进阶教程(4)：大数据量处理ajax异步加载折线图数据实现心电图动画效果的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-12 1399
图表渲染 <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var option = { tooltip: { trigger: 'axis', axisPointer: { type: "cross".
ajax与echarts 的交互应用
suannian143的博客
03-30 2115
第一步：引入echarts js文件和jquery。&lt;script src="js/echarts/echarts-3.2.3.min.js"&gt;&lt;/script&gt; &lt;script src="js/jquery/jquery-3.1.1.min.js"&gt;&lt;/script&gt;第二步：html搭建，设置需要加载图表的div 的id属性（根据需求写css样式）...
通过ajax异步交互实现echarts绘图,并附带疫情数据可视化项目。
dyjffgkvfg的博客
05-02 3751
目录前言1.引入库2.flask链接MYSQL读取数据3.HTML页面echarts绘图4.结果实现总结：ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。AJAX = Asynchronous JavaScript and XML（异步的 JavaS
ajax获取数据Echarts填充折线图
weixin_41288274的博客
08-19 241
var myChart = echarts.init(document.getElementById('main1')); var Mon = [[${monday}]]; var Tue = [[${tuesday}]]; var Wed = [[${wednesday}]]; var Thu = [[${thursday}]]; var Fri = [[${friday}]]; var Sat = [[${saturday}]]; var Sun = [[${sunday}]]; $.ajax({ .
逐步回归法的基本步骤_NA专栏 | 刘敏 张克 朱佳桦 郝志伟 | 基于SD法的地下城市链接空间后评估研究 ——以上海五角场为例...
weixin_39641103的博客
11-26 1318
文章摘要城市链接空间是指起到城市公共走廊作用的建筑内部空间，一般呈现为商业综合体的内部通道。以上海五角场地下城市链接空间为例，借助使用后评估原理与语义学解析法，在实态调研与问卷调查的基础上，对该空间的空间格局、空间尺度、空间与交通组织效率、功能业态布局、步行环境营造、景观装饰风格等方面进行了基于使用者反馈的使用后评估，并结合该城市空间的实态调研情况，对其提出了合理的使用后评估意见。通过对...
Echarts line折线图使用(vue)
dianpiyue3875的博客
04-26 1590
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/line') // 以下的组件按需引入 require('echarts/lib/component/tooltip') // tooltip...
echarts通过ajax加载数据渲染图表（折线图）
莫不静好
07-11 8868
折线图 折线图 官网示例 后台返回数据类型 实现echarts效果要求的数据类型 代码部分 最终展示效果 官网示例 官网示例链接 后台返回数据类型 实现echarts效果要求的数据类型 代码部分 分析：X轴月数据 Y轴申请数量 填充数据为—每个月中产品变化趋势 难点： 如果该产品在某月没有对应数量变...
'echarts'折线图实现用电量折线图
06-13
好的，以下是实现用电量折线图的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts 折线图示例</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <!-- 用来展示折线图的 DOM 容器 --> <div id="myChart" style="width: 800px;height: 600px;"></div> <script> // 基于准备好的 DOM，初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('myChart')); // 指定图表的配置项和数据 var option = { title: { text: '用电量折线图' }, tooltip: {}, legend: { data:['用电量'] }, xAxis: { data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: {}, series: [{ name: '用电量', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在上述代码中，我们通过 `echarts.init` 方法初始化了一个 ECharts 实例，并且通过 `option` 对象定义了折线图的配置项和数据。其中，`title` 属性用于设置图表的标题，`tooltip` 属性用于设置提示框组件，`legend` 属性用于设置图例组件，`xAxis` 属性用于设置 X 轴，`yAxis` 属性用于设置 Y 轴，`series` 属性用于设置系列数据。 在 `series` 中，我们设置了一个名为 `用电量` 的系列，类型为线性图，数据为 `[120, 132, 101, 134, 90, 230, 210]`，表示一周内每天的用电量。通过 `myChart.setOption(option)` 方法将配置项和数据应用到图表中，最终呈现出一张用电量折线图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值