码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts面试题

时间:2020-05-30 10:42:50      阅读:514      评论:0      收藏:0      [点我收藏+]

标签:key   整合   uil   气泡图   ini   resize   for   技术   数据区   

一.简述数据可视化技术

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

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

    • 科学可视化(出现最早,最成熟)
      • 处理科学数据,面向科学和工程数据方面,研究带有空间坐标和几何信息的三维空间,如何呈现数据中的几何特征
      • 主要面向自然科技中产生数据的建模操作和处理
      • 应用于医疗(透析,CT),科研,航天,天气,生物等技术
    • 信息可视化(更常见,接触更多)
      • 科学可视化演变而来,主要处理非结构化,非几何的数据
      • 金融交易,社交网络,文本数据展示
      • 减少视觉混淆对有用数据的干扰,把无用的数据过滤掉,而非简单信息的堆叠(数据加工,提取可用信息)
      • 更倾向于展示信息
    • 可视化分析(前两者的结合)
      • 分析数据导向进行展示,需要了解具体的事物逻辑
  2. 数据可视化技术优点

    • 分析出数据的趋势
    • 进行精准的广告投放
    • 信息快人一步,优先获取信息就有更大的优势
  3. 数据可视化技术借助的软件

二.Echarts概述

  1. 什么是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);
复制代码

四.切换其他组件统计图时,出现卡顿问题如何解决

  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" 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的基本用法

  1. 初始化类

Html里面创建一个id为box1的div,并初始化echarts绘图实例 var myChart = echarts.init(document.getElementById(‘box1‘))

  1. 样式配置
  • title :标题
  • tooltip :鼠标悬停气泡
  • xAxis : 配置横轴类别,type类型为category类别
  • series:销量数据,data参数与横轴一一对应,如果想调样式,也可以简单调整,比如每个条形图的颜色可以通过函数进行数组返回渲染
  1. 渲染图展示表

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类图表


作者:小燕子111
链接:https://juejin.im/post/5ece38b4f265da76d40bf738
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Echarts面试题

标签:key   整合   uil   气泡图   ini   resize   for   技术   数据区   

原文地址:https://www.cnblogs.com/rebackl/p/12990874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!