题记：

文章内容输出来源：拉勾教育大数据开发高薪训练营
本篇文章是java学习课程中的一部分笔记。

本博文主要是记录一些基础的知识点，通过实操更容易理解

这章主要讲的是数据可视化

数据可视化

数据可视化的作用：
1.可视化数据更直观，更容易理解
2.能够通过不同的维度，使用不同的方式展示数据。
3.与数据交互
4.建设性讨论结果
5.理解运营和结果之间的连接
可视化工具介绍
可视化在大数据领域应用
数据分析，其整体流程基本上就是依据数据的处理流转流程进行。通俗可以概括为：数据从哪里来和数据到哪里去，最终的数据如何展示 , 可以分为以下几个大的步骤
数据采集
一是数据从无到有产生的过程（服务器打印的 log、自定义采集的日志等）叫做数据采集；
另一方面也有把通过使用 Flume 等工具把数据采集搬运到指定位置的这个过程叫做数据采集
数据预处理
现实世界中数据大体上都是不完整，不一致的脏数据，无法直接进行数据分析，或者说不利于分析。为了提高数据分析的质量和便捷性产生了数据预处理技术 .
数据预处理有多种方法：数据清理，数据集成，数据变换等。这些数据处理技术在正式数据分析之前使用，大大提高了后续数据分析的质量与便捷，降低实际分析所需要的时间 ; 使用 MapReduce 实现.
数据入库
预处理完的结构化数据通常会导入到 Hive 数据仓库中，建立相应的库和表与之映射关联。
入库过程有个更加专业的叫法—ETL。 ETL 是将业务系统的数据经过抽取、清洗转换之后加载到数据仓库的过程，目的是将企业中的分散、零乱、标准不统一的数据整合到一起，为企业的决策提供分析依据。
数据分析
根据需求使用 Hive SQL 分析语句，得出指标各种统计结果
数据可视化
将分析所得数据结果进行数据可视化，一般通过图表进行展示数据
可视化可以帮你更容易的解释趋势和统计数据
系统的架构
1. 数据采集：页面埋点 JavaScript 采集；开源框架 Apache Flume
2. 数据预处理： Hadoop MapReduce 程序
3. 数据仓库技术：基于 hadoop 的数据仓库 Hive
4. 数据导出：基于 hadoop 的 sqoop 数据导入导出工具
5. 数据可视化：定制开发 web 程序(echarts)
6. 整个过程的流程调度： hadoop 生态圈中的 azkaban 工具
Flume是Cloudera提供的一个高可用的，高可靠的，分布式的海量日志采集、聚合和传输的系统 .
HDFS 分布式文件系统 ,是一个高度容错性的系统，适合部署在廉价的机器上。HDFS能提供高吞吐量的数据访问，非常适合大规模数据集上的应用
MapReduce是一种编程模型，用于大规模数据集（大于1TB）的并行运算
Hive是基于Hadoop的一个数据仓库工具，可以将结构化的数据文件映射为一张数据库表，并提供类SQL查询功能。
Sqoop是一款开源的工具，主要用于在Hadoop(Hive)与传统的数据库(mysql)间进行数据的传递，可以将一个关系型数据库（例如： MySQL ,Oracle ,Postgres等）中的数据导进到Hadoop的HDFS中，也可以将HDFS 的数据导进到关系型数据库中

HighCharts

1.HighCharts简介
Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。
Highcharts
Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
Highstock
Highstock 是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。
3. Highmaps
Highmaps 是一款基于 HTML5 的优秀地图组件。
Highmaps 继承了 Highcharts 简单易用的特性，利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。
Highmaps 可以单独使用，也可以作为 Highcharts 的一个组件来使用
HighCharts的优势
兼容性好
源代码开源
纯 Javascript
图表类型丰富
丰富的交互特性
多轴支持
动态提示框
图表导出和打印功能
图表缩放
支持外部数据加载
支持扩展及二次开发
下载地址[https://www.highcharts.com.cn/download ]
可以直接使用我们的 CDN 文件而不用下载，速度快和稳定是我们的 CDN 服务的优势
// Highcharts
<script src="http://cdn.highcharts.com.cn/highcharts/8.1.2/highcharts.js"></script>
// Highcharts Stock
<script src="http://cdn.highcharts.com.cn/highstock/8.1.2/highstock.js"></script>
// Highcharts Maps
<script src="http://cdn.highcharts.com.cn/highmaps/8.1.2/highmaps.js"></script>
// Highcharts Gantt
<script src="http://cdn.highcharts.com.cn/gantt/8.1.2/highcharts-gantt.js"></script>
基本使用
1)基础使用
Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js ，例如引入下面的文件即可创建基础的图表了。
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
2)功能模块
功能模块是在 Highcharts 主要功能的基础做的扩展，是由官方发布的功能包，常用功能模块有：
更多图表类型扩展模块（ highcharts-more.js ）
3D 图表模块（ highcharts-3d.js ）
导出功能模块（ modules/exporting.js ）
金字塔图表类型（ modules/funnel.js ）
钻取功能模块（ modules/drilldown.js ）
数据加载功能模块（ modules/data.js
3)Highstock 和 Highmaps
Highstock 和 Highmaps 是另外两款针对不同使用场景的图表产品，三款产品之间相互独立又有密切关系，他们关
系和混合使用的说明如下
Highcharts 基础图表
Highstock 股票及大数据量时间轴图表
Highmaps 地图

