Nick Peng
Nick Peng

Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感

文章目录

  • 一、简介
  • 二、增加loading加载动效
    • 2.1 实现原理
    • 2.2 实现步骤
    • 2.3 实现效果图
  • 三、完整源代码及解析

一、简介

Echarts 图表在异步请求数据时，如果加载时间较长，一个空的坐标轴放在画布上会让用户觉得是不是产生 bug 了，

因此需要一个 loading 的动画来提示用户数据正在加载。

好文章 记得收藏+点赞+关注额 ！！！

---- Nick.Peng


二、增加loading加载动效

2.1 实现原理

  • 利用 ECharts 提供的 showLoading方法显示动画，数据加载完成后再调用 hideLoading 方法隐藏加载动画。

2.2 实现步骤

  • 定义一个function()，完成配置项，定义一个空模板，并显示一个空坐标；
  • 调用myChart.showLoading();方法显示 loading 动画；
  • 调用fetchData();方法，发起异步请求；
  • 定义一个fetchData();方法，动态加载数据，并将成功返回的数据添加到空模板中；
  • 在异步请求成功返回后，调用myChart.hideLoading();方法隐藏加载动画；

2.3 实现效果图

  • Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感_第1张图片

三、完整源代码及解析

  • 可作为模板，使用时只需要修改其中的配置项即可
    
<html>
<head>
    <meta charset="utf-8">
    <title>异步加载loading动效title>
    
    <div id="main" style="width: 600px;height:400px;">div>
    
    <script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.js">script>
    
    <script src="js/echarts.js">script>
