可视化项目要用到哪些插件

下载toastr,是一个基于jQuery简单、漂亮的消息提示插件

要引入 JQuery库 然后还要引入 js.toastr.min.js 和 css/toastr.min.css

 还可以自己做配置，自定义参数：

1. toastr.options = {
     // "closeButton": false,
     // "debug": false,
     // "newestOnTop": false,
     // "progressBar": false,
     "positionClass": "toast-top-right", // 提示框位置，这里填类名
     // "preventDuplicates": false,
     // "onclick": null,
     "showDuration": "300",              // 提示框渐显所用时间
     "hideDuration": "300",              // 提示框隐藏渐隐时间
     "timeOut": "2000",                  // 提示框持续时间
     // "extendedTimeOut": "1000",
     // "showEasing": "swing",
     // "hideEasing": "linear",
     // "showMethod": "fadeIn",
     // "hideMethod": "fadeOut"
   }

   toast-top-left 顶端左边
   toast-top-right 顶端右边
   toast-top-center 顶端中间
   toast-top-full-width 顶端，宽度铺满整个屏幕
   toast-botton-right
   toast-bottom-left
   toast-bottom-center
   toast-bottom-full-width
   onclick，点击消息框自定义事件
   showDuration: “300”，显示动作时间
   hideDuration: “1000”，隐藏动作时间
   timeOut: “2000”，自动关闭超时时间
   extendedTimeOut: “1000”
   showEasing: “swing”,
   hideEasing: “linear”,
   showMethod: “fadeIn” 显示的方式，和jquery相同
   hideMethod: “fadeOut” 隐藏的方式，和jquery相同
   

2. jquery通知插件toastrjquery通知插件toastr

2.echarts的使用

        引入必要的资源

        添加必要的结构

        初始化

<!-- echarts资源文件 -->
<script src="./assets/lib/echarts/echarts.min.js"></script>
<!-- 地图资源文件 -->
<script src="./assets/lib/echarts/china.js"></script>

二。添加必要的结构

        一定要有宽高，不然没有效果

<div class="panel pie" style="background:red"></div>

三。初始化

// 调用echarts的init创建一个图表实例
// echarts.init(dom元素):dom元素就是图表的容器
let mychart = echarts.init(document.querySelector('.pie'))

// 指定图表的配置项和数据
let option = {
    .......
}
// 调用图表实例的setOption方法根据指定的选项绘制图表
mychart.setOption(option)

        。。。：代表从官网上复制下来的

3.用户验证表单的插件

案例中，表单验证使用的是 bootstrapValidator 插件

使用步骤

1.引入资源

2.添加必要的结构(不一定要添加)

3.初始化

   1.引入资源

<link rel="stylesheet" href="./assets/lib/validator/bootstrapValidator.min.css" />

<script src="./assets/lib/jquery-3.6.0.min.js"></script>
<script src="./assets/lib/bootstrap/bootstrap.min.js"></script>
<script src="./assets/lib/validator/bootstrapValidator.min.js"></script>

2.指定需要进行验证的表单

3.

// 登陆验证
// 比如，验证一个用户名和密码
// 方法名称可以自定义
function test() {
  return {
    // fields固定写死
    fields: {
      // 需要进行验证的表单中的某个表单元素的name属性值
      username: {
        // 这里username是 input 的name属性值，表示对这个输入框进行验证
        validators: {
          // 添加真正的校验规则
          notEmpty: {
            //不能为空
            message: '用户名不能为空.' // 如果不满足校验规则，则给出这句提示
          },
          // 输入的字符串的长度校验
          stringLength: {
            //检测长度
            min: 2, // 最少2位
            max: 15, // 最多15位
            message: '用户名需要2~15个字符'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          stringLength: {
            //检测长度
            min: 6,
            max: 15,
            message: '密码需要6~15个字符'
          }
        }
      }
    }
  }
}

使用

// 比如，注册，如果不满足校验规则，则不会发起请求
$('.login form')
    .bootstrapValidator(test())
    .on('success.form.bv', function(e) {
    e.preventDefault()
    // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
    
})