1.课程⽬标
- 了解大数据可视化技术
- 掌握Echarts核心组件
- 掌握Echarts高级用法
- 了解前后端数据展示
2.数据可视化概述
1. 什么是数据可视化
2. 经典可视化案例
3. 大数据可视化价值观
4. 数据可视化工具
3.什么是数据可视化？
- 字面理解：就是说能够以视觉的方式展示我们的数据
- 官方定义：将结构或非结构的数据转化成为适当的可视化图表 ，然后将隐藏在数据中的信息直接展示到我们的面前。
4.经典可视化案例
1.全国主要城市空气质量图
2.气泡图展示空气污染指数
3.某地区的蒸发量和降水量
4.雷达图展示各浏览器占比的一个情况
5.伦敦霍乱地图
6.世界经济变迁图
7.俄法战争统计图
8.战争死亡统计停机图
9.人类文明的清明上河图
10.国家数据
11.世界银行
12.百度大数据平台百度统计
5.⼤数据可视化的价值
1.全方位数据解读数据可视化的过程中，企业可以根据数据的特点，360°全方位的将数据指标和维度进行组合，展现数据趋势。能够帮助企业各部门人员更深入的洞察工作中忽视的问题或者风险，将成功的经验引入分享并总结。
2.企业决策0失误企业决策人员通过分析和讨论数据结果能更快的发现数据的共同契合点，从仅有的数据中挖掘出潜在的商机，快速做出适合企业发展的有效决策。而不是通过以往自身对市场的走势判断来下决定。
3.为企业的每个工作人员提供辅助支持酷屏既可以为实施人员提供面向数据仓库的数据分析和丰富的二次开发接口，还可以为业务人员提供几十种能直接拖拉拽操作生成的大屏模板，也能让研发人员自由灵活的实现个性化功能拓展，实现组件样式或功能不受限。
4.展现企业实力企业在进行对外合作的时候，如果能用大屏展现企业现状和优势，能让合作方对企业的软硬件实力认知有很大提升，从而推进合作进程。
5.节约时间以往在进行每月，年中和年底总结的时候，各部门人员总是要花好几倍的时间去整理海量数据，然后用Excel将数据的某一个维度指标进行展示。当然不是说这种方法不好，但总归是麻烦了一些，而且很难从各个角度去分析，这样的总结分析动辄就是五六十页PPT，实在不利于领导理解工作。
6.数据可视化⼯具、案例、书籍
7.Echarts概述
ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
8.如何快速上⼿开发⼀个Echarts可视化图表
Echarts是一款由百度前端技术部开发的一个纯JavaScript图表库，它能够提供直观、生动、可交互的个性定制化的数据可视化图表（开源），你不再是一个读者，你可以参与其中。
Echarts特性介绍:
深度数据互动可视化
打破单纯地视觉呈现，拥有互动图形用户界面（GUI）的数据可视化。数据呈现不仅是诉说，而是允许用户对所呈现数据进行挖掘、整合，让可视化成为辅助人们进行视觉化思考的方式
Echarts支持的图表
折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
（拖拽重计算、数据视图、图例开关、数据区域缩放、值域漫游、动态类型切换、多维度堆积、多图联动、混搭）
5分钟上手Echarts:
-
第一步：获取Echarts
1.从官网下载界面选择的需要的版本下载：echarts.baidu.com/download.ht…
2.在ECharts的GitHib：github.com/ecomfe/echa…
3.通过npm获取echarts：npm install echarts --save
4.cdn引入：www.bootcdn.cn/echarts/
9.如何阅读Echarts官⽅⽂档
ECharts官网：echarts.apache.org/zh/index.ht…
10.Echarts学习必备基础知识
Echarts十大常见图表详解
1.柱状图（Bar Chart）
2.折线图（Line Chart）
3.饼图（Pie Chart）
4.散点图（Scatter Chart）
5.气泡图（Buttle Chart）
6.雷达图（Radar Chart）
7.地图（Map Chart）
8.漏斗图（Funnel Chart）
9.词云（WordCloud Chart）
10.仪表盘（Gauge Chart）
11.Echarts3.x与Echarts2.x的区别
-
js文件：
首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需的功能构架类库，使用时只要导入一个echarts.min.js文件就可以。
-
文件导入：
在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句
<script src="js/echarts.js"></script>
接下去只要调用接口就可以了。
-
离线地图：
echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县与区县之间基本上不存在衔接问题。
另外，在echarts3中可以根据需要自主构建地图，这个服务给实际使用提供了很大的便利。
-
工具栏：
在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3里面的toolbox更丑了。
-
地图漫游工具：
在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着还是挺不错的，虽然并没有什么用。
-
坐标系:
echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例如，线 性表以及树、图的节点列表的结构可以归一化为这样的二维数组： echarts3中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的。echarts3中，支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理坐标系（geo）。
-
Option变动：
1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。
2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。
根据官方说法，在echarts3中以前的用法也是兼容的，只是不推荐。
12.Echarts基础架构与常⻅名词术语
基础架构
基本名词
13.Echarts标准开发模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts图表</title>
<script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
</body>
</html>
<script>
var myChart=echarts.init(document.getElementById('main'))
var option={
legend:{
padding:10,
itemGap:10,//图例间隔
data:['邓艳波','杨国娥']//legend的data值要和series的对象的每个name 值相对应，不然不出来lenend
},
tooltip:{//悬浮的时候提示框
trigger:'item'//触发方式
},
xAxis:{
type:'category',//什么类型的，比如数值？
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value',
boundaryGap:[0.1,0.1],//类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
splitNumber:4,//数值的分割段数，不指定的时候根据最大值最小值进行划分
},
series:[
{
name:'邓艳波',//系列名如启用legend，该值将被legend.data索引相关
type:'line',//折线图
data:[112,23,45,56,233,343,454,89,343,123,45,76]
},
{
name:'杨国娥',//系列名
type:'line',//折线图
data:[54,543,23,322,33,63,111,222,23]
}
]
}
myChart.setOption(option)
</script>
14.Echarts柱状图（bar）详解
<!DOCTYPE html>
<html>
<head>
<title>echarts</title>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<body style="background-color:#333;"><!-- -->
<div id="_top" style="width:600px;height: 400px;margin-top:100px;margin-left: 300px;">
</div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('_top'));
// 指定图表的配置项和数据
var option = {
//-------------- 标题 title ----------------
title: {
text: '主标题',
textStyle:{ //---主标题内容样式
color:'#fff'
},
subtext:'副标题', //---副标题内容样式
subtextStyle:{
color:'#bbb'
},
padding:[0,0,100,100] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
},
//---------------- 图例 legend -----------------
legend: {
type:'plain', //----图例类型，默认为'plain'，当图例很多时可使用'scroll'
top:'1%', //----图例相对容器位置,top\bottom\left\right
selected:{
'销量':true, //----图例选择,图形加载出来会显示选择的图例，默认为true
},
textStyle:{ //----图例内容样式
color:'#fff', //---所有图例的字体颜色
//backgroundColor:'black', //---所有图例的字体背景色
},
tooltip:{ //图例提示框，默认不显示
show:true,
color:'red',
},
data:[ //----图例内容
{
name:'销量',
icon:'circle', //----图例的外框样式
textStyle:{
color:'#fff', //----单独设置某一个图例的颜色
//backgroundColor:'black',//---单独设置某一个图例的字体背景色
}
}
],
},
//-------------- 提示框 -----------------
tooltip: {
show:true, //---是否显示提示框,默认为true
trigger:'item', //---数据项图形触发
axisPointer:{ //---指示样式
type:'shadow',
axis:'auto',
},
padding:5,
textStyle:{ //---提示框内容样式
color:"#fff",
},
},
//------------- grid区域 ----------------
grid:{
show:false, //---是否显示直角坐标系网格
top:80, //---相对位置，top\bottom\left\right
containLabel:false, //---grid 区域是否包含坐标轴的刻度标签
tooltip:{ //---鼠标焦点放在图形上，产生的提示框
show:true,
trigger:'item', //---触发类型
textStyle:{
color:'#666',
},
}
},
//------------- x轴 -------------------
xAxis: {
show:true, //---是否显示
position:'bottom', //---x轴位置
offset:0, //---x轴相对于默认位置的偏移
type:'category', //---轴类型，默认'category'
name:'月份', //---轴名称
nameLocation:'end', //---轴名称相对位置
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,-5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 5, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
lineStyle:{
//color:'red',
//width:1,
//type:'solid',
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
},
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容
},
//---------------------- y轴 ------------------------
yAxis: {
show:true, //---是否显示
position:'left', //---y轴位置
offset:0, //---y轴相对于默认位置的偏移
type:'value', //---轴类型，默认'category'
name:'销量', //---轴名称
nameLocation:'end', //---轴名称相对位置value
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 8, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
lineStyle:{
color:'#666',
width:1,
type:'dashed', //---类型
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
}
},
//------------ 内容数据 -----------------
series: [
{
name: '销量', //---系列名称
type: 'bar', //---类型
legendHoverLink:true, //---是否启用图例 hover 时的联动高亮
label:{ //---图形上的文本标签
show:false,
position:'insideTop', //---相对位置
rotate:0, //---旋转角度
color:'#eee',
},
itemStyle:{ //---图形形状
color:'blue',
barBorderRadius:[18,18,0,0],
},
barWidth:'20', //---柱形宽度
barCategoryGap:'20%', //---柱形间距
data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
15..授⼈以渔02定制输出数据视图（dataView）的内容
DataView dv = (DataView)SqlDataSource1.Select(DataSourceSelectArguments.Empty);//用SqlDataSource1的Select方法,通过DataSourceSelectArguments查询参数执行数据筛选.不过你这里参数为空.
16..授⼈以渔03_利⽤百度图说实现Echarts的可视化配置
-
打开 百度图说 网址，可创建账号登录，点击 开始制作图表
-
点击 创建图表
-
根据需要选择相应的图表模板
-
鼠标移到模板图表上，将显示操作栏，点击 **数据编辑，**对图表数据进行修改
-
在 数据编辑页面 中，数据修改后立马生效，数据也可通过excel导入，方便快捷
-
点击 参数调整，跳转到 **参数调整页面，**在该页面中，可对图表的内容和样式进行编辑和设置
-
对图表数据和参数设置完毕之后，回到 操作栏，点击 显示代码，将代码复制下来，可直接应用在项目中
-
现打开一个ECharts在线实例(gallery.echartsjs.com/editor.html)，如下：
-
将复制好的代码替换掉在线实例原来的配置代码，点击 **刷新，**效果如下：
参考地址：https://blog.csdn.net/GRAY_KEY/article/details/82085956
