Warehouse address: Laotang / data visualization-211025

Project presentation address: Document User name: admin Password: 123456

Interface document address: dashboard

Interface root path: http://www.itcbc.com:8000

Required technologies: Ajax, jQuery, echarts (third-party chart Library), third-party form verification plug-in, third-party prompt plug-in

(Note: there are more than one third-party plug-in with certain functions)

1, Echarts (third party chart Library)

Official website: Apache ECharts

Echarts community: EChartsDemo set

Echarts is an open source visual chart Library Based on JavaScript;

Main sections used: user manual and configuration item manual under examples and documents;

1. Use steps

a) First download it on the official website, and introduce echarts. Com into the html file min.js ；

b) Prepare a box (div) with width and height in html, then copy the js code of the corresponding template and modify it to complete the operation;

There must be three parts:

1. Initialize based on the prepared element echarts example
      var myChart = echarts.init(document.querySelector('Box element'));

2. Specify configuration items and data for the chart
      var option = {Title and various data};

3. Use the configuration item and data you just specified to display the chart.
      myChart.setOption(option);

2. Echarts basic configuration

title	title	title: { text: 'home town',             textStyle: { color: '#6d767e' }         }
xAxis	x-axis
yAxis	y-axis
grid	Add a grid (entire chart locale) to resize the chart	gird: { top: 30,bottom: 30,left: '7%',right: '7%' }
tooltip	Prompt box component	tooltip: { / / prompt format Formatter: '{a} < br / > {B} < strong > {C} < / strong > proportion of people {d}%'         } / * {a} indicates the name in the series {b} represents Series in the data name in data {c} represents the value of each item {d} indicates percentage*/
legend	legend	legend: {data: ['average score', 'lower than 60 points',' higher than 80 points']}
color	Palette color list
series	Series list	type: 'pie'
		radius: ['10%', '65%'] The inner and outer circle radius of the pie chart, which can be a number or a percentage
		center: ['50%', '50%'] Position of pie chart in box
		smooth: true Indicates the use of smooth curves
		symbol: 'none' The style of the inflection point on the line. none means no; It can also be a solid circle, a hollow circle, a square
		barWidth: '20' Width of column bar
		yAxisIndex: 1 / / refers to the y-axis with index value of 1 The index of the first y-axis (left side) is 0; The index of the second y-axis (right side) is 1

2, Third party form prompt plug-in (toasr)

jquery notification plug-in toast

Use steps:

a) Download and import the js file and css file of the plug-in

Note: if the current plug-in uses the plug-in provided in jQuery, you must first import the jQuery file;

toastr.js File:
toastr.options = {
  // "closeButton": false,
  // "debug": false,
  // "newestOnTop": false,
  // "progressBar": false,
  "positionClass": "toast-top-right", // In the prompt box, fill in the class name here
  // "preventDuplicates": false,
  // "onclick": null,
  "showDuration": "300",              // Time taken for the prompt box to fade
  "hideDuration": "300",              // The prompt box hides the fade time
  "timeOut": "2000",                  // Prompt box duration
  // "extendedTimeOut": "1000",
  // "showEasing": "swing",
  // "hideEasing": "linear",
  // "showMethod": "fadeIn",
  // "hideMethod": "fadeOut"
}

b) Call method, use directly

toastr.info('Prompt information');         General tips
toastr.success('Prompt information');      Success prompt
toastr.warning('Prompt information');      Warning prompt
toastr.error('Prompt information');        Error prompt

3, Third party form validation plug-in (bootstrap validator)

Bootstrap validator user's Guide – Alex Zhuang – a solemn website, domain names are sold at a high price!

bootstrapValidator

Use steps:

• Download and import the js file and css file of the plug-in itself;
• Because the bootstrap validator plug-in is based on the bootstrap framework, we should first introduce the js file, css file and jQuery file of bootstrap;

• Form validation rules

  function Validation rule function name() {
    return {
      fields: {
        username: {            // Here, username is the value of the name attribute of input, indicating that this input box is verified
          validators: {
            notEmpty: {        //Cannot be empty
              message: 'User name cannot be empty.'
            },
            stringLength: {   //Detection length
              min: 2,
              max: 15,
              message: 'User name requires 2~15 Characters'
            }
          }
        },
      }
    }
  }

• Listen to the form submission event for verification

  $('form ').bootstrapValidator(Verification rule function name above()).on('success.form.bv', 
  function (e) {
      e.preventDefault();
      // After verification, the code here will be executed. Let's just put the Ajax request code here
  })

supplement

1. JWT identity authentication (token)

Token: let the server determine the identity of the visitor (the token includes the user's id and other unique identification), which can ensure the safe communication of data.

2. Modal window

Find: bootstrap Chinese document - modal box

A modal window is a window whose parent window cannot become an active window before the window is closed.

1. Hide modal window
    $('window').modal('hide')
2. display(eject)Modal window
    $('window').modal('show')