zou128865
zou128865

ECharts系列 - 柱状图（条形图）实例一

ECharts主页：  http://echarts.baidu.com/index.html

ECharts-2.1.8下载地址：  http://echarts.baidu.com/build/echarts-2.1.8.zip

ECharts官方实例：  http://echarts.baidu.com/doc/example.html

ECharts官方API文档：  http://echarts.baidu.com/doc/doc.html

ECharts系列 - 柱状图（条形图）实例一

1、项目结构

ECharts系列 - 柱状图（条形图）实例一_第1张图片

js文件夹： 下载了ECharts之后，解压缩，如解压后的根目录是echarts-2.1.8，则到echarts-2.1.8\doc\example\www路径下，把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可

echarts.jsp： 在WebRoot根目录下新建echarts.jsp

echarts.jsp

[java]  view plain copy print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.     <title>ECharts实例</title>  
  12.   </head>  
  13.   <body>  
  14.     <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->  
  15.     <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->  
  16.     <div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>  
  17.       
  18.     <!--Step:2 Import echarts.js-->  
  19.     <!--Step:2 引入echarts.js-->  
  20.     <script src="js/echarts.js"></script>  
  21.       
  22.     <script type="text/javascript">  
  23.     // Step:3 conifg ECharts's path, link to echarts.js from current page.  
  24.     // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径  
  25.     require.config({  
  26.         paths: {  
  27.             echarts: './js'  
  28.         }  
  29.     });  
  30.       
  31.     // Step:4 require echarts and use it in the callback.  
  32.     // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
  33.     require(  
  34.         [  
  35.             //这里的'echarts'相当于'./js'  
  36.             'echarts',  
  37.             'echarts/chart/bar',  
  38.             'echarts/chart/line',  
  39.         ],  
  40.         //创建ECharts图表方法  
  41.         function (ec) {  
  42.             //--- 折柱 ---  
  43.                 //基于准备好的dom,初始化echart图表  
  44.             var myChart = ec.init(document.getElementById('mainBar'));  
  45.             //定义图表option  
  46.             var option = {  
  47.                 //标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题  
  48.                 title: {  
  49.                     //主标题文本，'\n'指定换行  
  50.                     text: '2013年广州降水量与蒸发量统计报表',  
  51.                     //主标题文本超链接  
  52.                     link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',  
  53.                     //副标题文本，'\n'指定换行  
  54.                     subtext: 'www.stepday.com',  
  55.                     //副标题文本超链接  
  56.                     sublink: 'http://www.stepday.com/myblog/?Echarts',  
  57.                     //水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
  58.                     x: 'left',  
  59.                     //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
  60.                     y: 'top'  
  61.                 },  
  62.                 //提示框，鼠标悬浮交互时的信息提示  
  63.                 tooltip: {  
  64.                     //触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'  
  65.                     trigger: 'axis'  
  66.                 },  
  67.                 //图例，每个图表最多仅有一个图例  
  68.                 legend: {  
  69.                     //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
  70.                     show: true,  
  71.                     //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
  72.                     x: 'center',  
  73.                     //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
  74.                     y: 'top',  
  75.                     //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应  
  76.                     data: ['蒸发量','降水量']  
  77.                 },  
  78.                 //工具箱，每个图表最多仅有一个工具箱  
  79.                 toolbox: {  
  80.                     //显示策略，可选为：true（显示） | false（隐藏），默认值为false  
  81.                     show: true,  
  82.                     //启用功能，目前支持feature，工具箱自定义功能回调处理  
  83.                     feature: {  
  84.                         //辅助线标志  
  85.                         mark: {show: true},  
  86.                         //dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退  
  87.                         dataZoom: {  
  88.                             show: true,  
  89.                              title: {  
  90.                                 dataZoom: '区域缩放',  
  91.                                 dataZoomReset: '区域缩放后退'  
  92.                             }  
  93.                         },  
  94.                         //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能  
  95.                         dataView: {show: true, readOnly: true},  
  96.                         //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换  
  97.                         magicType: {show: true, type: ['line', 'bar']},  
  98.                         //restore，还原，复位原始图表  
  99.                         restore: {show: true},  
  100.                         //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'  
  101.                         saveAsImage: {show: true}  
  102.                     }  
  103.                 },  
  104.                 //是否启用拖拽重计算特性，默认关闭(即值为false)  
  105.                 calculable: true,  
  106.                 //直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值  
  107.                 //横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型  
  108.                 xAxis: [  
  109.                     {  
  110.                         //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
  111.                         show: true,  
  112.                         //坐标轴类型，横轴默认为类目型'category'  
  113.                         type: 'category',  
  114.                         //类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行  
  115.                         data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']  
  116.                     }  
  117.                 ],  
  118.                 //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值  
  119.                 //纵轴通常为数值型，但条形图时则纵轴为类目型  
  120.                 yAxis: [  
  121.                     {  
  122.                         //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
  123.                         show: true,  
  124.                         //坐标轴类型，纵轴默认为数值型'value'  
  125.                         type: 'value',  
  126.                         //分隔区域，默认不显示  
  127.                         splitArea: {show: true}  
  128.                     }  
  129.                 ],  
  130.                   
  131.                 //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象  
  132.                 series: [  
  133.                     {  
  134.                         //系列名称，如果启用legend，该值将被legend.data索引相关  
  135.                         name: '蒸发量',  
  136.                         //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。  
  137.                         type: 'bar',  
  138.                         //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值  
  139.                         data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],  
  140.                         //系列中的数据标注内容  
  141.                         markPoint: {  
  142.                             data: [  
  143.                                 {type: 'max', name: '最大值'},  
  144.                                 {type: 'min', name: '最小值'}  
  145.                             ]  
  146.                         },  
  147.                         //系列中的数据标线内容  
  148.                         markLine: {  
  149.                             data: [  
  150.                                 {type: 'average', name: '平均值'}  
  151.                             ]  
  152.                         }  
  153.                     },  
  154.                     {  
  155.                         //系列名称，如果启用legend，该值将被legend.data索引相关  
  156.                         name: '降水量',  
  157.                         //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。  
  158.                         type: 'bar',  
  159.                         //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值  
  160.                         data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],  
  161.                         //系列中的数据标注内容  
  162.                         markPoint: {  
  163.                             data: [  
  164.                                 {type: 'max', name: '最大值'},  
  165.                                 {type: 'min', name: '最小值'}  
  166.                             ]  
  167.                         },  
  168.                         //系列中的数据标线内容  
  169.                         markLine: {  
  170.                             data: [  
  171.                                 {type: 'average', name: '平均值'}  
  172.                             ]  
  173.                         }  
  174.                     }  
  175.                 ]  
  176.             };  
  177.                   
  178.             //为echarts对象加载数据              
  179.             myChart.setOption(option);  
  180.         }  
  181.     );  
  182.     </script>  
  183.   </body>  
  184. </html>  