Highstock 是完全包含 Highcharts 的，是在 Highcharts 的基础上增加了更多高级功能；Highmaps 则完全独立，不过我们提供了地图功能模块 map.js （在 Highmaps 资源包的 modules 目录）供 Highcharts 或 Highstock 调用。
3）混合使用（重要）
A. Highcharts + Highstock 时只需要引入 highstock.js
<script src="http://cdn.highcharts.com.cn/highstock/highstock.js"></script>
B. Highcharts + Highmaps 混合使用是需要引入 highcharts.js + map.js

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.highcharts.com.cn/highmaps/modules/map.js"></script>

C. Highstock + Highmaps 或 Highcharts + Highstock + Highmaps 混合使用时需引入 highstock.js + map.js
<script src="http://cdn.highcharts.com.cn/highstock/highstock.js"></script>
<script src="http://cdn.highcharts.com.cn/highmaps/modules/map.js"></script>
入门案例
使用highcharts实现一个简单的柱状图表
<body>
<div id="container" style="width:600px;height:400px"></div>
</body>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script>// 图表配置var options = {chart: {type: 'bar'                          //指定图表的类型，默认是折线图（line）},title: {text: '我的第一个图表'                 // 标题},xAxis: {categories: ['苹果', '香蕉', '橙子']   // x 轴分类},yAxis: {title: {text: '吃水果个数'                // y 轴标题}},series: [{                              // 数据列name: '小明',                        // 数据列名data: [1, 0, 4]                     // 数据}, {name: '小红',data: [5, 7, 3]}]};// 图表初始化函数var chart = Highcharts.chart('container', options);
</script>
图表主要组成
一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。
Highcharts 基本组成部分如下图所示

