数据可视化

Posted 2020-12-17 sunluo

什么是数据可视化

1. 数据可视化的主要目的：借助图形的手段，情绪有效的传递沟通信息
2. 数据可视化在我们互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑等
3. 数据可视化库有很多，重点学习Echarts

Echarts使用五部曲

1. 步骤一：下载并引入echarts.js文件-----------图表依赖这个js库
2. 步骤二：准备具备大小的DOM容器-----------生成的图表会放入这个容器当中
3. 步骤三：初始化echarts实例对象    -----------实例化echarts对象
4. 步骤四：指定配置项和数据（option）-------根据需求修改配置选项
5. 步骤五：将配置项设置给echarts实例对象

Echarts的基本使用：

　　相关配置：

1. 1. 　title：标题组件
   2. tooltip：提示框组件
   3. legend：图例组件
   4. toolbox： 工具栏
   5. grid：  直角坐标系内绘图网格
   6. xAxis：直角坐标系中的x轴
   7. yAxis：直角坐标系中的y轴
   8. serise：系列列表每个系列通过type决定自己的图表类型是什么
   9. color：调色盘颜色系列

　　　　　　注：先了解以上9个，其余查阅文档，根据需求修改配置

边框图片语法：

border-image-source -----------用在边框的图片路径

border-image-slice ---------------图片边框向内偏移（裁剪尺寸，一定不加单位，上右下左顺序）

border- image-width--------------图片边框的宽度（需要加单位）（不是边框的宽度是边框图片的宽度）

border- image-repeat-------------图片边框是否平铺（0repeat）、铺满（round）、拉伸（stretch）默认拉伸