完成以上的步骤后，把项目发布到服务器，在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互，只是先做一个前台用法介绍，所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下，然后直接用浏览器打开echarts.html)，即可看到下面的效果


ECharts系列 - 柱状图（条形图）实例一_第2张图片

图片中的右上角有个工具箱，点击“折线图切换”按钮后，效果如下

ECharts系列 - 柱状图（条形图）实例一_第3张图片


更多的图表样式设置，可以查看ECharts的官方API文档

你可能感兴趣的:(ECharts系列 - 柱状图（条形图）实例一)

  • 2025年PHP框架推荐及对比 行思理 LNMP运维php开发语言
    以下是针对2025年PHP框架的推荐及全方位对比分析，结合性能、功能生态、适用场景等核心维度，帮助开发者做出合理选择：一、主流PHP框架推荐1.Laravel核心特性：以优雅的语法和强大的功能著称，支持EloquentORM、Blade模板引擎、队列系统等，适合复杂业务开发。社区生态丰富，提供大量扩展包（如Passport、Horizon）。性能：RPS约200-500，适合中大型项目，但对高并发
  • HarmonyOS开发，A持有B，B引用A的场景会不会导致内存泄漏，代码示例告诉你答案 MardaWang HarmonyOSNEXTOpenHarmonyharmonyos华为
    问题：A持有B，B引用A的场景会不会导致内存泄漏？答案：方舟虚拟机的内存管理和GC采用的是根可达算法，根可达算法可以解决循环引用问题，不会导致A引用B，B引用A的内存泄漏。根可达算法原理根可达算法以一系列被称为“根对象”（如栈中的局部变量、静态变量等）作为起始点，从这些根对象开始向下搜索，能够被搜索到的对象被认为是可达对象，而那些无法被搜索到的对象则被判定为不可达对象，会在垃圾回收时被清理。所以，
  • 微信小程序开发：开发者工具安装与配置 暮雨哀尘 微信小程序开发notepad++微信小程序开发语言小程序jsonhtml前端
    微信开发者工具安装与配置摘要：本文深入研究了微信开发者工具的安装与配置过程，为开发者提供了详尽的指导。通过对工具的下载、安装步骤，以及开发环境的配置方法进行细致阐述，结合丰富的源代码实例和详细的表格，帮助开发者全面掌握微信开发者工具的使用，提升小程序开发的效率与质量，推动微信小程序生态的持续繁荣。一、引言在移动互联网蓬勃发展的当下，微信作为一款拥有庞大用户群体的社交应用，其小程序生态正呈现出蓬勃发
  • 【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现软件开机自启 广龙宇 Tauri2应用开发一起学Rustrust策略模式开发语言
    文章目录前言一、准备工作1.1环境搭建1.2创建Tauri项目1.3添加依赖二、实现开机自启的基本原理2.1开机自启的基本概念2.2Tauri应用的生命周期三、Windows平台实现3.1Windows注册表机制3.2实现步骤3.3注意事项四、Linux平台实现4.1Linuxsystemd服务4.2实现步骤4.3Rust实现4.4注意事项五、macOS平台实现5.1macOSLaunchAgen
  • deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师... CoderBin_ 与deepseek的对话前端
    一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）
  • 微信小程序：修改提示信息placeholder颜色 25号底片~ 微信小程序微信小程序小程序
    方法一：使用placeholder-style直接在input或textarea组件中使用placeholder-style属性来设置placeholder的样式。或者：方法二：使用placeholder-class你也可以通过placeholder-class属性来指定一个类名，然后在对应的.wxss文件中定义这个类的样式。wxss.custom-placeholder{color:#999;f
  • web端 -- RPC - 通用方案 扁舟·TF 爬虫爬虫
    背景当一个目标站加密字段特别多，而且我们对其并不需要大规模爬取时，考虑到时间成本，我们就可以使用RPC来获取加密数据。原理：搭建一个后端服务器，然后在浏览器中hook加密函数，注册到web.js端中，最后通过client端来回调加密函数，实现rpc远程调用以上就是整个RPC获取加密数据的流程。自己封装了一个通用框架，使用时只需修改一个点就行：自定义client端的type自定义web端typecl
  • Apache storm 赵世炎 stormhadoop
    Apachestorm是一个分布式的实时大数据处理系统。用于在容错和水平可拓展方法中处理大量数据。它是一个流数据框架，具有很高的摄取率，无状态。通过zk管理分布式环境和集群状态，并行地对实时数据执行各种操作。storm易于设置和操作，并且它保证每个消息将通过拓扑至少处理一次。基本上Hadoop和Storm框架用于分析大数据。两者互补，在某些方面有所不同。ApacheStorm执行除持久性之外的所有
  • A Survey of Large Language Models大模型综述论文章节总结 WhyteHighmore 论文语言模型人工智能自然语言处理论文笔记
    ASurveyofLLM人大译ASurveyofLargeLanguageModels这篇论文全面回顾了大型语言模型(LLM)的最新进展，重点关注其发展背景、关键发现和主流技术。文章主要围绕LLM的四个主要方面展开：1引言自从1950年图灵测试被提出以来，人类一直在探索机器掌握语言智能的方法。语言本质上是一种受语法规则支配的复杂、精细的人类表达系统，这使得开发能够理解和掌握语言的强大人工智能(AI
  • 汇川EASY系列之以太网通讯（MODBUS_TCP做从站） Amos_ FAT 汇川EASY网络服务器经验分享
    汇川easy系列PLC做MODBUS_TCP从站，不需要任何操作，但是有一些需要知道的东西。具体如下：1、汇川easy系列PLC做MODBUS_TCP从站，，ModbusTCP服务器默认开启，无需设置通信协议（即不需要配置），端口号为“502”。ModbusTCP从站最多支持31个ModbusTCP客户端（ModbusTCP主站）同时连接。2、做为串口通讯的衍生，功能码是应知应会的。具体如下：关于
  • 【etcd】 茉菇 etcd数据库
    一、ETCD简介etcd是一个由CoreOS团队开发的开源项目，旨在提供一个高可用的、分布式的、一致的键值存储，用于配置共享和服务发现。尽管它看起来像一个键值存储，但etcd的设计目标远远超出了传统数据库的功能范围。etcd的核心特性包括：高可用性和容错性：etcd使用Raft共识算法来确保数据的一致性和服务的高可用性。这意味着即使集群中的某些节点出现故障，etcd也能继续提供服务，并保证数据的一
  • Apache Storm实时流处理的核心技术 Hello.Reader 大数据apachestorm大数据
    1.引言ApacheStorm是一个开源的、分布式的实时计算系统，专为处理流式数据而设计。它能够处理大量数据流并在极低的延迟下提供实时的结果。相比于传统的批处理系统，Storm具有处理无限数据流的能力，支持非常高的可扩展性和容错机制。Storm可以适用于多种编程语言，具有高度的灵活性。1.1什么是ApacheStorm？ApacheStorm是一个流处理引擎，它可以持续处理不断到来的数据流（str
  • openai 标准化协议 Structured Outputs 具体示例教程 weixin_40941102 语言模型
    StructuredOutputs具体示例教程场景：个人财务管理助手假设我们要构建一个AI助手，帮助用户记录和管理个人财务支出。用户可以输入自然语言描述（如“昨天我花了50元买了午餐”），助手将提取关键信息并以结构化JSON格式返回，包括日期、金额、类别和备注。示例1：使用StructuredOutputs提取财务记录步骤1：定义JSONSchema我们需要一个清晰的Schema来描述财务记录：{
  • linux下安装卸载永中office步骤,永中集成Office For Linux安装图文指南及简介 weixin_39625975
    永中集成OfficeForLinux安装图文指南及简介永中集成Office在一套标准的用户界面下集成了文字处理、电子表格和简报制作三大应用，提供自选图形、艺术字、剪贴画、图表和科教编辑器等附加功能；基于创新的数据对象储藏库专利技术，有效解决了Office各应用之间的数据集成问题，构成了一套独具特色的集成办公软件。永中集成Office用户界面和使用方式与常见Office相似，易学易用；能够双向精确兼
  • linux下安装卸载永中office步骤,永中office2012 for Linux的安装 胡大渔
    以LinuxMint为例讲述永中office2012的安装永中office2012forLinux的安装永中office符合中国人的使用习惯，同时兼容MSOffice各种文档格式。个人认为比开源的libreoffice更适合国人使用。下面就以office2012forLinux为例，讲述一下永中Office的安装。1、首先下载office2012forLinux。百度一下即可，下载后应该得到一个Y
  • 计算机网络——绪论 systemyff 计算机网络网络
    6个章节，外加实验和复习课时。题目来自于题库，重在理解+翻译。概述物理层链路层网络层传输层应用层复习课实验课一、计算机网络的基本概念•21世纪的一些重要特征就是数字化、网络化和信息化，是一个以网络为核心的信息时代。•网络现已成为信息社会的命脉和发展知识经济的重要基础。发展最快的并起到核心作用的是计算机网络Ø第一代以主机为中心Ø第二代以通信子网为中心Ø第三代ISO/OSI-RM、InternetØ第
  • 使用Pinecone实现自查询检索器的实现步骤 vaidfl python
    ##技术背景介绍Pinecone是一款功能强大的向量数据库，适用于处理复杂的检索需求。在本文中，我们将演示如何结合Pinecone向量存储使用SelfQueryRetriever实现自查询功能。为了更方便的了解原理，我们将以电影总结数据集为例进行展示。##核心原理解析自查询检索器(SelfQueryRetriever)的核心思想是通过提供文档的元数据和内容描述，结合语言模型生成查询条件来完成数据检
  • AI：对比ChatGPT这类聊天机器人，人形机器人对人类有哪些不一样的影响？ InnoLink_1024 AGI人工智能机器学习chatgpt人工智能机器人
    人形机器人与像ChatGPT这样的聊天机器人相比，虽然都属于人工智能技术的应用，但由于其具备的物理形态和与环境的互动能力，它们对人类的影响会有很大的不同。下面从多个角度进行对比，阐述它们各自对人类的不同影响：1.物理交互与虚拟交互人形机器人：具有物理形态，能够在物理世界中与人类进行直接交互。例如，搬运物品、进行日常家务、提供身体上的帮助（如扶持老人、帮助走路等），以及进行非语言的沟通（如手势、面部
  • 芯片：CPU和GPU有什么区别？ InnoLink_1024 AGI人工智能人工智能aiagigpu算力
    CPU（中央处理器）和GPU（图形处理单元）是计算机系统中两种非常重要的处理器，它们各自有不同的设计理念、架构特点以及应用领域。下面是它们之间的一些主要差异：1.设计目的与应用领域CPU：设计目的是为了处理广泛的计算任务，包括操作系统管理、应用程序运行和基本的输入输出处理等。它处理的是复杂的、通用的计算任务，通常包括控制逻辑、内存管理等。GPU：设计目的是为了处理图形和并行计算任务。最初是为图形渲
  • 【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用 金枝玉叶9 程序员知识储备1程序员知识储备2程序员知识储备3rust开发语言后端
    《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架，它让开发者可以使用Web技术（如HTML、CSS、JavaScript）来创建前端，同时利用Rust编写后端逻辑，确保应用运行高效且轻量。在这个教程中，开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可
  • linux Redhat9.5采用DNS主从实现跨网段解析 梨涡~陌然 linux运维服务器
    文章目录主从服务器DNS实现跨网段解析一、服务器规划二、主服务器配置1、安装`bind`2、修改主配置文件3、配置区域配置文件4、配置正向解析文件5、配置反向解析文件6、检查并启动服务三、从服务器配置1、安装`bind`2、配置主配置文件3、修改区域配置文件4、检查并启动服务四、路由器配置五、客户端验证主从服务器DNS实现跨网段解析一、服务器规划服务器IP地址网关DNS-Master192.168
  • 第十三章 Java多线程——阻塞队列 龙少丶 javajava开发语言
    13.1阻塞队列的由来我们假设一种场景，生产者一直生产资源，消费者一直消费资源，资源存储在一个缓存池中，生产者将生产的资源存进缓存池中，消费者从缓存池中拿到资源进行消费，这就是大名鼎鼎的生产者-消费者模式。该模式能够简化开发过程，一方面消除了生产者与消费者类之间的代码依赖性，另方面将生产数据的过程与使用数据的过程解耦简单化负载。我们⾃⼰coding实现这个模式的时候，因为需要让多个线程操作共享变量
  • 现在的AI，到底是背答案的高手，还是真正的会思考 沐凡资源 人工智能
    你的孩子用AI写作业，你以为他在抄答案，但AI可能连自己都不知道答案是怎么来的。最近朋友圈被小学生用DeepSeek秒杀作业的新闻给刷屏了。家长们一方面惊叹，“这玩意儿比家教还靠谱呢”，另一方面又焦虑，“孩子会不会被AI养废啦”。这让我也产生了一个疑问：现在的AI究竟是背答案的复读机呢，还是真会推理的最强大脑？于是我搜索了很多资料来了解这件事。毕竟这事儿可不单单跟作业有关系——它对未来的AI起着决
  • 基于PyTorch和ResNet18的花卉识别实战（附完整代码） 意.远 pytorch人工智能python深度学习
    一、项目背景与效果花卉分类是计算机视觉的经典任务。本文使用PyTorch框架，基于ResNet18模型实现了102种花卉的分类任务。完整代码可直接复制运行，最终验证集准确率达8.2%，文中同步分析性能瓶颈与优化方案。二、环境配置与数据准备1.环境要求#主要依赖库importtorchfromtorchimportnn,optimfromtorchvisionimporttransforms,dat
  • create-react-app创建的项目中设置webpack配置 沃野_juededa react.jswebpack前端
    create-react-app创建的项目默认使用的是react-scripts（存在于node_modules文件夹中）来处理开发服务器和构建，它内置了一些webpack相关配置。一般不会暴露出来给开发者，但是在有些情况下我们需要修改下webpack默认配置，如修改outputPath、sourcemap方案等，但由于eject是不可逆的，所以craco插件应运而生，为我们提供了更好的解决方案。
  • echarts graph搭配lines形成动效关系图 沃野_juededa echartsjavascript前端
    import*asechartsfrom'echarts';exportdefault{mounted(){this.initChart();},methods:{initChart(){constchart=echarts.init(this.$refs.chart);letdataMap=newMap();constdata={nodes:[{name:'Node1'},{name:'Node
  • C++ 中的explicit关键字 张太行_ c++开发语言
    在C++中，explicit是一个用于修饰构造函数的关键字，它主要用于防止隐式类型转换，下面从多个方面详细介绍它。基本语法explicit关键字只能用于修饰类的构造函数，其语法形式如下：classClassName{public://带有explicit修饰的构造函数explicitClassName(parameter_list);};隐式类型转换问题在没有explicit关键字时，单参数的构造
  • Python列表与元组的深度剖析 jijihusong006 程序pythonwindows开发语言
    Python列表与元组的深度剖析：从底层实现到应用场景的全方位对比一、核心差异概览Python教程https://pan.quark.cn/s/7cefe3163f45传送代资料库https://link3.cc/aa99特性列表(List)元组(Tuple)可变性可变(Mutable)不可变(Immutable)语法表示方括号[]圆括号()内存占用较大(动态数组结构)较小(静态数组结构)哈希支持
  • iOS 模块化架构设计：主流方案与实现详解 Ethan. L 架构ios架构
    随着iOS工程规模的扩大，模块化设计成为提升代码可维护性、团队协作效率和开发灵活性的关键。本文将探讨为什么需要模块化，介绍四种主流的模块化架构方案（协议抽象、依赖注入、路由机制和事件总线），并通过代码示例和对比表格帮助开发者选择适合的方案。一、为什么需要模块化？1.代码可维护性随着工程规模的增长，代码量迅速增加，模块化可以将代码拆分为独立的功能模块，降低代码复杂度，提升可维护性。2.团队协作效率模
  • 推荐开源项目：Tower - 网络服务构建利器 劳治亮
    推荐开源项目：Tower-网络服务构建利器towerasyncfn(Request)->Result项目地址:https://gitcode.com/gh_mirrors/to/towerTower是一个为构建强大、模块化和可重用的网络客户端和服务端组件库。这个库以其高效且易于使用的特性，为开发者提供了一种便捷的方式去构建可靠的网络应用。项目介绍Tower面向的是那些希望简化网络通信复杂性的开发者
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他