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

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

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

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

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相同

jquery通知插件toastrjquery通知插件toastr 2.echarts的使用         引入必要的资源         添加必要的结构         初始化

二。添加必要的结构

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

三。初始化

// 调用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.引入资源

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请求的代码放到这里即可
    
})