Data visualization

Warehouse address: Laotang / data visualization-211025

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

Interface document address: dashboard

Interface root path:

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.

2. Echarts basic configuration


title: {

text: 'home town',

            textStyle: { color: '#6d767e' }



Add a grid (entire chart locale) to resize the chart

gird: { top: 30,bottom: 30,left: '7%',right: '7%' }
tooltipPrompt 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: {data: ['average score', 'lower than 60 points',' higher than 80 points']}

colorPalette color list
seriesSeries listtype: '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'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!


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('', 
    function (e) {
        // After verification, the code here will be executed. Let's just put the Ajax request code here


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
2. display(eject)Modal window

Keywords: Front-end html .NET

Added by madmega on Thu, 10 Mar 2022 16:40:24 +0200