echart多条折线图ajax请求json数据
时间:2019-09-15
本文章向大家介绍echart多条折线图ajax请求json数据,主要包括echart多条折线图ajax请求json数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天的demo是echart多条折线图ajax请求json数据
两个文件:1,HTML父文件 test.html 2,请求数据的test.json文件
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> </div> </body> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> // 折线图 $.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.init(document.getElementById('main')); // 指定图表的配置项和数据 function bloodFun(x_data, y_data,y2_data) { bloodChart.setOption({ title: { text: '' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: {}, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, data: x_data, }], yAxis: [{ type: 'value' }], series: [{ name: '高血压', type: 'line', areaStyle: { normal: { color: '#fff' //改变区域颜色 } }, itemStyle: { normal: { color: '#8cd5c2', //改变折线点的颜色 lineStyle: { color: '#8cd5c2' //改变折线颜色 } } }, data: y_data }, { name: '低血压', type: 'line', areaStyle: { normal: { color: '#fff' //改变区域颜色 } }, itemStyle: { normal: { color: '#8cd5c2', //改变折线点的颜色 lineStyle: { color: '#8cd5c2' //改变折线颜色 } } }, data: y2_data } ] }); } </script> </html>
请求数据test.json文件:
{ "echatX": [ "2019-07-02", "2019-07-03", "2019-07-04", "2019-07-05", "2019-07-06", "2019-07-07", "2019-07-08", "2019-07-09", "2019-07-10", "2019-07-11", "2019-07-12", "2019-07-13", "2019-07-14", "2019-07-15" ], "echatY": [ 120,121,123,123,125,127,128,129,120,123,122,126,129,122 ], "echatY2": [ 60,64,63,63,65,67,68,69,61,66,65,68,69,65 ] }
代码架构:
原文地址:https://www.cnblogs.com/mahmud/p/11523747.html
- ZOJ 2724 Windows Message Queue(优先队列)
- React多页面应用7(引入eslint代码检查)
- Trie树
- React第三方组件1(路由管理之Router的使用⑤按需加载-下)
- zoj 2876 Phone List
- PHP小知识
- Where's Waldorf?
- POj 1797 Heavy Transportation
- 卡特兰数简介原理性质应用参考:
- UVA Machined Surfaces
- NBUT 1117 Kotiya's Incantation
- React第三方组件1(路由管理之Router的使用④按需加载-上)
- React第三方组件1(路由管理之Router的使用③传参)
- Kindergarten Counting Game
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- springmvc之SessionAttributes注解所引发的异常
- 【tensorflow2.0】处理文本数据-imdb数据
- springmvc之异常处理DefaultHandlerExceptionResolver
- springmvc之返回json类型的数据给前端
- springmvc之mvc:view-controller标签设置可以直接访问的视图
- exec族
- springmvc实例之添加雇员相关信息(二)
- Qt引入第三方库(亲测Qt4和Qt5)
- springmvc之与spring进行整合
- recv&send函数
- setsockopt与getsockopt
- django-模型之(ORM)对象关系映射(一)
- Mybatis学习笔记(二)Mapper的配置问题
- 服务端向客户端传输文件
- 【tensorflow2.0】处理时间序列数据