Echarts面试题 |
您所在的位置:网站首页 › resize()js › Echarts面试题 |
一.简述数据可视化技术
什么是数据可视化技术 借助图形化的数段,清晰有效的传递和沟通信息,以视觉的方式展现数据,便于用户的认知,偏于图表的样式,相对于文字说明更加直观 科学可视化(出现最早,最成熟) 处理科学数据,面向科学和工程数据方面,研究带有空间坐标和几何信息的三维空间,如何呈现数据中的几何特征 主要面向自然科技中产生数据的建模操作和处理 应用于医疗(透析,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。 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类图表 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |