current position:Home>bootstrap

bootstrap

2022-04-29 08:13:48m0_ sixty-two million two hundred and twenty-one thousand two h

 Insert picture description here

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--  introduce  echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
   <!--  by ECharts Prepare one with size ( Wide and high ) Of Dom
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        //  Based on the prepared dom, initialization echarts example 
        var myChart = echarts.init(document.getElementById('main'));
 
        //  Specify configuration items and data for the chart 
        var option = {
    
            title: {
    
                text: ' first  ECharts  example '
            },
            tooltip: {
    },
            legend: {
    
                data:[' sales ']
            },
            xAxis: {
    
                data: [" shirt "," Woolen sweater "," Snow spins unlined upper garment "," The trousers "," High heels "," socks "]
            },
            yAxis: {
    },
            series: [{
    
                name: ' sales ',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        //  Use the configuration item and data display chart just specified .
        myChart.setOption(option);
    </script> -->
	
	
	<!-- <head>
	  <meta charset="utf-8">
	  <title></title>
	  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	  introduce ECharts Script 
	  <script src="js/echarts.min.js"></script>
	</head> -->
	
	<body>
	  <!--- by ECharts Prepare one with size ( Wide and high ) Of DOM-->
	  <div id="main" style="width: 600px; height: 400px"></div>
	  <script type="text/javascript">
	    var myChart = echarts.init(document.getElementById("main"));
	    var option = {
    
			title: {
    
				text:" Statistical chart of clothing sales ",
			},
	      tooltip: {
    
	        trigger: 'axis',
	        axisPointer: {
      
	          type: 'shadow' 
	        }
	      },
	      legend: {
    
	        data: [' shirt ', ' Woolen sweater ', ' Snow spins unlined upper garment ', ' The trousers ',
	          ' High heels ', ' socks ', ' other ']
	      },
	      toolbox: {
    
	        show: true,
	       
	        orient: 'vertical',
	
	        x: 'right',
	        y: 'center',
	
	        feature: {
    
	          mark: {
     show: true },
	          dataView: {
     show: true, readOnly: false },
	          magicType: {
     show: true, type: ['line', 'bar', 'stack', 'tiled'] },
	          restore: {
     show: true },
	          saveAsImage: {
     show: true }
	        }
	      },
	      calculable: true,
	      xAxis: [{
    
	        type: "category",
	        data: ["1 month ", "2 month ", "3 month ", "4 month ", "5 month ", "6 month ", "7 month ", "8 month ", "9 month ", "10 month ", "11 month ", "12 month "]
	
	      }],
	
	      yAxis: [
	        {
    
	          type: 'value'
	        }
	      ],
	
	      series: [
	        {
    
	          name: ' shirt ',
	          type: 'bar',
	          data: [5, 6, 12, 20, 21, 21, 21, 15, 17, 8, 7, 22, 12]
	        },
	        {
    
	          name: ' Woolen sweater ',
	          type: 'bar',
	          data: [20, 18, 30, 22, 22, 24, 9, 12, 21, 24, 22, 12]
	        },
	        {
    
	          name: ' Snow spins unlined upper garment ',
	          type: 'bar',
	          data: [36, 20, 20, 23, 28, 21, 13, 16, 12, 28, 21, 22]
	        },
	        {
    
	          name: ' The trousers ',
	          type: 'bar',
	          data: [10, 12, 18, 21, 25, 22, 12, 14, 32, 21, 18, 21]
	        },
			{
    
			  name: ' High heels ',
			  type: 'bar',
			  data: [10, 11, 17, 18, 13, 12, 14, 21, 12, 31, 21, 18]
			},
	        {
    
	          name: ' socks ',
	          type: 'bar',
	          data: [20, 19, 22, 21, 23, 21, 19, 24, 32, 21, 24, 21],
	          // start
	
	          markLine: {
    
	            data: [
	
	              [
	                {
    
	                  name: ' The line between two coordinates ',
	                  coord: [10, 10]
	                },
	                {
    
	                  coord: [20, 30]
	                }
	              ],
	
	             
	            ]
	          }
	          
	        },
	      ]
	    };
	
	
	    // Use the configuration item and data display chart just specified 
	    myChart.setOption(option); 
	  </script>
	  
	  <!-- jQuery (Bootstrap  All of the  JavaScript  Plug ins all depend on  jQuery, So it has to be in the front -->
	  		    <script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
	  		    <!--  load  Bootstrap  All of the  JavaScript  plug-in unit . You can also load only a single plug-in as needed . -->
	  		    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	</body>
	

</body>
</html>

copyright notice
author[m0_ sixty-two million two hundred and twenty-one thousand two h],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290600156750.html

Random recommended