echarts ajax请求demo
<body>
<!--为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="width: 1000px;height:600px;margin-left: 20px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {};
var seriesData = []
var xAxisData = [];
$(function () {
$.ajax({
type: 'GET',
url: 'admin/logData',
dataType: 'JSON',
success: function (res) {
if(res.code !="000"){
return;
}
var data = res.data;
for(var i=0;i<data.length;i++){
xAxisData.unshift(data[i].hour);
seriesData.unshift(data[i].count);
}
setOptions(xAxisData,seriesData);
}
}); })
function setOptions(xAxisData,seriesData){
option = {
title: {
text: '访问次数',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
data:['访问次数']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data: xAxisData,
},
{
type: 'category',
boundaryGap: true,
data: (function (){
var res = [];
return res;
})()
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '访问次数',
max: 10,
min: 0,
boundaryGap: [1, 1]
},
{
type: 'value',
scale: true,
name: '访问次数',
max: 10,
min: 0,
boundaryGap: [1, 1]
}
],
series: [
{
name:'访问次数',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data:seriesData
},
{
name:'访问次数',
type:'line',
data:seriesData
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}; </script>
</body>
请求数据参考：https://www.cnblogs.com/SimonHu1993/p/11021929.html
echarts ajax请求demo的更多相关文章
- JQuery ajax请求struts action实现异步刷新的小实例
这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...
- C#后台HttpWebRequest模拟跨域Ajax请求，注册Windows服务到服务器上
项目需求,暂且叫A.B公司吧.我们公司需要从A公司哪里读取机器上的数据,放到我们数据库中.然后再将数据库中存的数据,提供一个接口,B公司来调用,大概这个意思. 好了,言归正传.这个是之前做好的界面,用 ...
- jQuery实现的分页功能，包括ajax请求，后台数据，有完整demo
一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- echarts通过ajax请求展示多叉树
背景:在sqlserver使用过程中经常由于各种原因会出现阻塞,并发数较高,很难肉眼看出那个session阻塞了其他process,通过sql查询出根源也需要大量的重复操作才能够找到. 因此就有这方面 ...
- Vue中使用echarts，ajax请求的远程数据赋值给图表不刷新的问题和解决办法
问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...
- 一步步学习javascript基础篇（9）：ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
- 配置Chrome支持本地（file协议）的AJAX请求
什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...
- ajax请求过程中下载文件在火狐下的兼容问题
项目中碰到的问题,记录如下. 需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片p ...
随机推荐
- Centos7:MyCat安装,配置及使用
解压缩 使用,默认端口8066 ./mycat start //启动 ./mycat stop //停止 ./mycat restart //重启
- JavaScript函数尾调用与尾递归
什么是函数尾调用和尾递归 函数尾调用与尾递归的应用 一.什么是函数的尾调用和尾递归 函数尾调用就是指函数的最后一步是调用另一个函数. //函数尾调用示例一 function foo(x){ retur ...
- JavaWeb【一、简介】
原计划上周完成的内容,硬是过了一个清明拖到了这周,工作上还有很多东西没做...明天抓紧看把,争取这周末搞定 内容简介:(学习完后会重新梳理调整) 1.JavaWeb[一.简介] 2.JavaWeb[二 ...
- 读书笔记《Oracle从入门到精通》
目录 一.SQL基础 1.SQL种类 2.常用数据类型 3.DDL 4.约束 5.DML语句 二.SELECT语句 1.结果集'*'与指定列 2.拼接符 || 3.substr函数 4.instr函数 ...
- three.js之创建坐标系网格
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first thr ...
- 自动化测试 selenium 测试软件安装
一.自动化测试优点 1.对程序的回归测试更方便.在程修改的比较平凡的时候,表现的更明显. 2.可以代替测试人员运行更繁琐的测试,也可以代替测试人员不可能完成的操作(比如连续点击50次) 3.更好的 ...
- 《Python基础教程》第二章：列表和元组（1）
列表可以修改,元组则不能 字符串就是一个由字符组成的序列 使用分片操作来访问一定范围内的元素,分片操作的实现需要提供两个索引作为边界,第一个索引的元素是包含在分片内的,而第二个不包含在分片内. 如果分 ...
- AspectJ注解支持
<aop:aspectj-autoproxy/> 配置aspectj启动 AspectJAutoProxyBeanDefintionParser implements BeanDefini ...
- NTP服务及时间同步
环境: centos7 server 192.168.2.171 client 192.168.2.173.192.168.2.174 整体思路:173.174同步171的时间,171定时同 ...
- 下载Mybatis源码
百度搜索关键字:Mybatis 点击第二个选项,为啥不是第一个?因为卡. 打开之后,长这个样子: 点击画红圈的位置,进入github源码库: 发现,进入的太深了.点击mybatis-3,进到外层目录, ...