echarts中对整个图形旋转90°（实现div旋转90度）

最新推荐文章于 2024-05-31 11:58:20 发布
最新推荐文章于 2024-05-31 11:58:20 发布
阅读量1.7w 收藏 11
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44687755/article/details/98319738
版权

现有需求，绘制如下图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>

 

qq_44687755
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
将echarts中的地图进行旋转显示(由于地图不规则，放到div块中显示不好看所有将其旋转)
qq_45404003的博客
12-22 7002
将echarts中的地图进行旋转显示
3D自动旋转城市地图(湖南)区域柱图显示；echarts解决方案附所有代码；可以更换成任意省市
07-16
资源解说：https://blog.csdn.net/qq_42197013/article/details/107379781
Echarts饼图(荧光旋转效果)
最新发布
No_Name_Cao_Ni_Mei的博客
05-31 1530
整体来看，代码实现了一个具有动画效果的图表，其中包含了多个自定义系列，用于展示不同类型的请假天数。本次实现的是一个饼图，蓝色科技背景色，星球转动效果 + 荧光显示。配置项进行样式设置。动画效果通过改变角度。// 初始化 ECharts 图表。并重新设置图表选项来实现。// ... 其他颜色值];// ... 其他系列配置项。// ... 其他样式设置。// ... 其他数据项。// ... 全局配置项。// ... 其他配置项。
echarts旋转图表、图表横屏显示或是屏幕旋转横屏示例
嘿喵财运旺旺
01-27 3950
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/> <title>Untitled Document</title> <script src="https://cd
echart 柱状图横坐标文字过长，如何旋转
学习笔记
05-11 5003
echart 条状图横坐标文字过长，如何旋转 有时候，在用条状图表的时候，如果横坐标文字过长，某些文字就会消失不显示，我们可以将其旋转一下，调整到合适的角度，就能正常显示横坐标文字了。 比如下面这样，某些文字已经消失： 修改 option.xAxis[0].axisLabel.rotate 值即可， 官方说明： https://echarts.apache.org/zh/option.html#xAxis.axisLabel.rotate 如下： let option = { xA
Echarts柱状图属性设置大全
热门推荐
sleepwalker_1992的专栏
08-29 1万+
Echarts柱状图属性设置大全
解决数据更新时，echarts图旋转问题
weixin_46322789的博客
05-06 2518
解决数据更新时，echarts图旋转问题
移动端（APP、微信）混合开发下ECharts图横屏旋转
牟云飞的博客
07-31 8399
在移动开发中，图表是一种常见的数据统计形式，但是在手机有限的屏幕中实现图文结合，图标会显示不清晰，这时需要图表能够支持横向旋转功能，以angularJS下ECharts图表为例，通过如下代码即可实现旋转： var options = { animation: 'fade', // What animation to use rotateOption: $scope...
echarts x轴数据旋转
偏执的小男孩儿
10-19 2888
echarts x轴数据旋转
echarts柱状图的样式调整及应用
qq_45991812的博客
03-09 6244
/symbolOffset: [0,-5],//轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //坐标轴上显示的文字。data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据。color: 'rgba(85, 88, 95, 1)' //x轴坐标的文字颜色。
echarts图表旋转
weixin_43765747的博客
12-22 4539
可以在div上设置旋转角度，这里我们设置角度为-15° -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); transform:rotate(-15deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 旋转前 旋转后 ...
echarts-柱状图-柱状图标签旋转
weixin_57246351的博客
04-18 3204
<template> <div> <div> <!--为echarts准备一个具备大小的容器dom--> <div id="org_ech_line"></div> </div> </div> </template> <script> import * as echarts from 'echarts' export default { dat
highcharts: 如何解决「移动端将图表旋转90度，tooltip表现不正常」？
weixin_34292402的博客
06-11 1897
背景 在项目中使用highcharts是很容易的，移动端也适配的不错，按照官网教程即可。但是在移动端，由于手机端屏幕太小，需求方希望可以弄一个全屏图，把手机横过来观察曲线。 正常： 竖过来： 很容易想到的一种实现方法：设置曲线container的宽为屏幕的高，高为屏幕的宽，然后给曲线的container加一个transform:rotat...
我需要一个炫酷的旋转的echarts图表
weixin_35748962的博客
02-10 547
要制作一个旋转的 echarts 图表，您需要在 JavaScript 代码中使用 echarts 的 API 进行设置。首先，您需要在网页中引入 echarts 库的脚本文件，然后定义一个图表的实例，并向其中添加数据。 接下来，您可以使用 echarts 的配置项来设置图表的样式和布局，包括图表的类型、图表的标题、图例、坐标轴标签等。您也可以使用 echarts 提供的动画效果，为图表添加旋转效...
echarts 旋转饼图
依古比古的博客
01-18 4234
var data = [],data2=[]; var trafficWay = [ { name: '病假', value: 20 },{ name: '事假', value: 1 },{ name: '婚假', value: 30 },{ name: '丧假', value: 40 },{ name: '年休假', value: 40 }]; var color=['#2A8BFD','#BAFF7F','#00F.
echart bar改变初始位置角度
MYG_G
11-13 1979
echart bar改变初始位置角度 代码链接：https://www.makeapie.com/editor.html?c=xT61k307DZ 博主拿官网的例子来举例。 echart的bar表示柱状图，如上图，默认数据的其实位置是逆时针，并且90度开始的。 如上图表示的echart图形的角度位置分布。 代码 改变起始位置重点： startAngle表示起始角度，他的范围是0-360度。 angleAxis: { max: 100, clockwise: false, // 逆时针 // 隐藏刻度线
ECharts折线图修改标记旋转角度 折点角度 倾斜
m0_59250071的博客
10-23 981
为了方便显示,在示例中将标点大小(symbolSize)和标点类型(symbol)进行设置。正值表示逆时针旋转。
echart柱状图标签旋转数据准备（前端/后端）
i5858588的博客
03-28 482
echart是我们经常使用的页面展示插件，漂亮精美。页面是靠数据驱动的。以柱状图标签旋转为例，介绍一下生成数据的思路。数据对应关系如图。
html文字旋转90度
06-01
要让 HTML 文字旋转 90 度，可以使用 CSS 的 transform 属性。具体实现方法如下： 1. 首先，在 HTML 文件中添加需要旋转的文字，比如： ```html <div class="rotate">Hello World</div> ``` 2. 然后，在 CSS 文件中对该文字进行样式设置，如下所示： ```css .rotate { transform: rotate(90deg); } ``` 这里的 transform 属性可以将元素进行旋转，其中 rotate() 函数表示旋转角度，单位为度数。这里设置为 90 度，即文字旋转 90 度。 3. 最后，可以根据需要对文字进行进一步的样式设置，比如调整文字大小、颜色、对齐方式等等。 ```css .rotate { transform: rotate(90deg); font-size: 24px; color: #333; text-align: center; } ``` 这样，就可以将 HTML 文字旋转 90 度了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值