可视化展板-Echarts

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