数据可视化

仓库地址：老汤/数据可视化-211025

项目演示地址：Document                用户名：admin        密码：123456

接口文档地址：dashboard

接口根路径：http://www.itcbc.com:8000

需要的技术：Ajax、jQuery、Echarts(第三方图表库)、第三方表单验证插件、第三方提示插件

（注意：有某种功能的第三方插件并不止一种）

一、Echarts(第三方图表库)

官网：Apache ECharts

Echarts社区：EChartsDemo集

Echarts是一个基于 JavaScript 的开源可视化图表库；

主要使用的版块：示例和文档下的使用手册、配置项手册；

1、使用步骤

a）先在官网下载，在html文件中引入 echarts.min.js ；

b）在html中中准备一个具有宽度和高度的盒子(div)，然后复制对应模板的js代码并进行修改完成操作；

必须要有的3部分：

1. 基于准备好的元素，初始化echarts实例
      var myChart = echarts.init(document.querySelector('盒子元素'));

2. 指定图表的配置项和数据
      var option = {标题和各种数据};

3. 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

2、Echarts基础配置

title	标题	title: {             text: '籍贯 Hometown',             textStyle: { color: '#6d767e' }         }
xAxis	x 轴
yAxis	y 轴
grid	添加网格（整个图表区域设置）调整图表的大小	gird: { top: 30,bottom: 30,left: '7%',right: '7%' }
tooltip	提示框组件	tooltip: {             // 提示信息格式             formatter: '{a}<br/>{b} <strong>{c}</strong> 人 占比{d}%'         }         /* {a} 表示series中的name             {b} 表示数据中的series.data中的name             {c} 表示每一项的值             {d} 表示百分比 */
legend	图例	legend: {data: ['平均分', '低于60分', '高于80分'] }
color	调色盘颜色列表
series	系列列表	type: 'pie'
		radius: ['10%', '65%'] 饼状图的内外圈半径,可以是数字或百分比
		center: ['50%', '50%'] 饼状图在盒子中的位置
		smooth: true 表示使用平滑曲线
		symbol: 'none' 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
		barWidth: '20' 柱条的宽度
		yAxisIndex: 1    // 参照于索引值为1的y轴 第一个y轴(左侧)索引为0 ;第二个y轴(右侧)索引为1

二、第三方表单提示插件(toastr)

jquery通知插件toastr

使用步骤：

a）下载，引入该插件的js文件和css文件

       注意：如果当前插件使用的是jQuery中提供的插件，则必须先引入jQuery文件；

toastr.js文件：
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"
}

b）调用方法，直接使用

toastr.info('提示信息');         普通提示
toastr.success('提示信息');      成功提示
toastr.warning('提示信息');      警告提示
toastr.error('提示信息');        错误提示

三、第三方表单验证插件(bootstrapValidator)

BootstrapValidator使用指南 – Alex Zhuang – 庄严的网站，域名高价出售！

bootstrapValidator

使用步骤：

• 下载并引入插件自身的js文件和css文件；
• 因为bootstrapValidator插件是基于bootstrap框架的，所以要先引入bootstrap的js文件、css文件和 jQuery文件；

• 表单验证规则

  function 验证规则函数名() {
    return {
      fields: {
        username: {            // 这里username是 input 的name属性值，表示对这个输入框进行验证
          validators: {
            notEmpty: {        //不能为空
              message: '用户名不能为空.'
            },
            stringLength: {   //检测长度
              min: 2,
              max: 15,
              message: '用户名需要2~15个字符'
            }
          }
        },
      }
    }
  }

•  监听表单提交事件 ，进行验证

  $('表单').bootstrapValidator(上面的验证规则函数名()).on('success.form.bv', 
  function (e) {
      e.preventDefault();
      // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
  })

补充

1、JWT身份认证 (token)

token(令牌)：让服务器确定来访者的身份(令牌中包括该用户的id等唯一标识 ) ，可以保证数据能够安全沟通。

2、模态窗口

查找：bootstrap中文文档—模态框

模态窗口就是在该窗口关闭之前，其父窗口不可能成为活动窗口的那种窗口。

1. 隐藏模态窗口
    $('窗口').modal('hide')
2. 显示(弹出)模态窗口
    $('窗口').modal('show')