echarts适配

echarts 的resize 用来改变图表尺寸，当容器大小发生变化时使用 window.onresize = myChart.resize 可使图标随着屏幕大小改变。

1. 为echarts准备一个具有宽高的div容器（简单来说就是存放图表的一个占位）

2. 获取定义id并通过echarts.init()方法初始化echarts实例

3. 根据个人需求调整图表的配置项和数据

4. 通过setOption()方法生成图表

在官网给出了我们许多示例

我们都可以直接拿来用，但是里面的一些配置我们可以根据自己的需求来修改，所以我们需要了解ECharts的基础配置。

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series– 系列列表。每个系列通过 type 决定自己的图表类型– 通俗的理解：图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系 grid 中的 x 轴

– boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：直角坐标系 grid 中的 y 轴

grid：直角坐标系内绘图网格。

title：标题组件

tooltip：提示框组件

legend：图例组件

color：调色盘颜色列表

stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

还有一个可以作为补充：Gallery

立即执行函数

---

为了防止变量污染，减少命名冲突，我们可以采用立即执行函数的写法，因为立即执行函数里的变量都是局部变量。

我们需要var很多option ，我们采用立即执行函数包起来就不会参生命名冲突了。

让图表跟随屏幕自适应

---

// 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法