Echarts
1.数据可视化
借助图像化手段,清晰有效地传达与沟通信息。
将数字转换成图形。
案例适配方案
- 设计稿是1920px
1.flexible.js把屏幕分成24等份
2.cssrem插件的基准值是80px
插件-配置按钮-配置扩展设置–Root Font Size里面设置
重启vscode软件保证生效
常见的数据可视化库
- D3.js
- Echarts.js (wps)
- Highcharts (office)
使用
- 步骤1:下载并引入echarts.js文件 ——>图标依赖这个js库
npm install echarts --save
import echarts from ‘echarts’ - 步骤2:准备一个具备大小的DOM容器——>生成的图标会放入这个容器内
<div class="box"></div>
//CSS
.box{
width:500px;
height:500px;
border:1px solid #ccc;
}
- 步骤3:初始化echarts实例对象——>实例化echarts对象
- 步骤4:指定配置项和数据(option)——>根据具体需求修改配置选项
- 步骤5:将配置项设置给echarts实例对象——>让echarts对象根据修改好的配置生效
option配置
option = {
//color设置我们线条的颜色,注意后面是个数组
color:['pink','red','blue','green']
//设置图表的标题
title: {
tex