D0108-图表Echarts功能

学习小技巧

1.学习一个新的前端知识时，看API就行
2.不需要记住，只需要在使用的时候参照文档就行。

1.图标

解答：

箭头函数

补充：箭头函数

图标：html部分：

解答：ref属性：用来快速定位到dom元素

①html中标签里面定义ref属性；js中使用this.$ref.ref属性名

②echarts.init(dom对象),init方法获取的时dom对象

③ ** $once的用法-只能使用一次，使用完后就失效；有两个参数，第一个参数是指定的绑定事件名称，第二个参数是回调函数**。

④ echarts.dispose(chart) dispose函数是摧毁的意思

⑤chart图标数据的属性:tooltip、grid、title、xAxis、yAxis、dataZoom、series

分析各项：

setOption:

1. tooltip:提示悬浮框
   
   体现在项目：
   

2. grid属性：网格
   
   
   ①containlabel为了防止标签溢出的问题。
   ②当containlabel设置为true的时候，就决定了包括标签以内的所有内容的矩形框的部分

3. title属性：
   

4. xAxis:直角坐标系中的x轴
   
   

5. yAxis:y坐标轴
   

6. dataZoom：显示窗口的百分比
   数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
   
   

7. series系列列表
   
   
   组件：