head>
<body>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        $(function() {
            // 指定配置项，显示标题和空的坐标轴
            myChart.setOption({
                title: {
                    text: 'ECharts异步加载loading动效示例' // 图表标题
                },
                tooltip: {},
                legend: {
                    left: 300,          // 图例距Dom左侧的距离
                    data:['销量']       // 图例
                },
                xAxis: {
                    data: []
                },
                yAxis: {},              // y轴默认自动
                series: [{
                    // 柱状图
                    type: 'bar',
                    data: [],
                    // 显示标签数量
                    label: {
                        normal: {
                            show: true,
                            position: 'top'     // 显示位置
                        }
                    },
                    //配置样式
                    itemStyle: {
                        //通常情况下样式
                        normal:{
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params){
                                var colorList = ['#8dc63f','#add8e6','#ffb6c1','#f37b1d','#A6A6D2','#F0E68C','#CA8EC2'];
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时，显示强调效果
                        emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }],
            });
            // 显示loading动画
            myChart.showLoading();
            fetchData();
        })

        // 延迟3秒，模拟动态异步加载数据
        function fetchData() {
            setTimeout(function() {
                $.get('data/data.json').done(function(data){
                    // 数据加载完成后，再调用 hideLoading 方法隐藏加载动画
                    myChart.hideLoading();
                    // 填入数据到上面空模板
                    myChart.setOption({
                        xAxis: {
                            data: data.type_list
                        },
                        series: [{
                            // 注意：！！！根据名字对应到相应的系列
                            name: '销量',
                            data: data.num_list
                        }]
                    })
                })
            },3000)
        }

    script>
body>
html>

你可能感兴趣的:(Echarts,Echarts异步加载数据,增加loading动画)

  • 2024亚马逊数据分析！ KJYHS 数据分析数据挖掘
    整体财务数据23净销售额：全年净销售额达6380亿美元，同比增长11%。净利润：全年净利润为592亿美元，较上年同期的304亿美元增长95%。经营活动现金流：经营活动现金流达1159亿美元，同比增加了36%。各业务板块数据AWS业务1第四季度营收：2024年第四季度，AWS业务实现营收288亿美元，同比增长19%；经营利润达106亿美元，同比增长34亿美元。广告业务5全年营收：2024年广告业务总
  • 代理IP助力AI图像处理，开启行业新篇章 傻啦嘿哟 关于代理IP那些事儿人工智能tcp/ip图像处理
    目录一、代理IP技术简介二、代理IP在AI图像处理中的应用1.提升数据访问速度2.增强数据处理能力3.突破网络限制三、代理IP在AI图像处理中的实际案例案例一：AI图像生成软件案例二：AI动画创作四、代理IP技术的未来展望五、结语在科技日新月异的今天，AI图像处理技术以其广泛的应用前景和强大的处理能力，正深刻改变着我们的世界。从人脸识别、自动驾驶到医学影像分析，AI图像处理技术无处不在，发挥着不可
  • Node.js 中的 Event 模块详解 小灰灰学编程 Node.jsnode.js前端
    Node.js中的Event模块是实现事件驱动编程的核心模块。它基于观察者模式，允许对象（称为“事件发射器”）发布事件，而其他对象（称为“事件监听器”）可以订阅并响应这些事件。这种模式非常适合处理异步操作和事件驱动的场景。1.概念1.1事件驱动编程事件驱动编程是一种编程范式，程序的执行流程由事件（如用户输入、文件读取完成、网络请求响应等）决定。Node.js的核心设计理念就是基于事件驱动的非阻塞I
  • 一键安装KES-RWC读写分离集群 banjin kingbase人大金仓
    一、KES-RWC读写分离集群介绍金仓数据库读写分离集群软件在金仓数据守护集群软件的基础上增加了对应用透明的读写负载均衡能力。该类集群中所有备库均可对外提供查询能力，从而减轻了主库的读负载压力，可实现更高的事务吞吐率；该软件支持在多个备库间进行读负载均衡。其成员可能包括主节点（primarynode）、备节点（standbynode）、辅助节点（witnessnode）、备份节点（reponode
  • 事件驱动框架 MacRsh 开源单片机stm32c语言设计模式
    事件驱动框架文档事件驱动框架是一种异步事件处理机制,它通过事件分发和回调的方式,可以有效地提高系统的异步处理能力、解耦性和可扩展性。事件驱动框架包含两个主要组件:事件服务器和事件客户端。事件服务器用于接收和分发事件,它内部维护一个事件队列用于存储待处理事件和一个事件列表用于存储注册的事件客户端。事件客户端用于处理特定类型的事件,它需要注册到事件服务器并提供一个回调函数。当事件发生时,事件服务器会将
  • 微信小程序之自定义轮播图实例 —— 微信小程序实战系列（3） 2401_84910072 程序员微信小程序小程序
    由于微信小程序，整个项目编译后的大小不能超过1M查看做轮播图功能的一张图片大小都已经有100+k了那么我们可以把图片放在服务器上，发送请求来获取。index.wxml：这里使用小程序提供的组件autoplay：自动播放interval：自动切换时间duration：滑动动画的时长current：当前所在的页面bindchange：current改变时会触发change事件由于组件提供的指示点样式比
  • 数据集 handpose_x_3d-wider_world V1 室外自然场景三维手势 ＞＞ DataBall Xian-HHappy DataBall数据集合（计算机视觉）-数据也可如此美好3d
    数据集handpose数据集handpose_x_3d-wider_worldV1室外自然场景三维手势>>DataBall数据特点：*场景多样性*包括有无遮挡多样性*有无拿物体多样性数据标注信息包括：二维21关键点，三维21关键点，三维网格点，图像相机内参。想要进一步了解，请联系。DataBall助力快速掌握数据集的信息和使用方式，会员享有百种数据集，持续增加中。示例：助力快速掌握数据集的信息和使
  • 基于Kitti数据集实现MMDetection3D点云物体检测训练 Xian-HHappy 技术知识点kitti三维点云无人驾驶MMDetection3D人工智能计算机视觉目标检测
    DataBall助力快速掌握数据集的信息和使用方式，会员享有百种数据集，持续增加中。需要更多数据资源和技术解决方案，知识星球：“DataBall-X数据球(free)”贵在坚持！-----------------------------------------------------------------------------------------------MMDetection3D环境安
  • AI服务器散热黑科技：让芯片“冷静”提速 小深ai硬件分享 人工智能深度学习服务器
    AI服务器为何需要散热黑科技在人工智能飞速发展的当下，AI服务器作为核心支撑，作用重大。从互联网智能推荐，到医疗疾病诊断辅助，从金融风险预测，到教育个性化学习，AI服务器广泛应用，为各类复杂人工智能应用提供强大算力。然而，AI服务器在运行时面临着严峻的散热挑战。随着人工智能技术的不断发展，对AI服务器的计算能力要求越来越高，这使得服务器的功率密度急剧增加。以GPT-4的训练为例，它需要大量的GPU
  • 后端重载和重写的区别 kidding723 后端重载重写OverridingOverloading
    重载相同的方法名，形参数量不同或者参数顺序不同或者参数类型不同称为方法重载重写方法名和形参列表相同重写方法前提:必须存在继承关系(1)方法重载是：一个类中定义了多个方法名相同,而他们的参数的数量不同或数量相同而类型和次序不同,则称为方法的重载(Overloading)。(2)方法重写是：在子类存在方法与父类的方法的名字相同,而且参数的个数与类型一样,返回值也一样的方法,就称为重写(Overridi
  • redis 如何保证缓存和数据库一致性？解决策略如下 Foolforuuu 缓存数据库redis
    Redis与数据库的数据保持一致，传统策略是先读缓存，未命中则读数据库并回填缓存，但方式这种维护成本较高。下面是几种传统常见的策略及其优缺点：【策略1】先写MySQL。成功后，更新或删除Redis中的对应数据。优点：简单易实现。缺点：存在短暂的不一致。【策略2】先写Redis。异步或定时将Redis数据同步到MySQL。优点：提升写性能。缺点：同步延迟可能导致数据丢失。【策略3】读Redis，命
  • 百万架构师第四十课：RabbitMq：RabbitMq-工作模型与JAVA编程｜JavaGuide 后端
    来源：https://javaguide.netRabbitMQ1-工作模型与Java编程课前准备预习资料Windows安装步骤Linux安装步骤官网文章中文翻译系列环境说明操作系统：CentOS7JDK：1.8Erlang：19.0.4或最新版RabbitMQ：3.6.12或最新版版本对应关系典型应用场景跨系统的异步通信。人民银行二代支付系统，使用重量级消息队列IBMMQ，异步，解耦，削峰都有体
  • ECharts 柱状图X轴或Y轴空值无数据不占位不渲染不展示 大橙子- echarts前端javascript
    效果查看：将option复制到echarts解析垂直方向：//垂直方向代码示例option={legend:{//这里data省略echarts会自动匹配，也可自行配置},xAxis:[//关键点：多个X轴进行匹配{type:'category',position:'bottom',data:['2021','']//空字符串则不会展示},{type:'category',position:'bo
  • python whoosh clisy python开源搜索
    原文地址：http://whoosh.ca/wikiWhoosh:高效的纯python全文搜索组件Whoosh是一个纯python实现的全文搜索组件。Whoosh不但功能完善，还非常的快。Whoosh的作者是MattChaput，由SideEffectsSoftware公司开发。项目的最初用于Houdini（SideEffectsSoftware公司开发的3D动画软件）的在线帮助系统。SideEf
  • 勒索病毒攻击：如何应对和恢复 测试者家园 网络安全软件测试质量效能web安全安全网络运维项目管理病毒
    近年来，勒索病毒（Ransomware）已经成为全球信息安全领域最具破坏力的威胁之一。无论是个人用户，还是大中型企业，甚至政府机构，勒索病毒的攻击频率和破坏性日益增加。2020年及2021年，勒索病毒攻击不仅数量激增，且其攻击手法、目标和传播方式也变得更加复杂、精密和具有针对性。勒索病毒是一种恶意软件，它通过加密受害者的文件、系统或网络，迫使受害者支付赎金以恢复访问权限。虽然支付赎金可能暂时解决问
  • Java集合之ArrayList（含源码解析 超详细） &星辰入梦来& Java集合javapython开发语言
    1.ArrayList简介ArrayList的底层是数组队列，相当于动态数组。与Java中的数组相比，它的容量能动态增长。在添加大量元素前，应用程序可以使用ensureCapacity操作来增加ArrayList实例的容量。这可以减少递增式再分配的数量。ArrayList继承于AbstructList，实现了List，RandomAccess，Cloneable，Java.io.Serializa
  • 【机器学习】基于3D CNN通过CT图像分类预测肺炎 MUKAMO AIPython应用机器学习深度学习人工智能神经网络3DCNN
    1.引言1.1.研究背景在医学诊断中，医生通过分析CT影像来预测疾病时，面临一些挑战和局限性：图像信息的广度与复杂性：CT扫描生成的大量图像对医生来说既是信息的宝库也是处理上的负担。每组CT数据可能包含数百张切片，医生必须迅速审阅这些图像，以便捕捉到病变的微小细节。这种庞大的信息量要求医生在有限的时间内做出精准诊断，但同时也增加了漏诊或误诊的风险。部分容积效应也可能模糊小病变的边界，使得准确诊断变
  • 一个Python的轻量级搜索工具--Whose Ai_绘画小南 python开发语言
    本文将简单介绍Python中的一个轻量级搜索工具Whoosh，并给出相应的使用示例代码。Whoosh简介Whoosh由MattChaput创建，它一开始是一个为Houdini3D动画软件包的在线文档提供简单、快速的搜索服务工具，之后便慢慢成为一个成熟的搜索解决工具并已开源。Whoosh纯由Python编写而成，是一个灵活的，方便的，轻量级的搜索引擎工具，现在同时支持Python2、3，其优点如下：
  • STMicroelectronics 系列：STM32F1 系列_（8）.STM32F1系列的USART接口及编程 kkchenkx 单片机开发stm32嵌入式硬件单片机
    STM32F1系列的USART接口及编程1.USART接口概述USART（UniversalSynchronousAsynchronousReceiverTransmitter）是一种串行通信接口，可以支持异步和同步通信模式。在STM32F1系列单片机中，USART接口用于实现与外部设备的串行数据通信，例如与其他单片机、计算机、传感器等设备进行数据交换。USART接口可以配置为多种通信模式，包括U
  • DeepSeek 助力 Vue 开发：打造丝滑的导航栏（Navbar） 宝码香车 #DeepSeekvue.js前端javascriptecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的导航栏（Navbar）前言页面效果指令输入属性定义1.导航栏样式相关2.导航项相关3.响应式相关4.对齐方式相关事件定义1.导航项点击事件2.菜单折叠切换事件其他建议1.可访问性2.动画效果3.图标支
  • 机器学习（1）安装Pytorch CoderIsArt 机器学习与深度学习机器学习pytorch人工智能
    1.安装命令pip3installtorchtorchvisiontorchaudio--index-urlhttps://download.pytorch.org/whl/cu1182.安装过程Log：Lookinginindexes:https://download.pytorch.org/whl/cu118CollectingtorchDownloadinghttps://download.
  • UART协议——异步全双工串行通信方式 dsjljdfniuevf 总线协议接口协议学习UART协议
    文章目录前言一、简介1、优点2、缺点二、数据格式三、波特率1、定义2、波特率和采样频率3、计算四、常见接口电平1、TTL电平2、RS232（负逻辑）3、RS485前言2023.4.22世界地球日一、简介UART：UniversalAsynchronousReceiver/Transmitter，通用异步收发器广泛的应用在各类MCU和SOC产品上“不需要额外的时钟线进行数据的同步传输”。即只要信号拉
  • 如何在Echarts渲染完成后再执行其他代码（如何等待回调函数执行完成后再进行其他操作） 时代的狂 echartsjavascript
    不知道如何描述，举个例子，echarts有finished事件，那么在setOption之后，如果渲染结束就会触发该事件，但是假如渲染时间很长，在setOption之后，我们有些紧随之后的代码需要在finished事件之后执行(实际上setOption之后的代码会立即执行，因为渲染并不会阻塞代码的执行)，此时应该怎么做？如何知道finished事件被触发了？我希望有一个类似于其他语言线程waitt
  • vue面试题|[2025-1-10] ○陈 vue面试题vue.jsjavascript前端
    1.vue和jquery的区别是什么？1.原理不同vue就是数据绑定；jq是先获取dom再处理2.着重点不同vue是数据驱动，jq是着重于页面3.操作不同4.未来发展不同2.vuex的响应式处理vuex是vue的状态管理工具vue中可以直接触发methods中的方法，vuex是不可以的。处理异步，当触发事件的时候，会通过dispatch来访问actions中的方法，actions中的commit会
  • ZBrush：导出与导入ZBrush模型_2024-07-15_19-55-08.Tex chenjj4003 游戏开发zbrush1024程序员节贴图substancepainter数码相机android
    ZBrush：导出与导入ZBrush模型ZBrush模型导出基础了解ZBrush的导出格式ZBrush是一款强大的数字雕塑和绘画软件，它支持多种模型导出格式，以适应不同的下游应用需求。在ZBrush中，最常见的导出格式包括：OBJ:一种广泛支持的3D模型格式，可以包含顶点、面、纹理坐标和法线信息。STL:常用于3D打印，仅包含顶点和面信息，不支持纹理和颜色。FBX:支持动画和骨骼，是游戏和电影行业
  • 深入浅出：CUDA是什么，如何利用它进行高效并行计算 码上飞扬 CUDA
    在当今这个数据驱动的时代，计算能力的需求日益增加，特别是在深度学习、科学计算和图像处理等领域。为了满足这些需求，NVIDIA推出了CUDA（ComputeUnifiedDeviceArchitecture），这是一种并行计算平台和编程模型。本文将带你全面了解CUDA的基本概念、工作原理及其应用场景。一、什么是CUDA？CUDA（ComputeUnifiedDeviceArchitecture）是由
  • 个人简历html网页模板，科技感炫酷html简历模板 孤客网络科技工作室 html+css网页开发html科技前端
    炫酷动效登录页引言在网页设计中，按钮是用户交互的重要元素之一。这样一款黑色个人简历html网页模板，科技感炫酷html简历模板，设计效果类似科技看板图，可帮您展示技能、任职经历、作品等，喜欢这种风格的小伙伴不要犹豫哦。该素材呈现了数据符号排版显示出人形的动画效果，新颖有创意，希望大家能够喜欢。效果预览在开始之前，我们先来看一下最终的效果：实现步骤1.index.html（部分代码）首先，我们需要创
  • FastApi-基于FastApi实现异步接口的传参和调用(7) 写python的鑫哥 FastAPI项目实战fastapipython异步接口传参调用部署
    前言本文是该专栏的第7篇，后面会持续分享FastApi以及项目实战的各种干货知识，值得关注。假如说，现在有这么一个接口需求——需要通过FastApi，实现接收别人传递过来的参数，并对获取参数之后的结果信息进行返回。整个接口功能，需要通过异步来实现。对此，我们基于FastApi，要怎么去实现呢？废话不多说，具体的实现思路以及详细逻辑，跟着笔者直接往下看正文详细内容。（附带完整代码）正文1.依赖库安装
  • 第三日八股文 是钤不是铃 八股文java
    1.Redis中的三种高效缓存读写策略旁路缓存模式：服务端以数据库MySQL为主，Redis为辅，进行存储。写操作：先更新数据库，再删除缓存读操作：先从缓存中读取数据，读取成功则直接返回；读取失败，去数据库中读取，读取完毕后写入缓存中。读写穿透：以Redis为主要的数据存储，依赖Cache服务负责将数据写入数据库中。异步缓存写入：只更新缓存，不利用Cache服务更新数据库，将要消费的消息放入消息队
  • 同步&异步日志系统-设计模式 2401_82609762 设计模式
    六大原则单⼀职责原则（SingleResponsibilityPrinciple）类的职责应该单⼀，⼀个⽅法只做⼀件事。职责划分清晰了，每次改动到最⼩单位的⽅法或类。使⽤建议：两个完全不⼀样的功能不应该放⼀个类中，⼀个类中应该是⼀组相关性很⾼的函数、数据的封装⽤例：⽹络聊天：⽹络通信&聊天，应该分割成为⽹络通信类&聊天类开闭原则（OpenClosedPrinciple）对扩展开放，对修改封闭使⽤建
  • Java 并发包之线程池和原子计数 lijingyao8206 Java计数ThreadPool并发包java线程池
    对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C
  • java编程思想 抽象类和接口 百合不是茶 java抽象类接口
    接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface;
  • [房地产与大数据]房地产数据挖掘系统 comsci 数据挖掘
           随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb
  • 数组队列总结 沐刃青蛟 数组队列
          数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。      以下是数组队列的功能实现代码：   import List.Student; public class
  • Oracle存储过程无法编译的解决方法 IT独行者 oracle存储过程　
    今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN
  • 重装系统之后oracle恢复 文强chu oracle
    前几天正在使用电脑，没有暂停oracle的各种服务。 突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 直接把我的c盘给格式化了 并且清理了注册表，再装系统。 然后的结果就是我的oracl
  • python学习二（ 一些基础语法） 小桔子 pthon基础语法
    紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&
  • svn 常用命令 aichenglong SVN版本回退
    1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio
  • 某小公司面试归来 alafqq 面试
    先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 老拿这些对付毕业生的东东来吓唬我。。 面试官很刁难，问了几个问题，记录下； 1，包的范围。。。public,private,protect. --悲剧了 2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 4，stru
  • 动态数组的存储速度比较 集合框架 百合不是茶 集合框架
    集合框架： 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器
  • 用JS实现一个JS对象，对象里有两个属性一个方法 bijian1013 js对象
    <html> <head> </head> <body> 用js代码实现一个js对象，对象里有两个属性，一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){
  • 探索JUnit4扩展：使用Rule bijian1013 java单元测试JUnitRule
            在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n
  • [Gson一]非泛型POJO对象的反序列化 bit1129 POJO
    当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段，例如泛型集合或者泛型类 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    
  • 【Kakfa五】Kafka Producer和Consumer基本使用 bit1129 kafka
    0.Kafka服务器的配置 一个Broker， 一个Topic Topic中只有一个Partition（）   1. Producer： package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor
  • lsyncd实时同步搭建指南——取代rsync+inotify ronin47
    1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify
  • java-9. 判断整数序列是不是二元查找树的后序遍历结果 bylijinnan java
    public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时，肯定是查找树 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是
  • MySQL的sum函数返回的类型 bylijinnan javaspringsqlmysqljdbc
    今天项目切换数据库时，出错 访问数据库的代码大概是这样： String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows
  • java设计模式之单例模式 chicony java设计模式
    在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构 　　单例模式的特点： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 　　饿汉式单例类   publ
  • javascript取当月最后一天 ctrain JavaScript
    <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont
  • linux tune2fs命令详解 daizj linuxtune2fs查看系统文件块信息
    一.简介： tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 二.用法： Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou
  • 做有中国特色的程序员 dcj3sjt126com 程序员
      从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有
  • Android：TextView属性大全 dcj3sjt126com textview
    android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输
  • tomcat虚拟目录安装及其配置 eksliang tomcat配置说明tomca部署web应用tomcat虚拟目录安装
    转载请出自出处：http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config：存放tomcat的配置文件 temp  ：存放tomcat跑起来后存放临时文件用的 work   ： 当第一次访问应用中的jsp
  • 浅谈：APP有哪些常被黑客利用的安全漏洞 gg163 APP
    首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞：APK 包非常容易被反编译成可读
  • C#根据网址生成静态页面 hvt Web.netC#asp.nethovertree
    HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri
  • SVG 教程 （一） 天梯梦 svg
    SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量
  • 一个简单的java栈 luyulong java数据结构栈
    public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top
  • 基础数据结构和算法八：Binary search sunwinner AlgorithmBinary search
    Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori
  • 12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 刘星宇 c面试
    12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 1.gets()函数 问：请找出下面代码里的问题： #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff));
  • ITeye 7月技术图书有奖试读获奖名单公布 ITeye管理员 活动ITeye试读
    ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾： http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《Java性能优化权威指南》
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他