大数据可视化:Echarts

大数据可视化:Echarts

  • 数据可视化概述
  • Echarts快速上手
    • 1、什么是Echarts?
    • 2、Echarts特性
    • 3、Echarts快速上手
  • Echarts 常见组件
  • Echarts基础架构
    • 名词术语
  • Echarts图表开发步骤
  • 创建图表

数据可视化概述

借助图形化手段,清晰有效地传达与沟通信息,即关于数据视觉表现形式的科学技术研究。

数据可视化工具:powerBI、SPSS、Flot、echarts等

Echarts快速上手

1、什么是Echarts?

  • ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
  • 目标:深度数据互动可视化

2、Echarts特性

  • 拖拽重计算 整合你所关心的数据
  • 数据视图 满足用户对数据的需求,数据编辑
  • 动态类型切换 尝试不同类型的图表展现
  • 值域漫游、数据区域缩放 聚焦到你所关心的数值上
  • 多图联动 更友好的关联数据分析
  • 百搭时间轴 时间维度的扩展
  • 大规模散点
  • 力导向布局 复杂关系网络
  • 动态数据添加 实时展现数据变化
  • 多维度图例开关 切换你所关心的数据系列
  • 商业BI、混搭、特效

3、Echarts快速上手

1、获取Echarts

  • 1.从官网下载界面选择版本下载:http://echarts.baidu.com/download.html
  • 2.在Echarts的GitHub:https://github.com/ecomfe/echarts
  • 3.通过 npm 获取:echarts:npm install echarts -save
  • 4.cdn 引入:http://www.bootcdn.cn/echarts/

2、引入Echarts

 	<script src="echarts.min.js"></script>

3、绘制一个简单图表

		<script>
			//基于准备好的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: [20,30,12,15,46,26]
				}]
			};

			//使用刚指定的配置项和数据显示图表
			myChart.setOption(option);
		</script>

		<body>
			<!--为ECharts 准备一个具备大小(宽高)的DOM-->
			<div id="main" style="width:400px;height:200px;"></div>
		</body>

4、阅读官方文档

  • https://www.echartsjs.com/zh/option.html#title

Echarts 常见组件

1、Echarts 常用图表

  • 柱状图(Bar Chart)
  • 折线图(Line Chart)
  • 饼图(Pie Chart)
  • 散点图(Scatter Chart)
  • 气泡图(Bubble Chart)
  • 雷达图(Radar Cahrt)
  • 地图(Map Chart)
  • 漏斗图(Funnel Chart)
  • 词云(WordCloud Chart)
  • 仪表盘(Gauge Chart)

2、Echart2.x 与 Echarts3.x 的区别

  • 查看:https://blog.csdn.net/jnx1142410525/article/details/55056197/

Echarts基础架构

Echarts基础架构

名词术语

1、基本名词

2、图表名词
图表名词2

3、选项(Option)

4、Series (通用)

Echarts图表开发步骤

  • 第一步:引入Echarts
  • 第二步:初始化Echarts
  • 第三步:准备Data
  • 第四步:设置Option
  • 第五步:显示图表

创建图表

  • 百度图说 https://tushuo.baidu.com/wave/index#/gallery

  • 文档图示(配置项)
    大数据可视化:Echarts_第1张图片
    大数据可视化:Echarts_第2张图片
    大数据可视化:Echarts_第3张图片
    大数据可视化:Echarts_第4张图片

你可能感兴趣的:(Echarts,数据可视化,前端)