bootstrap(6)

最新推荐文章于 2024-07-30 16:49:30 发布

QiaoG_

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量117

点赞数

文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/QiaoG_/article/details/124432584

版权

ECharts 柱状图数据可视化前端开发 JavaScript

关键词由CSDN通过智能技术生成

代码

<body>
	

		
		  <div id="main" style="width: 600px;height:400px;"></div>
		 
		      <script type="text/javascript">
		        // 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));
		  
		        // 指定图表的配置项和数据
		       option = {
		         title: {
		           text: ''
		         },
		         tooltip: {
		           trigger: 'axis',
		           axisPointer: {
		             type: 'shadow'
		           }
		         },
		         legend: {},
		         grid: {
		           left: '3%',
		           right: '4%',
		           bottom: '3%',
		           containLabel: true
		         },
		         xAxis: {
		           type: 'value',
		           boundaryGap: [0, 0.01]
		         },
		         yAxis: {
		           type: 'category',
		           data: ['1月', '2月', '3月', '4月', '5月', '6月','7月','8月','9月','10月','11月','12月']
		         },
		         series: [
		           {
		             name: '衬衫',
		             type: 'bar',
		             data: [5, 6, 12, 20, 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]
				   },
		         ]
		       };
			  
		  
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
		      </script>
		    

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="js/bootstrap.min.js"></script>
	<script src="js/echarts.min.js"></script>
</body>

效果图

在这里插入图片描述

QiaoG_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap(6)

代码<body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main'));
复制链接

扫一扫