爱学习de测试小白
爱学习de测试小白

25-Vue之ECharts-基本使用

ECharts-基本使用

      • 前言
      • ECharts介绍
      • ECharts快速上手
      • ECharts配置说明

前言

  • 本篇开始来学习下开源可视化库ECharts

ECharts介绍

  • ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形
    库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表 。官方文档

ECharts快速上手

  1. 步骤1：引入 echarts.js 文件(可使用本地文件、CDN方式等)
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">script>
  1. 步骤2：准备一个呈现图表的盒子：决定图表显示的位置和大小
<div id='app' style="width: 600px;height: 400px">div>
  1. 初始化 echarts 实例对象：通过id属性选择DOM元素
var myCharts = echarts.init(document.getElementById('app'))
  1. 准备配置项
var option = {
        xAxis: {
            type: 'category',
            data: ['测试', '研发', '产品']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '岗位',
                type: 'bar',
                data: [10, 90, 20]
            }
        ]
    }
  1. 将配置项设置给 echarts 实例对象
myCharts.setOption(option)
  • 完整代码如下:
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts快速上手title>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">script>
head>

<body>

<div id='app' style="width: 600px;height: 400px">div>
<script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.getElementById('app'))
    // 步骤4：准备配置项
    var option = {
         xAxis: {
            type: 'category',
            data: ['测试', '研发', '产品']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '岗位',
                type: 'bar',
                data: [10, 90, 20]
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
script>
body>

html>
  • 效果
    25-Vue之ECharts-基本使用_第1张图片

ECharts配置说明

官方配置项使用文档

  • xAxis：直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
    呈现
  • yAxis：直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
    series 下找数据进行图表的绘制
  • series：系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts快速上手title>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js">script>
head>

<body>

<div id='app' style="width: 600px;height: 400px">div>
<script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var myCharts = echarts.init(document.getElementById('app'))
    // 步骤4：准备配置项
    var option = {
        xAxis: {
            type: 'category',   // 类目轴
            data: ['测试', '研发', '产品']
        },
        yAxis: {
            type: 'value' // 数值轴
        },
        title: {
            text: '岗位',  // 标题文本
            link: 'https://blog.csdn.net/IT_heima', // 标题超链接
            target: 'blank',    // 打开新窗口，  self: 当前窗口
            textStyle: {    // 文字样式
                color: 'pink', // 颜色
                fontWeight: 'bold' // 字体粗细
            }

        },
        series: [
            {
                name: '岗位',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: [10, 90, 20]
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
script>
body>

html>

25-Vue之ECharts-基本使用_第2张图片

你可能感兴趣的:(#,Vue,echarts)

  • Java程序设计（五）：基于SpringBoot+Vue的苗族文化分享平台的设计与实现 人工智能_SYBH 2025年java程序设计javaspringbootvue.js
    1.引言随着互联网技术的发展，文化传承与传播方式发生了巨大的变革。传统文化的传承不再仅依赖于线下活动，而是越来越多地通过数字化平台进行传播。为了促进苗族文化的传承与推广，本文设计并实现了一个基于SpringBoot和Vue的苗族文化分享平台。该平台通过现代化的技术架构，提供了多种功能模块，包括公告管理、文化遗产管理、资源管理、活动管理、跨文化交流等，既为管理员提供便捷的管理工具，也为普通用户提供了
  • _05JavaScript The_era_achievs_hero 学习前端js
    第五次网课1.JavaScript的书写位置内部JS//页面弹出警示框alert('你好,js~')外部JS（最多）内联（行内）(以后vue框架会用这种模式）点我月薪过万2.JavaScript的注释与结束符单行注释符号：//ctrl+/多行注释符号：/**/shift+alt+a结束符用；表示结束可写可不写，要么全都写，要么全不写vue.js不加分号3.JavaScript的输入输出语法输出中文
  • v3-electron-vite项目快速入门指南 罗昭贝Lovely
    v3-electron-vite项目快速入门指南v3-electron-vite⭐Avue3electronadmintemplate,basedon'vite'项目地址:https://gitcode.com/gh_mirrors/v3e/v3-electron-vite本指南旨在帮助您了解并快速上手un-pany/v3-electron-vite这一基于Vue3与Vite的Electron管理
  • 关于前后端分离跨域问题——使用DeepSeek分析查错 潮落拾贝 解决跨域问题使用DeepSeek协助开发
    我前端使用antdesignvuepro框架，后端使用kratos框架开发。因为之前也解决过跨域问题，正常是在后端的http请求中加入中间件，设置跨域需要通过的字段即可，代码如下所示：funcNewHTTPServer(c*conf.Server,s*conf.Secret,rolesm*service.RolesManageService,tracertrace.TracerProvider,l
  • uniapp uni-icons组件自定义图标 xcLeigh uniapp技术点解析uni-app前端java
    文章目录1️⃣uni-icons组件1.1引用位置1.2FontEditor简介1.2FontEditor使用结束语优质源码分享uni-app是一个使用Vue.js(opensnewwindow)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。1️⃣uni-icons组件1.1引用位置1.2FontEditor简介Fo
  • 使用v-html时 防止xss注入攻击 i'm wxm xss前端javascriptvue
    方法一使用vue-dompurify-html插件安装npminstallvue-dompurify-html在mian.js中配置import{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)//防止v-html进行xss注入importVueDOMPurifyHTMLfrom'vue-dompurify-htm
  • vue +element UI form表单校验数组嵌套，数组对象必填校验 i'm wxm vue.jsjavascript前端
    使用element表单时会出现数组对象类型的数据结构并且需要必填校验data(){return{//表单中出现像jsonList这样的数组对象数据editForm:{script:'',paramJsonList:[{paramName:'',paramaValue:''}]},//表单校验editFormRule:{script:[{required:true,message:'请填写',tri
  • HTML、Vue和PHP文件的区别与联系 生信天地 htmlvue.jsphp
    一、核心区别类型性质执行环境功能特点.html静态标记语言浏览器直接解析定义页面结构和内容，无逻辑处理能力.vue前端框架组件文件浏览器/构建工具整合HTML模板+JS逻辑+CSS样式，支持动态数据绑定和组件化开发.php服务器端脚本语言文件Web服务器执行动态生成HTML内容，支持数据库操作和业务逻辑处理二、联系与协作PHP与HTMLPHP文件通过标签嵌入HTML，服务器执行PHP代码后输出纯H
  • 从零开始：Django + MySQL + Vue 打造在线Demo下载平台 阮懿同
    从零开始：Django+MySQL+Vue打造在线Demo下载平台【下载地址】DjangoMySQLVue从零开始打造在线Demo下载平台Django+MySQL+Vue从零开始打造在线Demo下载平台本仓库提供了一套完整的前后端实战项目源码，带你全面学习和掌握在Django后端框架和Vue前端框架下，如何协作开发并部署一个功能完备的在线Demo下载网站项目地址:https://gitcode.c
  • 一个简易的 Vue-Ref 响应式系统
    简易的Ref数据响应式+Renderer渲染器本案例实现的响应式效果非常有限，只做简单的demo演示，本案例既不是基于Object.defineProperty，也不是基于Proxy实现的响应式，而是基于存取器，其实都差不多。准备一个__Ref__，它可以将简单数据类型包装为一个响应式对象。class__Ref{#privateValue;#privateRely;//"桶"收集所有对#priva
  • 计算机学习建议 qincjun 学习
    对于现代得计算机开发者而言；最快的是要见到成效；这是一个功利性的社会；对于99%的人来说，先保证自己可以在社会上活下去才是最重要的；而不是追求梦想；一、职业Web前端：HTML、CSS、JavaScript、Vue3框架、React框架等；客户端：C#后端：(C语言、C++)或者Java数据库：MySQL之类的数据库操作；算法工程师：算法相关书籍；架构师：Linux相关；并做过前后端请一定要想好去
  • 用vue3写一个好看的wiki前端页面 云浩舟 前端vue.jsjavascript
    以下是一个使用Vue3+ElementPlus实现的Wiki风格前端页面示例，包含现代设计、响应式布局和常用功能：TechWiki开发文档快速开始API参考部署指南数据分析数据规范可视化指南{{currentDoc.title}}草稿import{ref,reactive,computed}from'vue'import{marked}from'marked'importDOMPurifyfrom
  • Vue学习教程-04数据代理 番茄番茄君 vue.js学习javascript
    文章目录一、什么是数据代理二、数据代理过程三、vue数据代理应用1.数据代理代码2.代理底层逻辑总结一、什么是数据代理数据代理是一种技术，通过代理、拦截对象属性及方法的访问请求，实现与该对象的交互。在Vue中，数据代理是指在Vue实例化一个组件时，Vue会将组件中的data属性中的数据转化为getter/setter，并将这些getter/setter注册到Vue的响应式系统中，在Vue实例中访问
  • DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件 宝码香车 #DeepSeek#Vuevue.js前端javascriptecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的日期选择器（DatePicker），未使用第三方插件前言进入安装好的DeepSeek页面效果指令输入**属性（Props）****事件（Events）**组件代码，src\components\Dat
  • DeepSeek 助力 Vue 开发：打造丝滑的瀑布流布局（Masonry Layout） 宝码香车 #DeepSeek#Vuevue.js前端javascriptDeepSeekecmascript
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的瀑布流布局（MasonryLayout）前言进入安装好的DeepSeek页面效果指令输入**组件属性(Props)****组件事件(Events)**think组件代码1.组件实现代码2.调用示例3.
  • Vue2 与 Vue3 中 Computed 计算属性详解 阿贾克斯的黎明 前端vue.js前端javascript
    目录Vue2与Vue3中Computed计算属性详解一、Vue2中的Computed计算属性1.简单写法2.get和set写法二、Vue3中的Computed计算属性1.简单写法2.get和set写法三、总结在Vue开发中，计算属性（computed）是一个非常重要的特性，它可以对数据进行二次计算，为我们的开发带来了很大的便利。本文将结合Vue2和Vue3的特点，深入探讨computed计算属性，
  • vue h函数 月下第一风流 vue.jsjavascript前端
    在Vue.js中，h函数是用于在渲染函数中创建虚拟DOM元素的主要工具。但是，除了h函数之外，还有其他一些辅助函数和工具可以用于渲染函数和组件开发。以下是一些常见的工具和函数：createApp:用于创建Vue应用程序的实例。在Vue3中，这是启动应用的主要方法。defineComponent:用于定义一个组件。在Vue3中，这是一种定义组件的选项式API的替代方法。resolveComponen
  • 【瀑布流插件】vue-masonry 春晓_春眠花落 vue.jsjavascript前端
    **最近一直在画静态页面，有个图片列表，布局很紧凑，图片宽度一样，高度不一样，但是效果图上都是紧挨在一起，我用普通的v-for循环加css布局，它会以这一行最高的那张图片的高度为准，导致图片高度小的，下一行不能紧挨在一起**如图：但是我要的效果是这样的，如图：依靠vue-masonry，实现了一些简单的功能,可参考这篇文章，讲的比较详细《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录
  • vue3 - 【完整源码】实现网页整屏大量图片、div 容器的自适应瀑布流布局，宽高度不固定的列表式瀑布流展示效果（高效无 BUG 网站瀑布流效果，超详细代码注释，可根据需求快速进行改造！） 街尾杂货店& 前端组件与功能(开箱即用)vue3瀑布流布局详细教程vue3图片列表瀑布流组件宽高不固定的div实现瀑布vue3最好用的瀑布流组件插件vue3瀑布流布局完整示例源码
    效果图在vue3.js网站项目中，实现图片、普通div容器的瀑布流效果完整示例，支持动态加载数据、自定义一行放多少个、各列之间的间距等等！你可以直接复制组件源码，按照配置文档稍微改改就能用到你的项目中去了，比绝大部分文章提供的示例都要流畅、快速。核心组件源码组件的存放位置无所谓，最后使用的时候能正确引入就行了。创建瀑布流组件Waterfall.vue，复制代码。
  • DeepSeek 助力 Vue 开发：打造丝滑的开关切换（Switch） 宝码香车 #DeepSeekvue.js前端javascriptDeepSeekecmascript
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的开关切换（Switch）前言进入安装好的DeepSeek页面效果指令输入think组件代码组件特点说明：额外建议：代码测试页面效果自己部署DeepSeek安装地址相关文章️✍️️️️⚠️⬇️·正文开始
  • vue 判断mp3是否加载成功 xuelong-ming 前端vue.jsjavascript前端
    一、需求vueMP3加载时，有可能遇到后端没有MP3，但是返回有链接。要求获取MP3失败提示用户，MP3获取失败。二、代码canPlayAudio(url){//判断录音是否加载constaudio=newAudio(url)returnnewPromise((resolve,reject)=>{audio.oncanplay=()=>{resolve(true)audio.remove()}au
  • Vue3中关于el-dialog组件给其添加:deep()样式不生效 1142527603 vue.jsjavascript前端
    去掉scoped，在样式冲突的情况下，可以给el-dialog添加一个类名。注意：这里element-plus官方文档虽然说custom-class已经弃用了，其实也还能用，因为目前为止还没有改成class去定义。
  • 【element】谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效 丶思想 vuevue.jsjavascript前端
    项目场景：谷歌浏览器问题描述谷歌浏览器el-dialog概率出现背景全黑，透明度不生效classv-modalopacity:0.5不生效解决方案：采用opacity:1background:0.5透明度的黑色代码如下：importVuefrom'vue'importElementfrom'element-ui'import'../element-variables.scss'/***来自Kare
  • vue若依框架dicts中字典项的使用：表格展示与下拉框示例 豆豆（前端开发+ui设计） vue.js前端javascript
    在若依框架的开发中，字典项的使用可以帮助我们更方便地管理和展示一些具有固定取值范围的数据，比如颜色类型、人员类型等。下面将详细介绍若依框架中字典项在表格和下拉框中的使用方法。1.若依字典项的配置在若依框架中，我们首先需要在系统管理-字典管理中配置所需的字典。假设我们要配置两个字典：颜色（color）和人员类型（personnel_type）。具体配置如下：颜色字典（color）字典标签字典值红色1
  • 前端面试题2（vue3） GIS-CL 前端面试题前端vue.js
    1.Vue3中的CompositionAPI是什么？与OptionsAPI的区别是什么？答案：CompositionAPI是Vue3引入的一种新的编程模型，它允许开发者以更灵活和模块化的方式组织代码。与传统的OptionsAPI相比，CompositionAPI通过setup()函数集中管理组件的状态和行为，使得逻辑复用和代码组织变得更加容易。OptionsAPI：在Vue2中广泛使用，通过dat
  • 如何构建高效的 Vue 3 前端项目结构 东锋1.3 vue.jsvue.js前端javascript
    假如你正在深入开发一个Vue项目，起初一切感觉顺畅简单。但随着应用的增长，你的文件夹开始泛滥，组件变得混乱，寻找文件就像大海捞针。听起来熟悉吗？其实你并不孤单。一个有组织的文件结构是可扩展、可维护和高效前端开发的支柱。但关键问题是：没有一种放之四海而皆准的结构。完美的设置取决于你的项目规模、复杂性和团队动态。那么，如何开始呢？如何平衡简单性和可扩展性？在这篇文章中，我将分解Vue3项目的最优文件结
  • Vue3 中的 defineProps：优雅地实现子父组件传值 良月柒 vue.js前端javascript
    Vue.js一直以来都是前端开发者们钟爱的框架之一，而在最新的Vue3中，引入了一些新的特性和改进，其中之一就是defineProps。defineProps提供了一种更加明确和类型安全的方式来定义子组件的props，让子父组件之间的数据传递更加清晰和可维护。本文将介绍Vue3中defineProps的用法以及如何在子组件中使用它来接收父组件传递的props数据。什么是defineProps？de
  • vue3项目开发总结 Yaru11 vue前端
    一、项目准备1、明确项目需求和目标在开始构建项目之前，首先要明确项目的需求和目标。这包括了解项目的业务背景、功能需求、性能要求等，以便为后续的技术选型和架构设计提供指导。2、技术选型与框架选择前端框架：选择Vue3作为前端框架，利用其组件化、响应式等特性来提高开发效率和代码质量。构建工具：当前使用的是vue-cli。推荐使用Vite作为构建工具，因为它具有快速的冷启动、实时的热更新和简洁的配置等优
  • MTTK Vue Wrap 项目介绍 MTTKbelinda VUEWrapvue.js前端javascript
    关键字:Vue3,配置开发,快速开发,组件封装关于本项目概述MttkVueWrap是一个基于Vue3的组件封装工具，核心目标是通过纯JavaScript/TypeScript替代传统的单文件组件（SFC）开发模式，同时兼容与SFC的混合使用.它允许开发者通过类似JSON的配置对象或动态生成的脚本快速构建Vue组件，涵盖模板、双向绑定（v-model）、属性、事件、插槽等核心功能.项目起源在前端开发
  • 《vue.js前端框架技术》 韩靓. 前端框架vue.jsflutter
    一、引言在当今快速发展的互联网时代，前端开发技术不断推陈出新，众多框架和工具如雨后春笋般涌现，而Vue.js凭借其独特的优势，在前端开发领域中占据了重要的一席之地。它以简洁的语法、高效的性能和灵活的扩展性，为开发者提供了一种便捷且强大的方式来构建各类交互式的用户界面。无论是简单的企业展示网站、小型的移动应用，还是复杂的大型单页面应用（SPA），Vue.js都展现出了卓越的适应性和实用性，能够满足不
  • 集合框架 天子之骄 java数据结构集合框架
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
    实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
  • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
  • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
            面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
  • linux网口绑定 被触发 linux
    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
  • XML基础语法 肆无忌惮_ xml
    一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
  • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
    @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
  • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
    原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
  • 输入两个整数， 计算百分比 alleni123 java
    public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
  • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
  • linux下tomcat开机自启动 bijian1013 tomcat
    方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
  • spring aop实例 bijian1013 javaspringAOP
    1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
  • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
    enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
  • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
  • shell脚本批量检测端口是否被占用脚本 ronin47
    #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
  • java-2.设计包含min函数的栈 bylijinnan java
    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
  • Netty源码学习-ChannelHandler bylijinnan javanetty
    一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
  • java生成随机数 cngolon java
    方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
  • POI读写海量数据 ctrain 海量数据
    import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
  • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
    日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
  • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
      在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
  • android欢迎界面淡入淡出效果 dcj3sjt126com android
    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
  • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
    转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
  • Android 应用程序发送shell命令 gqdy365 android
    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
  • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
    java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
  • Firebase 相关文章索引 justjavac firebase
    Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
  • C++学习重点 lx.asymmetric C++笔记
    1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
  • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
    这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
  • C 语言初级 位运算 1140566087 位运算c
    第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
  • 14点睛Spring4.1-脚本编程 wiselyman spring4
    14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他