[toc]
# 使用思路
0. 学习五分钟快速入门教程
1. 找一个和要做的功能类似的示例代码
1.1 官方实例
1.2 社区实例（公司里开发人员写的）
2. 查看配置文档，进行修改
3. 百度
# 五分钟入门
## 下载
https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js
## 引入
## 页面中放一个div
## 创建 echarts 对象
使用 echarts.init 创建一个对象。
~~~
// 参数：挂载到的 dom 元素
var myChart = echarts.init(dom元素);
~~~
## 定义配置的数据
根据文档来定义相应的数据：
## 渲染数据
使用 `对象.setOptions` 渲染
示例、
# 配置
配置思路：文档+百度。
示例：改变柱状图文本颜色。
# 页面中渲染多个图形
## 封装渲染函数
在渲染时，基本代码结构是固定的，只有挂载元素和数据不同，所以我们可以先封装一个渲染图形的函数：
## 渲染图形
思路：从示例中把数据复制过来，然后直接调用上面的函数即可，
注意：在复制数据时，由于复制的变量比较多，有可能出现和其他图形变量同名的情况，所以为了避免同名，我们可以把每个图形的数据放到一个自调用函数中，把它变成局部变量，可以避免变量和其他变量冲突：
好的规范：一个图形放到一个自调用函数中，避免数据变量名冲突。
# echarts 自动适配屏幕尺寸
实现思路：
1. echarts 对象上有一个方法 `resize()` ，调用这个方法可以调整大小
2. 所以我们使用 JS 监听屏幕尺寸，当屏幕尺寸发生变化时，让 echarts 对象调用 resize 方法。
核心代码：
~~~
// 绑定屏幕尺寸改变事件
window.addEventListener('resize', ()=>{
// echarts 重新调整尺寸
echarts.resize()
})
~~~
示例、修改 render 方法
优化方案。
现在每次渲染一个图形都要为 window 绑定一个 resize 事件，那么如果页面中图形非常多，需要要绑定非常我的 resize 事件，性能就不好。
更好方案：只绑定一个 resize 事件，同时处理所有 echarts 对象的自动调整功能。
