Echarts
一.数据可视化概述
- 什么是数据可视化
- 经典可视化案例
- 大数据可视化价值
- 数据可视化工具
二.什么是数据可视化？
简单理解：能够以视觉的方式去展现我们的数据
官方理解：
就是将结构或非结构这样的数据转换成适当的可视化图表，将隐藏在数据中的信息直接展现在人们的面前，这就是数据可视化
数据展示话有：文字、图表等
现在数据化偏向于图表方式展现，相对于传统的表格和文档来讲，内容更丰富，使数据更加直观，客观，更加有说服力
三个方面理解数据可视化
- 科学可视化
- 信息可视化
- 可视化分析
1.科学可视化
处理科学数据，面向科学和工程领域的可视化，研究带有空间坐标和几何信息的三维空间测量数据，计算模拟数据和医疗引向数据的重点探索如何有效的呈现数据中的几何，形状特征这样的一种可视化技术，就叫科学可视化
注：科学可视化是最早，最成熟，跨科学研究与应用的领域的一项技术，面向自然和产生数据这样一个处理
2.信息可视化
理解为科学可视化的分支，从科学可视化演变而来，主要处理对象是非结构法和非几何这样的数据，比如金融交易，社交网络、文本数据这样通过信息可视化，挑战如何让大尺度的高维数据减少视觉混淆，把无用的信息过滤掉，直接得到客户最想要的数据，并且对数据结果做一个分析
3.可视化分析
把科学可视化和信息可视化结合起来
可视化分析是一种分析仪，主要应用于海量数据关联分析，可辅助人工操作将数据进行关联分析，并做出完整的分析图表，主要应用于海量数据关联分析，由于所涉及到的信息比较分散、数据结构有可能不统一，而且通常以人工分析为主，加上分析过程的非结构性和不确定性，所以不易形成固定的分析流程或模式，很难将数据调入应用系统中进行分析挖掘。借助功能强大的可视化数据分析平台，可辅助人工操作将数据进行关联分析，并做出完整的分析图表，图表中包含所有事件的相关信息，也完整展示数据分析的过程和数据链走向。同时，这些分析图表也可通过另存为其他格式，供相关人员调阅
三.经典可视化案例
www.jianshu.com/p/bddcd4e61…
四.大数据可视化的价值
1.书局可视化能够快速的发现我们的数据趋势，能够预测未来，降低风险
2.能够设定精准广告投放
3.能够让信息快人一步
4.利用丰富强大的UI，快速搭建前端分析界面和分析流程
5.实时流状大数据动态呈现、智能分析
6.缩短周期，降低成本，最大限度提升成功率
五.数据可视化工具 案例 书籍
1.数据可视化工具
软件 在线服务 JS图标库
六.Echarts概述
1.什么是Echart
Echart就是由百度前端技术部开发的基于JavaScript这样一种数据可视化的图表库，ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表
2.Echarts特性介绍
1.丰富的图表类型
ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
2.多个坐标系的支持
ECharts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上， 甚至可以放在地理坐标系中。
3.移动端优化
流量珍贵的移动端需要图表库的体积尽量小。ECharts 和 ZRender 代码的重构，带来了核心部分体积的减小。ECharts 组件众多，并且后面会持续增加，我们提供了更细粒度的按需打包能力。最小体积缩小为 ECharts 2 的 40%
4.深度的交互式数据探索
交互是从数据中发掘信息的重要手段。总览为先 缩放过滤 按需查看细节是数据可视化交互的基本需求
5.大数据量的展现
借助 Canvas 的能力，ECharts 在散点图中能够轻松展现上万甚至上十万的数据
6.多维数据的支持以及丰富的视觉编码手段
ECharts 3 开始加强了对多维数据的支持，除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的，配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色，大小，透明度，明暗度等不同的视觉通道
7.动态数据
ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息
8.绚丽的特效
ECharts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效
3.如何快速上手创建一个Echarts可视化图标
1.引入Echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2.准备容器
<div id="chartArea" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
3.为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths:{
echarts:'./js/echarts',
'echarts/chart/bar' : './js/echarts',
'echarts/chart/line': './js/echarts'
}
});
4..动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸发量',
type:'bar',
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]
},
{
name:'降水量',
type:'bar',
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]
}
]
};
myChart.setOption(option);
}
);
4.如何阅读Echarts官方文档
5.Echarts学习必备基础知识
一、接口 echarts(enterprise charts 图标库) 二、图类 Bar：柱状图
line：折线图
Scatter：散点图
K：K线图
Pie：饼图
Radar：雷达图
Force：力导布局图
三、组件 Axis：坐标轴
Grid：网络
Polar：极坐标
Title：标题
Tooltip：提示
Legend：图例
data：值
四、基础库 zrender(canvas类库)
6.Echarts3.x与Echarts2.x区别
1、js文件： 首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需的功能构架类库，使用时只要导入一个echarts.min.js文件就可以。
2、文件导入： 在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句
接下去只要调用接口就可以了。 3、离线地图： echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县与区县之间基本上不存在衔接问题。
另外，在echarts3中可以根据需要自主构建地图，这个服务给实际使用提供了很大的便利。
4、工具栏： 在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3里面的toolbox更丑了。
5、地图漫游工具： 在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着还是挺不错的，虽然并没有什么用。
6、坐标系: echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组：
echarts3中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的。echarts3中，支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理坐标系（geo）。
7、Option变动： 1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。
2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。
根据官方说法，在echarts3中以前的用法也是兼容的，只是不推荐 7.Echarts基础架构与常见名词术语
8.Echarts标准开发模板
<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Echarts图表</title>
6 <script src="../js/echarts.min.js"></script>
7 </head>
8 <body>
9 <div id="main" style="width:600px;height:400px;"></div>
10 </body>
11 </html>
12 <script>
13 var myChart=echarts.init(document.getElementById('main'))
14 var option={
15 legend:{
16 padding:10,
17 itemGap:10,//图例间隔
18 data:['邓艳波','杨国娥']//legend的data值要和series的对象的每个name 值相对应，不然不出来lenend
19 },
20 tooltip:{//悬浮的时候提示框
21 trigger:'item'//触发方式
22 },
23 xAxis:{
24 type:'category',//什么类型的，比如数值？
25 data:['周一','周二','周三','周四','周五','周六','周日']
26 },
27 yAxis:{
28 type:'value',
29 boundaryGap:[0.1,0.1],//类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
30 splitNumber:4,//数值的分割段数，不指定的时候根据最大值最小值进行划分
31
32 },
33 series:[
34 {
35 name:'邓艳波',//系列名如启用legend，该值将被legend.data索引相关
36 type:'line',//折线图
37 data:[112,23,45,56,233,343,454,89,343,123,45,76]
38 },
39 {
40 name:'杨国娥',//系列名
41 type:'line',//折线图
42 data:[54,543,23,322,33,63,111,222,23]
43 }
44 ]
45
46 }
47 myChart.setOption(option)
48 </script>
9.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,
},
]; 10.授人以渔01—Echarts配置项查看技巧
配置项查找方式
1 在echarts官网，点击顶部菜单【文档】，在下拉菜单中点击【配置项手册】
2 在“配置项手册”页面，有各种图形的详细配置项与使用方式介绍
3 当需要使用某种图形，又不知道有哪些属性可以使用时，可以在此页面找到使用方式
11.Echarts折线图（line）详解基本配置
var option = {
backgroundColor: '#FFF0F5',
title: {
text: '折线图',
subtext: '模拟数据',
x: 'center'
},
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'horizontal',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'left',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'top',
data: ['预期','实际','假设']
},
// 图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
grid: {
top: '16%', // 等价于 y: '16%'
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
// 提示框
tooltip: {
trigger: 'axis'
},
//工具框，可以选择
toolbox: {
feature: {
saveAsImage: {} //下载工具
}
},
xAxis: {
name: '周几',
type: 'category',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#912CEE'
}
},
// 设置X轴数据旋转倾斜
axisLabel: {
rotate: 30, // 旋转角度
interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
},
// boundaryGap值为false的时候，折线第一个点在y轴上
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
name: '数值',
type: 'value',
min:0, // 设置y轴刻度的最小值
max:1800, // 设置y轴刻度的最大值
splitNumber:9, // 设置y轴刻度间隔个数
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#87CEFA'
}
},
},
series: [
{
name: '预期',
data: [820, 932, 301, 1434, 1290, 1330, 1320],
type: 'line',
// 设置小圆点消失
// 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
symbol: 'none',
// 设置折线弧度，取值：0-1之间
smooth: 0.5,
},
{
name: '实际',
data: [620, 732, 941, 834, 1690, 1030, 920],
type: 'line',
// 设置折线上圆点大小
symbolSize:8,
itemStyle:{
normal:{
// 拐点上显示数值
label : {
show: true
},
borderColor:'red', // 拐点边框颜色
lineStyle:{
width:5, // 设置线宽
type:'dotted' //'dotted'虚线 'solid'实线
}
}
}
},
{
name: '假设',
data: [120, 232, 541, 134, 290, 130, 120],
type: 'line',
// 设置折线上圆点大小
symbolSize:10,
// 设置拐点为实心圆
symbol:'circle',
itemStyle: {
normal: {
// 拐点上显示数值
label : {
show: true
},
lineStyle:{
// 使用rgba设置折线透明度为0，可以视觉上隐藏折线
color: 'rgba(0,0,0,0)'
}
}
}
}
],
color: ['#00EE00', '#FF9F7F','#FFD700']
}
12.Echarts折线图（line）详解 动态数据展示
