echarts中对整个图形旋转90°(实现div旋转90度)

现有需求,绘制如下图1

图1

实现方法是,先绘制图2

图2

对div旋转90度即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>


<div id="bar" style="height:230px; width:800px;margin-left:300px;margin-top:300px; transform:rotate(90deg);">  			
</div>				

<!-- 需要引用的JS -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 
<script type="text/javascript">
	$(function(){
		showBar();					
	});
 
	function showBar(){
		title = '多 Y 轴示例';
		var colors = ["#98C1AE","#B56434","#556B2F"];
		option = {
			color: colors,
		
			tooltip: {//提示框鼠标放轴上的时候显示,默认不显示配置以下属性可显示
				trigger: 'axis',//x轴触发
				axisPointer: {//坐标轴指示器配置项
					type: 'cross'
				}
			},

			grid: { // 控制图的大小,调整下面这些值就可以,
					x: 40,
					y: 40,
					x2: 40,
					y2: 50 
					},

			legend: {
				data:['Co-paper','Co-author','Co-Institute'],
				textStyle:{
                    fontSize: 15
                },
			},
			xAxis: 
				{
					type: 'category',//value数值轴'category' 类目轴'time' 时间轴'log' 对数轴
//					name: '年份',
//					nameTextStyle:{fontSize: 15},
					axisTick: {//坐标轴刻度相关设置。
						alignWithLabel: true
					},
					data: ['1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001',"2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018"],
					axisLabel: {
                    show: true,
                    rotate:90,

                textStyle: {
                  
                  fontSize: 15,    
            }
        }
				}
			,
			yAxis: [//多个y轴
				{
					type: 'value',

					axisLabel: {
						formatter: '{value} ',
						rotate:90,
						textStyle:{
                              fontSize: 15
                                }
					},		
					textStyle:{
                    fontSize: 15
                }
				},
				{
					type: 'value',
//					name: 'Co-author',
					min: 0,//最小刻度
					max: 150,//最大刻度
					offset: 150,//偏移量
//					position: 'right',
//					axisLine: {
//						lineStyle: {
//							color: colors[0]
//						}
//					},
					axisLabel: {
						rotate:90,
						formatter: '{value} ',textStyle:{
                              fontSize: 15
                                }
					},
					textStyle:{
                    fontSize: 15
                }
				},
				{
					type: 'value',
//					name: 'Co-Institute',
					min: 0,
					max: 150,
//					position: 'right',
					offset: 150,//偏移量
//					axisLine: {
//						lineStyle: {
//							color: colors[1]
//						}
//					},
					axisLabel: {
						rotate:90,
						formatter: '{value} ',
						textStyle:{
                              fontSize: 15
                                }
						
					},
					textStyle:{
                    fontSize: 15
                }
				}
			],
			series: [//顺序和yAxis对应
				{
					name:'Co-paper',
					type:'line',
					yAxisIndex: 2,
					data:[1,5,6,1,5,3,8,5,0,11,8,30,48,72,39,54,65,57,57,63,69,84,124,105,109,112,150,138,59]
				},
				{
					name:'Co-author',
					type:'line',
					data:[1,3,4,1,4,2,6,4,0,10,6,19,19,34,20,30,35,32,27,31,28,38,66,54,61,51,77,69,31]
				},
				{
					name:'Co-Institute',
					type:'bar',
					yAxisIndex: 1,//使用的 y 轴的 index,默认为0
					data:[1,1,2,1,3,1,4,3,0,9,4,10,10,13,7,12,15,10,10,13,7,13,21,20,20,13,22,26,12]
				}

			]
		};
			var chart = echarts.init(document.getElementById('bar'));
			chart.setOption(option);
	}
		
</script>

</html>

 

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值