ECharts课堂（大数据可视化）基础
Posted 贫坤户～濰小城
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts课堂（大数据可视化）基础相关的知识，希望对你有一定的参考价值。
目录
一、学习目标
-
了解数据可视化的基本概念
-
熟悉数据可视化的基本流程
-
了解Echarts发展历程
-
第一个echarts实例
二、本节任务
任务一：认识数据可视化
（一）任务描述
人数对图形、图像等可视化符号的处理效率要比对数字、文本的处理效率高很多。数据可视化的主旨是借助于图形化手段，清晰、有效地传达与沟通信息。通俗地理解，数据可视化就是将原本枯燥烦琐的数据，用更加生动形象且常人容易看懂的图形化方法表达出来。
（二）任务分解
1. 概念：
数据可视化是对数据的一种形象直观的解释，实现从不同维度观察数据，从而得到更有价值的信息。数据可视化将抽象的、复杂的、不易理解的数据转化为人眼可识别的图形、图像、符号、颜色、纹理等，这些转化后的数据通常具备较高的识别效率，能够有效地传达出数据本身所包含的有用信息。
2. 目的：
数据可视化的目的，是对数据进行可视化处理，以更明确地、有效地传递信息。可视化是人类思维认知强化的过程，即人脑通过人眼观察某个具体图形、图像来感知某个抽象事物，这个过程是一个强化认知的理解过程。
数据可视化是为了从数据中寻找三个方面的信息：模式、关系和异常。
模式：指数据中的规律，通过数据可视化分析数据规律，发现其中的周期性变化。
关系：指数据之间的相关性，在统计学中，通常代表关联性和因果关系。数据间的关系大多可分为三类：数据间的比较、数据间的构成、以及数据的分布和联系。
异常：指有问题的数据。通过异常分析，用户可以及时发现各种异常情况。
三、实例
1.Echarts框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script><!--在线引入ECHARTS库-->
<script type="text/javascript" src="js/dark.js"></script>
<script type="text/javascript" src="js/infographic.js"></script>
<script type="text/javascript" src="js/macarons.js"></script>
<script type="text/javascript" src="js/roma.js"></script>
<script type="text/javascript" src="js/shine.js"></script>
<script type="text/javascript" src="js/vintage.js"></script><!--载入图表主题，必须下载到本地文件-->
</head>
<body>
<div id="main" style="width:800px;height:400px"></div><!--定义大小合适的DIV盒子-->
<script type="text/javascript">
var mychart=echarts.init(document.getElementById("main"),"dark");/*创建全局变量，使用init()方法初始化容器，引入echarts.js库文件后，会自动创建一个全局变量echarts.通过echarts.init方法可以初始化Echarts实例。*/
var option = /*主要组件代码*/
;/*代码主体*/
mychart.setOption(option);/*执行方法，完成图表的绘制*/
</script>
</body>
</html>这里写了一个框架我们所有的图都基于这个框架来写的，
2.第一个Echarts
按照下图来制作一个销售图
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>
<title>Title</title>
</head>
<body>
<div id="main" style="width: 600px;height: 800px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'),"dark");
var option =
title:
text: '水果销售图表',
subtext: '龙马潭',
x:'center',
y:'top',
backgroundColor:'yellow',
textStyle:
color:'red',
fontSize:30,
fontFamily:'黑体',
,
//图表提示框主键
tooltip:,
legend: right: '20%',
data: ['水果','谷物','肉类','日用'],
bottom: '1%',
,
xAxis:
data: ['一店','二店','三店','四店']
,
yAxis: ,
series: [
name:'水果',
type:'bar',
data:[400, 600, 280, 370 ],
name:'谷物',
type:'bar',
data:[500, 300, 560, 250 ],
name:'肉类',
type:'line',
data:[660, 550, 600, 400 ],
name:'日用',
type:'bar',
data:[300, 500, 650, 550 ]
]
;
myChart.setOption(option);
</script>
</body>
</html>以上是关于ECharts课堂（大数据可视化）基础的主要内容，如果未能解决你的问题，请参考以下文章