<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的更多相关文章

  1. JQuery ajax请求struts action实现异步刷新的小实例

    这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...

  2. C#后台HttpWebRequest模拟跨域Ajax请求，注册Windows服务到服务器上

    项目需求,暂且叫A.B公司吧.我们公司需要从A公司哪里读取机器上的数据,放到我们数据库中.然后再将数据库中存的数据,提供一个接口,B公司来调用,大概这个意思. 好了,言归正传.这个是之前做好的界面,用 ...

  3. jQuery实现的分页功能，包括ajax请求，后台数据，有完整demo

    一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...

  4. 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 ...

  5. echarts通过ajax请求展示多叉树

    背景:在sqlserver使用过程中经常由于各种原因会出现阻塞,并发数较高,很难肉眼看出那个session阻塞了其他process,通过sql查询出根源也需要大量的重复操作才能够找到. 因此就有这方面 ...

  6. Vue中使用echarts，ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

  7. 一步步学习javascript基础篇（9）：ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  8. 配置Chrome支持本地（file协议）的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...

  9. ajax请求过程中下载文件在火狐下的兼容问题

    项目中碰到的问题,记录如下. 需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片p ...

随机推荐

  1. win10上使用php与python实现与arduino串口通信

    注意: php 需要php7,安装及开启php_dio.dll com口按照实际的进行设置,如果不知道可以打开arduino编辑器进行查看 可以与用户实现命令行交互,但是效率过慢,不清楚如何优化,使用 ...

  2. Linux之远程文件传输

    1)scp scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读re ...

  3. href="javascript:show_login()"意思

    整句话意味着当你点击一个超链接时,你会触发函数show_login. Href是一个超链接,通过单击该超链接触发. javascript:后面是JS代码 show_login():表示JS的函数的油烟 ...

  4. 基于Scrapt框架的全站数据爬取

    创建scrapy工程项目,除了爬虫文件中的代码需要略微修改,其他模块用法相同(如中间件,管道等): 爬虫文件代码流程 导入链接提取器 from scrapy.linkextractors import ...

  5. linux工具之iostat

    iostat 是I/O  statistics(输入/输出统计)缩写iostat工具将对系统磁磁盘活动进行监视iostat属于sysstat软件包可以用yum   install   sysstat ...

  6. java 如何读取src根目录下的属性文件

    在java项目中,如何获取src根目录下的属性文件/资源文件呢? 有如下三种方式: 方式一: InputStream in = Test.class .getResourceAsStream(&quo ...

  7. jenkins+docker+docker-compose持续集成

    一.前期准备 1.宿主机安装docker,传送门 2.宿主机安装JDK,传送门 3.宿主机安装maven,传送门 4.宿主机安装git yum install git 5.宿主机安装jenkins,传 ...

  8. DNS如何工作

    上一篇文章(什么是DNS)中,我们解释了 DNS 所涉及到的一些术语,接下来我们来看看 DNS 这个系统是如何工作的? 从高层次上看,这个系统非常简单,但是当你关注细节时,它又非常复杂.总的来说,它是 ...

  9. Linux磁盘分区的实用管理命令

    系统环境:Centos6.7 命令信息: 1.lsblk  列出分区信息,可以查看分区的光在目录和使用情况  (读取内存中的分区表信息) 2.fdisk 用来创建MBR分区(也可以创建GPT分区,但是 ...

  10. mysqldump恢复

    mysqldump的恢复操作比较简单,因为备份的文件就是导出的SQL语句,一般只需要执行这个文件就可以了,可以通过以下的方法. 方法一 [root@zstedu andyxi3306]# mysql ...