结合专业的分析：echarts面试题总结

一.简述数据可视化技术

1.什么是数据可视化技术

借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观

• 科学可视化(出现最早，最成熟)

处理科学数据，面向科学和工程数据方面，研究带有空间坐标和几何信息的三维空间，如何呈现数据中的几何特征

主要面向自然科技中产生数据的建模操作和处理

应用于医疗(透析，CT)，科研，航天，天气，生物等技术

• 信息可视化(更常见，接触更多)

科学可视化演变而来，主要处理非结构化，非几何的数据

金融交易，社交网络，文本数据展示

减少视觉混淆对有用数据的干扰，把无用的数据过滤掉，而非简单信息的堆叠(数据加工，提取可用信息)

更倾向于展示信息

• 可视化分析(前两者的结合)

分析数据导向进行展示，需要了解具体的事物逻辑

2.数据可视化技术优点

• 分析出数据的趋势
• 进行精准的广告投放
• 信息快人一步，优先获取信息就有更大的优势

3.数据可视化技术借助的软件

二.Echarts概述

1.什么是Echarts

百度团队开发的，提供了一些直观，易用的交互方式以便于对展示数据进行挖掘.提取.修正或整合，拥有互动图形用户界面的深度数据可视化工具

为什么要选择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面试题总结”，你能回答上来吗?如果想要了解更多的相关内容，可以关注极悦Java官网。