Echarts⾯试题
⼀.简述数据可视化技术
1. 什么是数据可视化技术
借助图形化的数段，清晰有效的传递和沟通信息，以视觉的⽅式展现数据，便于⽤户的认知，偏于图表的样式，相对于⽂字说明更加直观
科学可视化（出现最早，最成熟）
处理科学数据，⾯向科学和⼯程数据⽅⾯，研究带有空间坐标和⼏何信息的三维空间，如何呈现数据中的⼏何特征
主要⾯向⾃然科技中产⽣数据的建模操作和处理
应⽤于医疗（透析，CT），科研，航天，天⽓，⽣物等技术
信息可视化（更常见，接触更多）
科学可视化演变⽽来，主要处理⾮结构化，⾮⼏何的数据
⾦融交易，社交⽹络，⽂本数据展⽰
减少视觉混淆对有⽤数据的⼲扰，把⽆⽤的数据过滤掉，⽽⾮简单信息的堆叠（数据加⼯，提取可⽤信息）
更倾向于展⽰信息
可视化分析（前两者的结合）
分析数据导向进⾏展⽰，需要了解具体的事物逻辑
2. 数据可视化技术优点
分析出数据的趋势
进⾏精准的⼴告投放
信息快⼈⼀步，优先获取信息就有更⼤的优势
3. 数据可视化技术借助的软件
⼆.Echarts概述
1. 什么是Echarts
百度团队开发的，提供了⼀些直观，易⽤的交互⽅式以便于对展⽰数据进⾏挖掘.提取.修正或整合，拥有互动图形⽤户界⾯的深度数据可视化⼯具
jquery框架面试题2. 为什么要选择Echarts（特性）
复制代码
拖拽重计算：拖动实现数据重新计算
数据视图：通过编辑功能批量修改数据
动态类型切换：动态切换不同类型的图表展⽰数据，针对⽤户不同需求，对数据进⾏更多的解读
多图联动：多列数据根据条件⼀同修改
百搭时间轴：根据时间动态的改变
⼤规模散点：⼤数据查，需要专业⼯具
动态数据添加：实时改变数据变化
商业BI：⽤于商业数据展⽰
特效：吸引眼球功能
三.Echarts绘制条形图
1、初始化类
Html⾥⾯创建⼀个id为box1的div，并初始化echarts绘图实例
var myChart = echarts.ElementById('box1'))
复制代码
2、样式配置
title ：标题
tooltip ：⿏标悬停⽓泡
xAxis : 配置横轴类别，type类型为category类别
series：销量数据，data参数与横轴⼀⼀对应，如果想调样式，也可以简单调整，⽐如每个条形图的颜⾊可以通过函数进⾏数组返回渲染3、渲染图展⽰表
myChart.setOption(option);
复制代码
四.切换其他组件统计图时，出现卡顿问题如何解决
1. 原因：每⼀个图例在没有数据的时候它会创建⼀个定时器去渲染⽓泡，页⾯切换后，echarts图例是销毁了，但是这个echarts的实例还
在内存当中，同时它的⽓泡渲染定时器还在运⾏。这就导致Echarts占⽤CPU⾼，导致浏览器卡顿，当数据量⽐较⼤时甚⾄浏览器崩溃2. 解决⽅法：在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" id="chartx"></div>
</div>
<script src="/static/assets/scripts/jquery.ba-resize.js"></script>
js代码：
var myChartx = echarts.ElementById('chartx'));
$('.chart').resize(function(){
})
复制代码
注：jquery有resize()事件，但直接调⽤没有起作⽤，引⼊jquery.ba-resize.js⽂件
六. echarts的基本⽤法
1. 初始化类
Html⾥⾯创建⼀个id为box1的div，并初始化echarts绘图实例var myChart = echarts.ElementById('box1'))
2. 样式配置
title ：标题
tooltip ：⿏标悬停⽓泡
xAxis : 配置横轴类别，type类型为category类别
series：销量数据，data参数与横轴⼀⼀对应，如果想调样式，也可以简单调整，⽐如每个条形图的颜⾊可以通过函数进⾏数组返回渲染
3. 渲染图展⽰表
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
⼀般是⼀个每⼀项都是数组的数组，也就是嵌套数组。⾥层数组⼀般代表坐标位置
echarts的优点：
1.国⼈开发，⽂档全，便于开发和阅读⽂档。
2.图表丰富，可以适⽤各种各样的功能。
echarts的缺点：
移动端使⽤略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟⾃⼰⽔平也有⼀定的关系，哎怎么说呢。echarts不失为⼀款⽐较适合我们这种码农使⽤的框架。
echarts就不贴代码了。毕竟⽂档很全。
chart.js优点：
1.轻量级，min版总⼤⼩50多k。
2.移动端使⽤⽐较流畅，毕竟⼩。
chart.js缺点：
1.功能⽋缺⽐较多。
2.中⽂⽂档奇缺。
折线图（区域图）、柱状图（条状图）、散点图（⽓泡图）、K线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、⼒导向布局图、地图、仪表盘、漏⽃图、事件河流图等12类图表
作者：⼩燕⼦111
链接：juejin.im/post/5ece38b4f265da76d40bf738
来源：掘⾦
著作权归作者所有。商业转载请联系作者获得授权，⾮商业转载请注明出处。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。