【无标题】

最新推荐文章于 2024-06-13 10:31:50 发布

qq_58519253

最新推荐文章于 2024-06-13 10:31:50 发布

阅读量61

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_58519253/article/details/124396535

版权

在这里插入代码片
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
		var app = {};
		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;
		
		const posList = [
		];
		app.configParameters = {
		  align: {
		    options: {
		      left: 'left',
		      center: 'center',
		      right: 'right'
		    }
		  },
		  verticalAlign: {
		    options: {
		      top: 'top',
		      middle: 'middle',
		      bottom: 'bottom'
		    }
		  },
		  position: {
		    options: posList.reduce(function (map, pos) {
		      map[pos] = pos;
		      return map;
		    }, {})
		  },
		  distance: {
		    min: 0,
		    max: 100
		  }
		};
		app.config = {
		  rotate: 90,
		  align: 'left',
		  verticalAlign: 'middle',
		  position: 'insideBottom',
		  distance: 15,
		  onChange: function () {
		    const labelOption = {
		    };
		    myChart.setOption({
		    });
		  }
		};
		const labelOption = {
		};
		option = {
		  tooltip: {
		    trigger: 'axis',
		    axisPointer: {
		      type: 'shadow'
		    }
		  },
		  legend: {
		    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子','高跟鞋','袜子']
		  },
		  toolbox: {
		  },
		  xAxis: [
		    {
		      type: 'category',
		      axisTick: { show: false },
		      data: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月']
		    }
		  ],
		  yAxis: [
		    {
		      type: 'value'
		    }
		  ],
		  series: [
		    {
		      name: '衬衫',
		      type: 'bar',
		      barGap: 0,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [5,6,12,20,21,21,15,17,8,7,22,12
]
		    },
		    {
		      name: '羊毛衫',
		      type: 'bar',
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [20,18,30,22,22,24,9,12,21,24,22,12
]
		    },
		    {
		      name: '雪纺衫',
		      type: 'bar',
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [36,20,20,23,28,21,13,16,12,28,21,22
]
		    },
		    {
		      name: '裤子',
		      type: 'bar',
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [10,12,18,21,25,22,12,14,32,21,18,21
]
		    },
			{
			  name: '高跟鞋',
			  type: 'bar',
			  label: labelOption,
			  emphasis: {
			    focus: 'series'
			  },
			  data: [10,11,17,18,13,12,14,21,12,31,21,18
]
			},
			{
			  name: '袜子',
			  type: 'bar',
			  label: labelOption,
			  emphasis: {
			    focus: 'series'
			  },
			  data: [20,19,22,21,23,21,19,24,32,21,24,21
]
			},
			
		  ]
		};
		option && myChart.setOption(option);
</script>
</body>
</html>

在这里插入图片描述

qq_58519253

关注

0
点赞
踩
0

收藏

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

在这里插入代码片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400p
复制链接

扫一扫

【无标题】

“相关推荐”对你有帮助么？