Echarts可视化的简单应用

最新推荐文章于 2024-09-13 11:02:21 发布

想打球的程序猿

最新推荐文章于 2024-09-13 11:02:21 发布

阅读量140

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_52989010/article/details/124397063

版权

在这里插入图片描述
代码部分：

	<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>