aaaaa

最新推荐文章于 2024-04-08 14:05:40 发布

m0_62155359

最新推荐文章于 2024-04-08 14:05:40 发布

阅读量66

点赞数

文章标签：开发语言

本文链接：https://blog.csdn.net/m0_62155359/article/details/124437279

版权

在这里插入图片描述
···

Bootstrap 101 Template

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">


<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

			<div class="container">
				<div class="row">
				 <div class="col-md-6">
					<div id='main' style="width: 400px; height: 300px;">
						
					</div>
				 </div>
				</div>
			</div>
	</div>
</div>

<script src="./js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	      var myChart = echarts.init(document.getElementById('main'));
	
	      // 指定图表的配置项和数据
	      var option = {
	         color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
	          title: {
	            text: 'Gradient Stacked Area Chart'
	          },
	          tooltip: {
	            trigger: 'axis',
	            axisPointer: {
	              type: 'cross',
	              label: {
	                backgroundColor: '#6a7985'
	              }
	            }
	          },
	          legend: {
	            data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
	          },
	          toolbox: {
	            feature: {
	              saveAsImage: {}
	            }
	          },
	          grid: {
	            left: '3%',
	            right: '4%',
	            bottom: '3%',
	            containLabel: true
	          },
	          xAxis: [
	            {
	              type: 'category',
	              boundaryGap: false,
	              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	            }
	          ],
	          yAxis: [
	            {
	              type: 'value'
	            }
	          ],
	          series: [
	            {
	              name: 'Line 1',
	              type: 'line',
	              stack: 'Total',
	              smooth: true,
	              lineStyle: {
	                width: 0
	              },
	              showSymbol: false,
	              areaStyle: {
	                opacity: 0.8,
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	                  {
	                    offset: 0,
	                    color: 'rgb(128, 255, 165)'
	                  },
	                  {
	                    offset: 1,
	                    color: 'rgb(1, 191, 236)'
	                  }
	                ])
	              },
	              emphasis: {
	                focus: 'series'
	              },
	              data: [140, 232, 101, 264, 90, 340, 250]
	            },
	            {
	              name: 'Line 2',
	              type: 'line',
	              stack: 'Total',
	              smooth: true,
	              lineStyle: {
	                width: 0
	              },
	              showSymbol: false,
	              areaStyle: {
	                opacity: 0.8,
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	                  {
	                    offset: 0,
	                    color: 'rgb(0, 221, 255)'
	                  },
	                  {
	                    offset: 1,
	                    color: 'rgb(77, 119, 255)'
	                  }
	                ])
	              },
	              emphasis: {
	                focus: 'series'
	              },
	              data: [120, 282, 111, 234, 220, 340, 310]
	            },
	            {
	              name: 'Line 3',
	              type: 'line',
	              stack: 'Total',
	              smooth: true,
	              lineStyle: {
	                width: 0
	              },
	              showSymbol: false,
	              areaStyle: {
	                opacity: 0.8,
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	                  {
	                    offset: 0,
	                    color: 'rgb(55, 162, 255)'
	                  },
	                  {
	                    offset: 1,
	                    color: 'rgb(116, 21, 219)'
	                  }
	                ])
	              },
	              emphasis: {
	                focus: 'series'
	              },
	              data: [320, 132, 201, 334, 190, 130, 220]
	            },
	            {
	              name: 'Line 4',
	              type: 'line',
	              stack: 'Total',
	              smooth: true,
	              lineStyle: {
	                width: 0
	              },
	              showSymbol: false,
	              areaStyle: {
	                opacity: 0.8,
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	                  {
	                    offset: 0,
	                    color: 'rgb(255, 0, 135)'
	                  },
	                  {
	                    offset: 1,
	                    color: 'rgb(135, 0, 157)'
	                  }
	                ])
	              },
	              emphasis: {
	                focus: 'series'
	              },
	              data: [220, 402, 231, 134, 190, 230, 120]
	            },
	            {
	              name: 'Line 5',
	              type: 'line',
	              stack: 'Total',
	              smooth: true,
	              lineStyle: {
	                width: 0
	              },
	              showSymbol: false,
	              label: {
	                show: true,
	                position: 'top'
	              },
	              areaStyle: {
	                opacity: 0.8,
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	                  {
	                    offset: 0,
	                    color: 'rgb(255, 191, 0)'
	                  },
	                  {
	                    offset: 1,
	                    color: 'rgb(224, 62, 76)'
	                  }
	                ])
	              },
	              emphasis: {
	                focus: 'series'
	              },
	              data: [220, 302, 181, 234, 210, 290, 150]
	            }
	          ]
	      };
	
	      // 使用刚指定的配置项和数据显示图表。
	      myChart.setOption(option);
</script>