2024年前端ECharts可视化框架快速上手详解(三)，Web前端校招面试经验汇总

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}],

min: 50, // min max 控制仪表盘数值范围

}]

}

// 4.使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

1.1.2、自定义主题

1. 在主题编辑器中编辑主题(下载->主题下载->定制主题->下载主题)

地址：https://echarts.apache.org/zh/theme-builder.html

2. 下载主题，是一个 js 文件

3. 引入主题 js 文件

2、动画的使用

=========================================================================

2.1、加载动画

---

ECharts 已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可

• 显示加载动画、隐藏加载动画

• myCharts.showLoading()、myCharts.hideLoading()

• 一般我们的数据是从服务器获取，当数据过多时，图表加载不出来，此时的界面是不友好的，我们可以在获取数据之前显示加载动画，当数据获取完成，隐藏加载动画

2.2、增量动画

---

当我们的图表已经加载完成，但是此时数据发生了变化，图表就要相应变化，这就是增量动画

• myCharts.setOption(option)

修改数据

增加数据

2.3、动画配置

---

设置在 option 之下的

• 开启动画、动画时长、缓动动画、动画阈值（单种形式的元素数量大于这个阈值时会关闭动画）

• animation:true、animationDuration:5000、animationEasing:'bounceOut'、animationThreshold: 8

3、交互API

=========================================================================

• 全局 echarts 对象：全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的对象

• echartsInstance对象：echartsInstance 对象是通过 echarts.init 方法调用之后得到的

3.1、全局 echarts 对象

---

• init

• registerTheme

• registerMap

• connect

3.1.1、init

• 初始化 ECharts 实例对象

• 使用对象

// 2.初始化echarts实例化对象,且使用内置主题

var myChart = echarts.init(document.querySelector(‘div’), ‘dark’);

3.1.2、registerTheme

• 注册主题

• 只有注册过的主题，才能在 init 方法中使用该主题1

3.1.2、registerMap

• 注册地图数据

$.get(‘json/map/china.json’,function(chinaJson) {

echarts.registerMap(‘china’,chinaJson);

})

• geo 组件使用地图数据

var option = {

geo: {

type: ‘map’,

map: ‘china’,

}

}

3.1.4、connect 方法

• 一个页面中可以有多个独立的图表

• 每一个图表对应一个 ECharts 实例对象

• connect 可以实现多图关联，传入联动目标为 ECharts 实例对象，支持数组

• 保存图片的自动拼接

• 刷新按钮

• 重置按钮

• 提示框联动、图例选择等

3.2、echartsInstance对象

---

3.2.1、setOption方法

• 设置或修改图表实例的配置项以及数据

• 多次调用 setOption 方法

• 合并新的配置和旧的配置

• 增量动画

修改数据

增加数据

3.2.2、resize方法

• 重新计算和绘制图表

• 一般和 window 对象的 resize 事件结合使用

3.2.3、on方法

• 绑定或者解绑事件处理函数

• 鼠标事件

• 常见事件：‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’ 等

• 事件参数 arg：和事件相关的数据信息

• ECharts 事件

• 常见事件：legendselectchanged、‘datazoom’、‘pieselectchanged’、‘mapselectchanged’ 等

• 事件参数arg：和事件相关的数据信息

3.2.3、on方法

• 绑定或者解绑事件处理函数

• 鼠标事件

• 常见事件：‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’ 等

• 事件参数 arg：和事件相关的数据信息

• ECharts 事件

• 常见事件：legendselectchanged、‘datazoom’、‘pieselectchanged’、‘mapselectchanged’ 等

• 事件参数arg：和事件相关的数据信息