【无标题】

最新推荐文章于 2024-02-17 12:36:47 发布

不想做小白的小白程序员

最新推荐文章于 2024-02-17 12:36:47 发布

阅读量76

点赞数

文章标签： bootstrap html5 前端

本文链接：https://blog.csdn.net/m0_58766017/article/details/124313470

版权

数据图表展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 1000px;height:500px;"></div>
		<script src="./js/echarts.min.js"></script>
		<script>
		
		

	
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;
	
	option = {
	  title: {
	    text: 'Rainfall vs Evaporation',
	    subtext: 'Fake Data'
	  },
	  tooltip: {
	    trigger: 'axis'
	  },
	  legend: {
	    data: ['衬衫', '羊毛衫', '雪纺绒', '裤子', '高跟鞋','袜子']
	  },
	  toolbox: {
	    show: true,
	    feature: {
	      dataView: { show: true, readOnly: false },
	      magicType: { show: true, type: ['line', 'bar'] },
	      restore: { show: true },
	      saveAsImage: { show: true }
	    }
	  },
	  calculable: true,
	  xAxis: [
	    {
	      type: 'category',
	      // prettier-ignore
	      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','七月','八月','九月','十月','十一月','十二月']
	    }
	  ],
	  yAxis: [
	    {
	      type: 'value'
	    }
	  ],
	  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: [	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, 18, 30, 22, 22, 24, 9,12,21,24,22,12],
		  
		},
		{
		  name: '袜子',
		  type: 'bar',
		 data: [	20,	19	,22	,21	,23	,21	,19	,24	,32	,21	,24	,21]
		  
		}
	  ]
	};
	
	option && myChart.setOption(option);


		</script>
	</body>
</html>

运行结果

在这里插入图片描述

另一种图表表示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <div id="main" style="width: 700px;height:500px;"></div>
		<script src="./js/echarts.min.js"></script>
		<script>
		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;
		
		option = {
		  title: {
		    text: 'Stacked Line'
		  },
		  tooltip: {
		    trigger: 'axis'
		  },
		  legend: {
		    data: ['衬衫', '羊毛衫', '雪纺绒', '裤子', '高跟鞋','袜子']
		  },
		  grid: {
		    left: '3%',
		    right: '4%',
		    bottom: '3%',
		    containLabel: true
		  },
		  toolbox: {
		    feature: {
		      saveAsImage: {}
		    }
		  },
		  xAxis: {
		    type: 'category',
		    boundaryGap: false,
		    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','七月','八月','九月','十月','十一月','十二月']
		  },
		  yAxis: {
		    type: 'value'
		  },
		  series: [
		    {
		      name: '衬衫',
		      type: 'line',
		      stack: 'Total',
		      data: [5, 6, 12, 20, 21, 21, 15,17,8,7,22,12]
		    },
		    {
		      name: '羊毛衫',
		      type: 'line',
		      stack: 'Total',
		      data: [20, 18, 30, 22, 22, 24, 9,12,21,24,22,12]
		    },
		    {
		      name: '雪纺绒',
		      type: 'line',
		      stack: 'Total',
		      data: [	36,	20	,20,	23	,28	,21	,13	,16	,12	,28	,21	,22]
		    },
		    {
		      name: '裤子',
		      type: 'line',
		      stack: 'Total',
		      data: [	10	,12	,18	,21	,25	,22	,12	,14	,32	,21	,18	,21]
		    },
		    {
		      name: '高跟鞋',
		      type: 'line',
		      stack: 'Total',
		      data: [	10,	11,	17	,18	,13	,12,	14,	21	,12	,31	,21,	18]
		    },
			{
			  name: '袜子',
			  type: 'line',
			  stack: 'Total',
			  data: [	20,	19	,22	,21	,23	,21	,19	,24	,32	,21	,24	,21]
			}
		  ]
		};
		
		option && myChart.setOption(option);
</script>
	</body>
</html>

运行结果

在这里插入图片描述

不想做小白的小白程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

数据图表展示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="main" style="width: 1000px;height:500px;"></div> <script src="./js/echarts.min.js"
复制链接

扫一扫