一.简述数据可视化技术
-
什么是数据可视化技术
借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观
- 科学可视化（出现最早，最成熟）
- 处理科学数据，面向科学和工程数据方面，研究带有空间坐标和几何信息的三维空间，如何呈现数据中的几何特征
- 主要面向自然科技中产生数据的建模操作和处理
- 应用于医疗（透析，CT），科研，航天，天气，生物等技术
- 信息可视化（更常见，接触更多）
- 科学可视化演变而来，主要处理非结构化，非几何的数据
- 金融交易，社交网络，文本数据展示
- 减少视觉混淆对有用数据的干扰，把无用的数据过滤掉，而非简单信息的堆叠（数据加工，提取可用信息）
- 更倾向于展示信息
- 可视化分析（前两者的结合）
- 分析数据导向进行展示，需要了解具体的事物逻辑
- 科学可视化（出现最早，最成熟）
-
数据可视化技术优点
- 分析出数据的趋势
- 进行精准的广告投放
- 信息快人一步，优先获取信息就有更大的优势
-
数据可视化技术借助的软件
二.Echarts概述
-
什么是Echarts
百度团队开发的，提供了一些直观，易用的交互方式以便于对展示数据进行挖掘.提取.修正或整合，拥有互动图形用户界面的深度数据可视化工具
2\. 为什么要选择Echarts（特性） 复制代码- 拖拽重计算：拖动实现数据重新计算
- 数据视图：通过编辑功能批量修改数据
- 动态类型切换：动态切换不同类型的图表展示数据，针对用户不同需求，对数据进行更多的解读
- 多图联动：多列数据根据条件一同修改
- 百搭时间轴：根据时间动态的改变
- 大规模散点：大数据查找，需要专业工具
- 动态数据添加：实时改变数据变化
- 商业BI：用于商业数据展示
- 特效：吸引眼球功能
三.Echarts绘制条形图
1、初始化类
Html里面创建一个id为box1的div，并初始化echarts绘图实例
var myChart = echarts.init(document.getElementById('box1'))
复制代码
2、样式配置
title ：标题
tooltip ：鼠标悬停气泡
xAxis : 配置横轴类别，type类型为category类别
series：销量数据，data参数与横轴一一对应，如果想调样式，也可以简单调整，比如每个条形图的颜色可以通过函数进行数组返回渲染
3、渲染图展示表
myChart.setOption(option);
复制代码
四.切换其他组件统计图时，出现卡顿问题如何解决
-
原因：每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，页面切换后，echarts图例是销毁了，但是这个echarts的实例还在内存当中，同时它的气泡渲染定时器还在运行。这就导致Echarts占用CPU高，导致浏览器卡顿，当数据量比较大时甚至浏览器崩溃
-
解决方法：在mounted()方法和destroy()方法之间加一个beforeDestroy()方法释放该页面的chart资源，clear()方法则是清空图例数据，不影响图例的resize，而且能够释放内存，切换的时候就很顺畅了
beforeDestroy () { this.chart.clear() }, 复制代码
五.echarts图表自适应div resize问题
echarts官网的实例都具有响应式功能
echart图表本身是提供了一个resize的函数的。
用于当div发生resize事件的时候，让其触发echart的resize事件，重绘canvas。
<div class="chart">
<div class="col-md-3" style="width:73%;height:270px" id="chartx"></div>
</div>
<script src="/static/assets/scripts/jquery.ba-resize.js"></script>
js代码：
var myChartx = echarts.init(document.getElementById('chartx'));
$('.chart').resize(function(){
myChartx.resize();
})
复制代码
注：jquery有resize()事件，但直接调用没有起作用，引入jquery.ba-resize.js文件
六. echarts的基本用法
- 初始化类
Html里面创建一个id为box1的div，并初始化echarts绘图实例
var myChart = echarts.init(document.getElementById('box1'))
- 样式配置
- title ：标题
- tooltip ：鼠标悬停气泡
- xAxis : 配置横轴类别，type类型为category类别
- series：销量数据，data参数与横轴一一对应，如果想调样式，也可以简单调整，比如每个条形图的颜色可以通过函数进行数组返回渲染
- 渲染图展示表
myChart.setOption(option);
7. Echarts特性介绍
-
拖拽重计算 数据视图，满足用户对数据的需求 动态类型切换，尝试不同类型的图表展现 值域漫游，聚焦到你所关心的数值上 数据区域缩放，聚焦到你所关心的数值上 多图联动，更友好的关联数据分析 百搭时间轴，时间维度拓展 大规模散点，展现大数据的魅力 力导向布局，复杂关系网络的最美呈现 动态数据的添加，实时展现数据的变化 多维度图例开关，切换你所关心的数据系列 多维度堆积图，展现更具内涵的统计图表 商业BI,一些广泛应用的商务图表 混搭，用最佳的组合方式展现你独特的数据 高度个性化能力，释放你的创造力 特效，吸引眼球的能力
8. 如何使用Echarts
-
①获取Echarts ：在官网下载Echarts版本 或 npm下载 ②引入Echarts ：script引入 或者 vue在入口文件里引用 ③创建一个dom元素 用来放置图表 ④配置Echarts属性
9. Echarts3.x与Echarts2.x的区别
-
Echarts2.x是通用的版本。 Echarts2.x版本的文档实例比Echarts3.x版本的文档实例要好，更加清晰，更加容易理解。 Echarts2.x版本做的图表更炫酷。 Echarts2.x代表的是现在，而Echarts3.x代表的是未来。 Echarts3.x对Echarts的引用更灵活，更简单，方便。
10.ECharts如何画图？
第一，ECharts是通过canvas来实现的，由于canvas的限制，所以echarts在实现的时候多是绘制一些规则的，可预期的，易于实现的东西
第二，echarts的核心就是options配置的对象。一般使用最多的是直角坐标图，极点图，饼状图，地图。
第三，对于直角坐标，必须配置xAsix和yAxis，对于几点坐标必须配置radiusAxis和angleAxis。
第四就是series系列的认识，它是一个数组，数组的每一项都代表着一个单独的系列，可以配置各种图形等等功能。然后data
一般是一个每一项都是数组的数组，也就是嵌套数组。里层数组一般代表坐标位置
11.echarts和chart对比
echarts的优点：
1.国人开发，文档全，便于开发和阅读文档。
2.图表丰富，可以适用各种各样的功能。
echarts的缺点：
移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系，哎怎么说呢。
echarts不失为一款比较适合我们这种码农使用的框架。
echarts就不贴代码了。毕竟文档很全。
chart.js优点：
1.轻量级，min版总大小50多k。
2.移动端使用比较流畅，毕竟小。
chart.js缺点：
1.功能欠缺比较多。
2.中文文档奇缺。
12.echarts支持哪些图标？
折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
网友评论