1. 标题（Title）
图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。
2. 坐标轴（Axis）
坐标轴包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。
3. 数据列（Series）
数据列即图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。
4. 数据提示框（Tooltip）
当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。
5. 图例（Legend）
图例是图表中用不同形状、颜色、文字等标示不同数据列，通过点击标示可以显示或隐藏该数据列。
6. 版权标签（Credits）
显示在图表右下方的包含链接的文字，默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。
7. 导出功能（Exporting）
通过引入 exporting.js即可增加图表导出为常见文件功能。
8. 标示线（PlotLines）
可以在图表上增加一条标示线，比如平均值线，最高值线等。
9. 标示区（PlotBands）
可以在图表添加不同颜色的区域带，标示出明显的范围区域。
图表介绍
1.折线图
var options = {chart: {type: 'line'                          //指定图表的类型，默认是折线图（line）},title: {text: '月平均气温'                 // 标题},xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  // x 轴分类},yAxis: {title: {text: '气温'                // y 轴标题}},series: [{data: [1, 2, 3, 4, 4, 6, 7, 56, 9],// step: 'right', // 连接线转折对齐name: 'Right'}, {data: [5, 6, 7, 8, 66, 10, 11, 3, 13],// step: 'center', // 连接线转折对齐name: 'Center'}, {data: [9, 10, 11, 12, 22, 14, 15, 12, 17],// step: 'left', // 连接线转折对齐name: 'Left'}],plotOptions: { line: { dataLabels: {// 开启数据标签enabled: true},// 关闭鼠标跟踪，对应的提示框、点击事件会失效enableMouseTracking: false}}};
2.柱状图
var options = {chart: {type: 'column'                          //指定图表的类型，默认是折线图（line）},title: {text: '月平均降雨量'                 // 标题},//副标题subtitle:{text:"数据来源，我瞎写的"},xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  // x 轴分类},yAxis: {title: {text: '降雨量（mm）'                // y 轴标题}},series: [{ name: '东京', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, {name: '纽约', data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }, {name: '伦敦', data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] }],tooltip:{// head + 每个 point + footer 拼接成完整的 tableheaderFormat:"<span>{point.key}</span><table>",pointFormat:"<tr><td>{series.name}:{point.y}</td></tr>",footerFormat:"</table>",shared:true,useHTML:true},plotOptions: {colume:{broderWidth:0}}};
3.饼图
    var  chart = Highcharts.chart('container', {chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,options3d: {enabled: true,alpha: 45,beta: 0}},title: {text: '扇区突出演示'},tooltip: {headerFormat: '{series.name}<br>',pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',depth: 35,dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}},states: {hover: {enabled: false}},slicedOffset: 20,         // 突出间距point: {                  // 每个扇区是数据点对象，所以事件应该写在 point 下面events: {// 鼠标滑过是，突出当前扇区mouseOver: function() {this.slice();},// 鼠标移出时，收回突出显示mouseOut: function() {this.slice();},// 默认是点击突出，这里屏蔽掉click: function() {return false;}}}}},series: [{type: 'pie',name: '浏览器访问量占比',data: [['Firefox',   45.0],['其他',   0.7]]}]});
4.面积图
$(function () {$('#container').highcharts({chart: {type: 'area'},title: {text: '美苏核武器库存量'},subtitle: {text: '数据来源: <a href="https://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +'thebulletin.metapress.com</a>'},xAxis: {allowDecimals: false,labels: {formatter: function () {return this.value; // clean, unformatted number for year}}},yAxis: {title: {text: '核武库国家'},labels: {formatter: function () {return this.value / 1000 + 'k';}}},tooltip: {pointFormat: '{series.name} 制造 <b>{point.y:,.0f}</b>枚弹头'},plotOptions: {area: {fillOpacity: 0.3, // 指定所有面积图的透明度pointStart: 1940,marker: {enabled: false,symbol: 'circle',radius: 2,states: {hover: {enabled: true}}}}},series: [{name: '美国',data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]}, {name: '苏联/俄罗斯',color: 'green',fillColor: {       // 设置渐变的填充颜色linearGradient: {x1: 0,y1: 0,x2: 0,y2: 1},stops: [[0, Highcharts.getOptions().colors[5]],[1, Highcharts.Color(Highcharts.getOptions().colors[6]).setOpacity(0).get('rgba')]]},data: [null, null, null, null, null, null, null, null, null, null,5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,21000, 20000, 19000, 18000, 18000, 17000, 16000]}]});})
6.地图highmap
<body>
<div id="map" style="width:800px;height: 500px;"></div>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/china.js"></script>
<script>// 随机数据var data = [{"name":"北京","value":69},{"name":"天津","value":14},{"name":"河北","value":55}, {"name":"山西","value":60},{"name":"内蒙古","value":44},{"name":"辽宁","value":89},{"name":"吉 林","value":98},{"name":"黑龙江","value":8},{"name":"上海","value":41},{"name":"江 苏","value":19},{"name":"浙江","value":35},{"name":"安徽","value":83},{"name":"福建","value":24}, {"name":"江西","value":81},{"name":"山东","value":28},{"name":"河南","value":83},{"name":"湖 北","value":52},{"name":"湖南","value":47},{"name":"广东","value":91},{"name":"广西","value":92}, {"name":"海南","value":84},{"name":"重庆","value":10},{"name":"四川","value":91},{"name":"贵 州","value":69},{"name":"云南","value":30},{"name":"西藏","value":12},{"name":"陕西","value":19}, {"name":"甘肃","value":31},{"name":"青海","value":10},{"name":"宁夏","value":10},{"name":"新 疆","value":34},{"name":"台湾","value":43},{"name":"香港","value":98},{"name":"澳门","value":15}, {"name":"南海诸岛","value":89},{"name":"南海诸岛","value":77}]; // 初始化图表var map = new Highcharts.Map('map', {title: {text: '中国地图'},colorAxis: {min: 0, minColor: 'rgb(255,255,255)', maxColor: '#006cee'},series: [{data: data,name: '随机数据',mapData: Highcharts.maps['cn/china'],joinBy: 'name'// 根据 name 属性进行关联}]});
</script>
</body>
7.异步加载数据
    oChart = new Highcharts.Chart(options);Load_SeriesData();function Load_SeriesData() {oChart.showLoading("Loading....");$.ajax({url: 'city.json',type: 'GET',dataType: 'json',success: function (Data) {alert(Data)console.log(Data);for (i = 0; i < Data.length; i++) {var DataSeries = {name: Data[i].name,data: Data[i].arc};oChart.addSeries(DataSeries);}oChart.hideLoading("Loading....");}});}

ECharts

ECharts简介
ECharts缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的使用JavaScript实现的数据可视化工具，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari 等），底层依赖轻量级的矢量图形库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。
官网：https://echarts.apache.org
下载地址：https://echarts.apache.org/zh/download.html
五分钟上手 ECharts
我们可以参考官方提供的5分钟上手ECharts文档感受一下ECharts的使用方式，地址如下：
https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
第一步：创建html页面并引入echarts.js文件
<script src="echarts.js"></script>
第二步：在页面中准备一个具备宽高的DOM容器。
<div id="main" style="width: 600px;height:400px;"></div>
第三步：通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个简单的柱状图
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><script src="echarts.min.js"></script>
</head>
<body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
实例1: 折线图
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]
};
实例2: 饼图
option = {title: {text: '某站点用户访问来源',subtext: '纯属虚构',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1548, name: '搜索引擎'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};
实例3: 雷达图
option = {title: {text: '基础雷达图'},tooltip: {},legend: {data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']},radar: {// shape: 'circle',name: {textStyle: {color: '#fff',backgroundColor: '#999',borderRadius: 3,padding: [3, 5]}},indicator: [{ name: '销售（sales）', max: 6500},{ name: '管理（Administration）', max: 16000},{ name: '信息技术（Information Techology）', max: 30000},{ name: '客服（Customer Support）', max: 38000},{ name: '研发（Development）', max: 52000},{ name: '市场（Marketing）', max: 25000}]},series: [{name: '预算 vs 开销（Budget vs spending）',type: 'radar',// areaStyle: {normal: {}},data: [{value: [4300, 10000, 28000, 35000, 50000, 19000],name: '预算分配（Allocated Budget）'},{value: [5000, 14000, 28000, 31000, 42000, 21000],name: '实际开销（Actual Spending）'}]}]
};
更多实例可以在https://echarts.apache.org/examples/zh/index.html#chart-type-radar中查看

可视化案例

疫情分布图

1.效果展示

2.编码实现

实现步骤

1) 引入echarts.min.js china.js（https://github.com/apache/incubator-echarts/blob/4.8.0/map/js/china.js）
这两个js文件加载顺序是需要注意的，必须先加载echarts.js才能加载其它的地图组件,不然会报错ECharts is not Loaded。
2) 创建containner容器
3) 配置map图表,展示地图
4) 设置组件 title backgroundColor visualMap tooltip series
5) 准备data.json 城市数据

6) 测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><title>中国地图</title>
</head>
<body>
<div id="containner" style="width:800px;height: 500px;"></div>
<script src="../js/echarts.js"></script>
<script src="../js/china.js"></script><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('containner'));// 指定图表的配置项和数据fetch("./dataMap.json").then(res => res.json()).then(res => {var getListByCountryTypeService1 = res.getListByCountryTypeService1;var yqCityList = [];getListByCountryTypeService1.forEach(item => {yqCityList.push({name: item.provinceShortName,value: item.confirmedCount,deadCount: item.deadCount,curedCount: item.curedCount})})var option = {title: {//标题title: "中国疫情统计图表",left: "center",top: 10},visualMap: [ {type: 'piecewise', // continuous连续的 piecewise分段pieces: [ { gt: 10000 }, // (10000, Infinity]{ gt: 1000, lte: 9999 }, // (1000, 9999]{ gt: 100, lte: 999 }, // (100, 999]{ gt: 10, lte: 99 }, // (10, 99]{ gt: 0, lte: 9 } // (0, 9]],inRange: {color: ['#fdebcf', '#f59e83', '#e55a4e', '#cb2a2f', '#811c24']}} ],tooltip:{formatter:function (params) {return `地区：${params.name}<br/>确诊人数：${params.value}<br/>治愈人数：${params.data.curedCount}<br/>死亡人数：${params.data.deadCount}<br/>`}},// 图表背景色backgroundColor: '#f7f7f7',series:[{type:"map",map:"china",label:{//覆盖物设置show:true},data:yqCityList}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);})</script>
</body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

禅道环境的配置和安装
禅道是第一款国产开源项目管理软件。它集产品管理、项目管理、质量管理、文档管理、组织管理和事务管理于一体，是一款专业的研发项目管理软件，完整覆盖了研发项目管理的核心流程。（我们安装是先安装vmware10或者12等，然后安装centos7，安装好后，用远程软件putty_beta.ex…...
2024/5/7 18:11:25
百度paddlepaddle入门讲解第一周内容
Baidu AI Studio 相关网站：https://aistudio.baidu.com/aistudio/education/group/info/1297 day0 0810 两个课程推荐：零基础实践深度学习机器学习的思考故事传统的课程：线性回归感知机逻辑回归实际应该的思考流程：假设空间：设计网络，优化目标：评价或损失函数Loss，…...
2024/5/3 8:54:35
重大疾病保险都包含哪些疾病？
“学姐，它们说的25种重疾是哪些呀？”“重大疾病保险都保障哪些疾病呀？”“学姐，你能帮忙解释一下这100种重疾的含义吗？”这段时间，学姐看到后台有很多的朋友特别地关心重大疾病保险，提出了各种各样的疑问，有些问题，学姐实在是惊呆了！今天学姐就来给大家好好地科普一下…...
2024/5/6 15:20:15
日本数字财经联合OKUBIT成为UKEX全球经纪商日本节点
据官方消息，8月18日，日本数字财经联合OKUBIT顺利入驻英国合规交易所UKEX全球站（同时也加入了国际数字经济联盟、交易商协会），达成战略合作，成为UKEX全球经纪商日本节点。三方将积极整合行业资源，为用户提供良好的全套交易体验。据悉，UKEX全球站是UKEX集团旗下的全球创新…...
2024/5/6 1:47:02
异常，线程
异常概念&异常体系异常：指的是程序正在执行过程中，出现的非正常的情况，最终会导致JVM的非正常停止。异常体系： Throwable体系： Error：严重错误Error，无法通过处理的错误，只能事先避免，好比绝症。 Exception：表示异常，异常产生后程序员可以通过代码的方式纠正，…...
2024/4/17 17:02:03
大型项目技术栈第六讲 EasyExcel的使用
EasyExcel的使用一、EasyExcel 1.EasyExcel简介easyExcel是阿里巴巴开源poi插件之一，当前最新版本2.1.3，poi版本3.17 主要解决了poi框架使用复杂，sax解析模式不容易操作，数据量大起来容易OOM，解决了POI并发造成的报错2.EasyExcel优势注解式自定义操作。输入输出简单，提…...
2024/5/8 4:11:18
快速理解P2P技术中的NAT穿透原理
1 前言 1什么是NAT？NAT（Network Address Translation，网络地址转换），也叫做网络掩蔽或者IP掩蔽。NAT是一种网络地址翻译技术，主要是将内部的私有IP地址（private IP）转换成可以在公网使用的公网IP（public IP）。2为什么会有NAT？时光回到上个世纪80年代，当时的人们在设…...
2024/5/7 17:46:15
代码规范-对象的创建-用静态工厂方法代替构造器
世界上并没有完美的程序，但是我们并不因此而沮丧，因为写程序就是一个不断追求完美的过程。以下优点摘抄自Effective Java 1.有名称 2.不必每次调用时都创建一个新对象 3.可以返回原类型的任何子类 4.返回的对象可以随着参数值的不能而变化 5.返回对象的类在编写静态工厂方法时…...
2024/4/19 1:04:09
[HTTP] HTTP各种特性总览
CORS跨域请求的限制与解决返回数据时设置头信息,只能有一个域名,需要多个域名要判断 const http = require(http) http. createServer(function (request, response) {res.writeHead(200,{"Access-Control-Allow-Origin":*}) }).listen( 8887 ) console.log( server…...
2024/5/3 6:57:02
【笔记】行测——常识判断之法律常识总结与归纳（四）
文章目录第一章法理学第二章宪法第三章民法第四章刑法一、刑法的基本理论（一）刑法概述1.刑法的概念2.刑法基本原则（二）刑法的适用范围1.刑法的空间效力属地管辖原则属人管辖原则保护管辖原则普遍管辖原则2.刑法的时间效力二、犯罪概述（一）犯罪构成1.犯罪主体2.犯罪主…...
2024/5/5 19:48:19
Tomcat请求源码流程分析(图解及源码注释) (六)
Tomcat源码系列:Tomcat初始化源码流程分析(图解及源码注释) (一)Tomcat初始化源码流程分析(图解及源码注释) (二)Tomcat启动源码流程分析(图解及源码注释) (三)Tomcat启动源码流程分析(图解及源码注释) (四)Tomcat请求源码流程分析(图解及源码注释) (五)Tomcat请求源码流程分析…...
2024/5/5 5:20:32
java_基础类与对象封装构造方法
// 2020年8.18上午 // 类与对象，封装，构造的方法 // 面向对象 // 类与对象 // 三大特征 // 构造方法 // 面向对象思想0.0 // 1.1面向对象思想概述 // 概述： // Java语言是一种面向对象的程序设计语言，而面向对象思想是一种程序设计思想，我们在面向对象思想的指引下， // 使…...
2024/4/12 17:27:15
关于MS17-010 永恒之蓝的复现过程
实验环境目标机：win 7 攻击机：kali 实验环境均在虚拟机中进行，模式为NAT模式，使他们处于同一网段中。首先查看目标机win 7的IPkali开启msf使用这个模块查看目标机是否存在漏洞设置目标主机，发现存在漏洞使用攻击模块用show options查看设置的选项然后进行设置选项设置…...
2024/5/7 10:03:55
输入年月打印万年历
（文质木木原创）原文链接package com.test; import java.util.Calendar; import java.util.Scanner;public class WanNianLi {public static void main(String[] args) { // TODO Auto-generated method stub /* * 用户输入年月，打印该月份万年历 * 1 创建扫描器 2 获取输入…...
2024/4/4 11:27:50
图解图库JanusGraph系列-一文知晓“图数据“底层存储结构
知识是永远的流行色!码友们，点赞再看，养成好习惯~一：存储模式留言或私信我，邀请你加入“图数据库交流”微信群！ 1、图内容本文以下所有内容基于：JanusGraph基于属性图来进行构造图数据：属性图：属性图是由顶点（Vertex），边（Edge），属性（Property）组成的有向图…...
2024/4/18 22:43:46
【洛谷_CF261D】Maxim and Increasing Subsequence
Maxim and Increasing Subsequence题目大意：（原文为英文，以下为大意内容）给定一个序列，重复 t 遍后求最长上升子序列（严格单调）给定 k 组数据，每组数据有相同的 n ，maxb 和 t 。分别表示元素的个数、元素中最大的数和重复几遍样例输入 3 3 5 2 3 2 1 1 2 3 2 3 1…...
2024/5/8 1:29:30
C代码统计从键盘输入字符的个数
#include<stdio.h>#include<string.h>int main(){char a[999];memset(a,0,sizeof(a));int i = 0;printf("请输入字符：");for(i = 0;a[i]!=\n;i++){scanf("%c",&a[i]);if(a[i]==\n){break;}}printf("输入字符的数为：%d\n",i);r…...
2024/5/7 2:50:20
java 对象的创建 new
1 当虚拟机遇到一条New指令时：会进行如下步骤检查指令的参数（即工作中我们New的对象），能否在常量池中找到它的符号引用。如果存在，检查符号引用代表的类是否被加载、解析、初始化过。（如果没有则执行类的加载-----相关加载过程参考《Jvm类的加载机制》）。加载通过后，…...
2024/5/5 22:20:51
动态规划的实现（二）---LeetCode面试题08.01与17.16
08.01三步问题## 主要思路：假设现在求到i阶阶梯的方法种数dp[i]，可以考虑它的上一步，分为三种情况：从i-1阶迈一步到达，i-1阶的方法数dp[i-1]；从i-2阶一次上2阶到达，方法数dp[i-2]；从i-3阶一次上3阶到达，方法数dp[i-3]。因此dp[i]=dp[i-1]+dp[i-2]+dp[i-3]为状态转移…...
2024/4/28 12:22:32
数据库注入判断
一、sql注入 sql注入是在系统开发的过程中程序员编程不规范，我们可以通过把SQL语句插入到WEB表单中进行查询字符串，最终达成欺骗服务器执行恶意的SQL命令。对于现在的网站SQL注入越来越严重，而在渗透测试过程中也是经常遇到的。据不完全统计，国内的网站用ASP+Access或SQLSe…...
2024/4/4 10:59:41

java大数据开发训练营--Highcharts+ECharts数据可视化

题记：

数据可视化

HighCharts

图表主要组成

1. 标题（Title）

2. 坐标轴（Axis）

3. 数据列（Series）

4. 数据提示框（Tooltip）

5. 图例（Legend）

6. 版权标签（Credits）

7. 导出功能（Exporting）

8. 标示线（PlotLines）

9. 标示区（PlotBands）

ECharts

可视化案例

相关文章

最新文章