4.1 typora工具的使用
topora的简介：它事一款轻便的markdown编辑器，支持即时渲染，不像其他编辑器的有编辑栏和显示栏，
typora删除了预览窗口，以及所以其他不必要的干扰，取而代之的实时预览。
常用的快捷键：
加粗： Ctrl + B
标题： Ctrl + H
插入链接： Ctrl + K
插入代码： Ctrl + Shift + C -- 无法执行
行内代码： Ctrl + Shift + K
插入图片： Ctrl + Shift + I
无序列表：Ctrl + Shift + L -- 无法执行
撤销： Ctrl + Z
一级标题： Ctrl + 1 -- 以此类推
⼤数据可视化技术：可视化技术概述与Echarts⼊⻔
1.课程目标
数据可视化概念以及Echarts的基本用法
2.数据可视化概述
数据可视化主指借助于图形化手段 清晰优先的传达与沟通信息
3.什么是数据可视化？
数据可视化 是指将大型数据集中数据以图形图像形式表示 并利用数据分析和开发工具发现其中未知的信息处理过程。 数据可视化是指将数据以视觉的形式来呈现，如图表或地图，以帮助人们了解这些数据的意义。通过观察数字、统计数据的转换以获得清晰的结论并不是一件容易的事。而人类大脑对视觉信息的处理优于对文本的处理——因此使用图表、图形和设计元素，数据可视化可以帮你更容易的解释数据模式、趋势、统计数据和数据相关性，而这些内容在其他呈现方式下可能难以被发现。
4.经典可视化的案例
1.航线星云
2.互联网络
3.综合数据库
4.Branch社区之树
5.大数据可视化的价值
1、更快地带来见解
数据可视化可以轻松发现趋势并更快地识别异常值。这些信息有助于了解业务的表现以及正在发展的机遇和风险。使每个人都能够快速，轻松地将数据转换为洞察力
2、做出更明智，更快速的决策
通过理解信息并与他人合作以更快地激发洞察力和发现数据模式，组织可以快速做出基于数据数据驱动的决策。告别那种依靠直觉做出无把握决策的日子。
3、通过高级分析为每个人提供支持
现在，您的组织可以从易于使用的交互式仪表板中受益，该仪表板具有内置的地理空间，联动和钻取分析，可以开发更深入的见解，发现隐藏的模式，并对高价值的商业机会采取行动。
4、提高产品或服务的价值
数据具有令人难以置信的价值，但大多数用户没有时间或耐心去学习专业的商业智能工具。通过在你的应用和业务流程中嵌入DataFocus便捷的自助式分析能力，为用户提供方便，直观的数据。
5、在自定义分析请求上花费的时间更少
保护您的技术团队不为每个报告或可视化编写自定义代码，也不需要重复的，耗时的任务。相反，允许他们专注于构建您的核心产品或服务，使最终用户能够通过DataFocus的问答式搜索，自己可视化并从数据中获取答案。
6.数据可视化工具、案例、书籍
工具: Echarts、Sigma.js、Many Eyes等
书籍：数据可视化之美、数据可视化设计、视不可挡
7. Echarts概述
ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
8. Echarts特性介绍
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
9. 如何快速上⼿开发⼀个Echarts可视化图表
管你使用那种 js 语言，要想实现功能，最核心的就是 下面的三个步骤。引入 Echarts 之前，要引入 jquery 库
1.引入 ECharts
复制代码 2.准备容器 3.绘制图表通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
ECharts ## 15. Echarts 柱状图（bar）详解mytextStyle={ color:"#333", //文字颜色
fontStyle:"normal", //italic斜体 oblique倾斜
fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...
fontFamily:"sans-serif", //字体系列
fontSize:18, //字体大小
};
mylineStyle={
color:"#333",
//颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
type:"solid", //坐标轴线线的类型，solid，dashed，dotted
width:1, //坐标轴线线宽
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
}; myareaStyle={ color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 shadowColor:"red", //阴影颜色 shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
}; myitemStyle={ color:"red", //颜色
borderColor:"#000", //边框颜色
borderWidth:0, //柱条的描边宽度，默认不描边。
borderType:"solid", //柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
barBorderRadius:0, //柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。
shadowBlur:10, //图形阴影的模糊大小。
shadowColor:"#000", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离。
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
}; mylabel={ show:false, //是否显示标签。 position:"inside", //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight' offset:[30, 40], //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。 formatter:'{b}: {c}', //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。 textStyle:mytextStyle }; mypoint={ symbol:"pin", //图形 'circle', 'rect', 'roundRect', 'triangle',
'diamond', 'pin', 'arrow'
symbolSize:50, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
symbolRotate:0, //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
symbolOffset:[0,0], //标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置
silent:false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
}; myline={ symbol:["pin","circle"], //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' symbolSize:50, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
precision:2, //标线数值的精度，在显示平均值线的时候有用。
silent:false, //图形是否不响应和触发鼠标事件，默认为
false，即响应和触发鼠标事件。
label:{
normal:mylabel,
emphasis:mylabel
},
lineStyle:{
normal:mylineStyle,
emphasis:mylineStyle
}
}; myarea={ silent:false, //图形是否不响应和触发鼠标事件，默认为
false，即响应和触发鼠标事件。
label:{
normal:mylabel,
emphasis:mylabel
},
itemStyle:{
normal:myitemStyle,
emphasis:myitemStyle
}
}; series=[ { type:"bar", //柱形 zlevel:0, //柱状图所有图形的 zlevel 值。 z:2, //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 silent:false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在
setOption 更新数据和配置项时用于指定对应的系列。
legendHoverLink:true, //是否启用图例 hover 时的联动高亮。
coordinateSystem:"cartesian2d",////'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
xAxisIndex:0, //使用的 x 轴的 index，在单个图表实例中存在多个 x
轴的时候有用。
yAxisIndex:0, //使用的 y 轴的 index，在单个图表实例中存在多个
y轴的时候有用。
label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
normal:myitemStyle,
emphasis:myitemStyle,
},
stack:null, //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
cursor:"pointer", //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
barGap:"30%", //柱间距离，可设固定值（如 20）或者百分比（如 '30%'，表示柱子宽度的 30%）。
barCategoryGap:"20%", //类目间柱形距离，默认为类目间距的20%，可设固定值
encode: { //可以定义 data 的哪个维度被编码成什么
x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。
y: 2, // 表示维度 2 映射到 y 轴。
tooltip: [3, 2, 4], // 表示维度 3、2、4 会在 tooltip 中显示。
label: 3 // 表示 label 使用维度 3。
},
data: [ //每一列称为一个『维度』。维度下标从0开始
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
],
markPoint:mypoint.data=[
{name: '最大值', type: 'max'},
{name: '某个坐标', coord: [10, 20]},
{name: '固定 x 像素位置', yAxis: 10, x: '90%'},
{name: '某个屏幕坐标', x: 100, y: 100}],
markLine:myline.data=[
{name: '平均线',type: 'average'}, // 支持 'average', 'min', 'max'
{name: 'Y 轴值为 100 的水平线',yAxis: 100},
[
{name: '最小值到最大值', type: 'min'}, // 起点和终点的项会共用一个 name
{type: 'max'}
],
[
{name: '两个坐标之间的标线',coord: [10, 20]},
{coord: [20, 30]}
],
[
{yAxis: 'max',x: '90%'}, // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
{type: 'max'}
],
[
{ name: '两个屏幕坐标之间的标线',x: 100,y: 100},
{x: 500,y: 200}
]
],
markArea:myarea.data=[
[
{name: '平均值到最大值',type: 'average'},
{type: 'max'}
],
[
{name: '两个坐标之间的标域',coord: [10, 20]},
{coord: [20, 30]}
],
[
{name: '60分到80分',yAxis: 60},
{yAxis: 80}
],
[
{name: '所有数据范围区间',coord: ['min', 'min']},
{coord: ['max', 'max']}
],
[
{name: '两个屏幕坐标之间的标域',x: 100,y: 100},
{x: '90%',y: '10%'}
]
],
tooltip:tooltip,
},
];
16. 授⼈以渔01_Echarts 配置项查看技巧
配置项查找方式
1 在echarts官网，点击顶部菜单【文档】，在下拉菜单中点击【配置项手册】
2 在“配置项手册”页面，有各种图形的详细配置项与使用方式介绍
3 当需要使用某种图形，又不知道有哪些属性可以使用时，可以在此页面找到使用方式 复制代码 17. Echarts 折线图（line）详解基本配置 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/line') // 以下的组件按需引入 require('echarts/lib/component/tooltip') // tooltip组件 require('echarts/lib/component/title') // title组件 require('echarts/lib/component/legend') // legend组件 option配置 // option将要设置以下字段感觉就足够使用了 option: { legend: {}, xAxis: {}, yAxis: {}, label: {}, tooltip: {}, series: [] } legend字段，是为了配置下图的表现的；注意data字段的数组需要对应每条折线的名称 鼠标hover到最顶部的legend标志，可以标志对应的折线图，点击legend标志会隐藏对应的折线图 legend: { data: ['招商银行', '浦发银行', '广发银行', '上海银行'] }, legend xAxis，配置x轴数据、样式、名称 xAxis: { type: 'category', // 还有其他的type，可以去官网喵两眼哦 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // x轴数据 name: '日期', // x轴名称 // x轴名称样式 nameTextStyle: { fontWeight: 600, fontSize: 18 } }, xAxis yAxis，配置y轴名称，样式 yAxis: { type: 'value', name: '纵轴名称', // y轴名称 // y轴名称样式 nameTextStyle: { fontWeight: 600, fontSize: 18 } } yAxis tooltip，鼠标放到折线图上展示的数据展示样式 tooltip: { trigger: 'axis' // axis item none三个值 }, trigger: 'axis'
trigger: 'item' series，y轴数据，每条折线的名称 series: [ { name: '招商银行', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }, { name: '浦发银行', data: [620, 711, 823, 934, 1445, 1456, 1178], type: 'line' }, { name: '广发银行', data: [612, 920, 1140, 1160, 1190, 1234, 1321], type: 'line' }, { name: '上海银行', data: [234, 320, 453, 567, 789, 999, 1200], type: 'line' } ] html标签代码，注意要先写好div的宽度和高度，否则这折线图展示不出来 // 折线图显示在这个div中，
渲染折线图 let myChart = echarts.init(document.getElementById('myChart')) myChart.setOption(this.option) 完成折线图复制代码 18. Echarts 折线图（line）详解 动态数据展示 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
1、echarts官网地址 上面有很多实例，也可以在线定制你需要的模板，非常方便
www.echartsjs.com/zh/index.ht…
2、使用时需要先引入echarts对应的js（在官网有对应的js包）
3、使用ajax获取数据并使用echarts工具展示 注意： ajax的async属性 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行，我这里使用的是同步请求。
异步和同步的区别：blog.csdn.net/qq_37148705…
a.前端jsp页面展示
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<%@ include file="../system/admin/top.jsp"%>b.controller层，返回list集合
@RequestMapping(value = { "/getgoodsall" }, method = {RequestMethod.GET }, produces = {JSON_UTF8})
@ResponseBody
public List getGoodsAll(){
List<GoodsSale> goodsSalesList = null;
try {
goodsSalesList = goodsSaleService.listAll();
return goodsSalesList;
}catch (Exception e){
logger.debug(e);
return goodsSalesList;
}
}
c.mapper这里表示查询数据库的全部
<!-- 列表(全部) -->
<select id="listAll" parameterType="String" resultMap="goodsSaleResultMap">
select * from goods_sale a
</select>
1 2 3 4 d.数据库信息 goods_name表示商品名字，sales_volume表示销量
