bootstrap

m0_62221227
已于 2022-04-26 14:12:10 修改
阅读量51
点赞数
文章标签： bootstrap
于 2022-04-26 14:11:06 首次发布
本文链接：https://blog.csdn.net/m0_62221227/article/details/124426540
版权
在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        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">
	 引入ECharts脚本
	  <script src="js/echarts.min.js"></script>
	</head> -->
	
	<body>
	  <!---为ECharts准备一个具备大小（宽高）的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:"服装销售统计图表",
			},
	      tooltip: {
	        trigger: 'axis',
	        axisPointer: {  
	          type: 'shadow' 
	        }
	      },
	      legend: {
	        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子',
	          '高跟鞋', '袜子', '其他']
	      },
	      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月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
	
	      }],
	
	      yAxis: [
	        {
	          type: 'value'
	        }
	      ],
	
	      series: [
	        {
	          name: '衬衫',
	          type: 'bar',
	          data: [5, 6, 12, 20, 21, 21, 21, 15, 17, 8, 7, 22, 12]
	        },
	        {
	          name: '羊毛衫',
	          type: 'bar',
	          data: [20, 18, 30, 22, 22, 24, 9, 12, 21, 24, 22, 12]
	        },
	        {
	          name: '雪纺衫',
	          type: 'bar',
	          data: [36, 20, 20, 23, 28, 21, 13, 16, 12, 28, 21, 22]
	        },
	        {
	          name: '裤子',
	          type: 'bar',
	          data: [10, 12, 18, 21, 25, 22, 12, 14, 32, 21, 18, 21]
	        },
			{
			  name: '高跟鞋',
			  type: 'bar',
			  data: [10, 11, 17, 18, 13, 12, 14, 21, 12, 31, 21, 18]
			},
	        {
	          name: '袜子',
	          type: 'bar',
	          data: [20, 19, 22, 21, 23, 21, 19, 24, 32, 21, 24, 21],
	          // start
	
	          markLine: {
	            data: [
	
	              [
	                {
	                  name: '两个坐标之间的标线',
	                  coord: [10, 10]
	                },
	                {
	                  coord: [20, 30]
	                }
	              ],
	
	             
	            ]
	          }
	          
	        },
	      ]
	    };
	
	
	    //使用刚指定的配置项和数据显示图表
	    myChart.setOption(option); 
	  </script>
	  
	  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边-->
	  		    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
	  		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	  		    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	</body>
	

</body>
</html>