将echarts中的地图进行旋转显示(由于地图不规则，放到div块中显示不好看所有将其旋转)

最新推荐文章于 2024-05-13 11:32:22 发布
最新推荐文章于 2024-05-13 11:32:22 发布
阅读量6.9k 收藏 4
点赞数 3
文章标签： echarts javascript 前端
原文链接：https://blog.csdn.net/chensong8331/article/details/103486312
版权
将echarts中的地图进行旋转显示
摘要由CSDN通过智能技术生成

由于最近在写一个数据可视化页面，由于地图不规则，有的省份是比较长，有的省份比较宽，就会导致将地图放到页面上去时显得div盒子左右比较空旷，显得不好看所以就要将地图进行旋转在显示,如下图是旋转之前的效果：

下面是放到项目中没有做旋转处理的效果

 1.下载需要转换的全国各地省市的地图JSON数据：阿里云 DataV - 数据可视化平台

 2.将转换后的地图JSON数据复制到geojson.io编辑器( geoJson编辑器)中查看旋转处理后的地图样子，处理后的地图JSON数据显示效果如下图：

这是做了旋转之后的效果，没有放到项目中

实现思路：
网上的geoJson数据其实就是一个字段标准化的json数据，地图轮廓就是一个个经纬度坐标点绘出来的，既然是数据，那就可以获

最低0.47元/天 解锁文章
朽木自雕(itcoder)
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts中对整个图形旋转90°（实现div旋转90度）
qq_44687755的博客
08-03 1万+
现有需求，绘制如下图1 图1 实现方法是，先绘制图2 图2 对div旋转90度即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.j...
关于echarts地图旋转，div旋转之后地图上的点击事件有问题
qq1770301659的博客
03-07 605
echarts地图旋转
echarts3D，scatter自定义图标的symbolRotate角度动态计算
最新发布
qq_44879525的博客
05-13 238
【代码】echarts3D，scatter自定义图标的symbolRotate角度动态计算。
解决数据更新时，echarts图旋转问题
weixin_46322789的博客
05-06 2490
解决数据更新时，echarts图旋转问题
echarts-横坐标文字竖着显示和倾斜45度显示
hsany330的专栏
07-15 4380
竖着显示 xAxis ： { axisLabel:{ interval: 0, formatter: function (value) { //x轴的文字改为竖版显示 var str = value.split(""); return str.join("\n"); ..
vue 使用echarts-gl实现3d旋转地图
YL
01-29 1530
之前也有使用过echarts开发项目中涉及到的地图功能，当时使用geo来实现地图轮廓，看上去有种3d的感觉。首先安装下echarts和echarts-gl依赖，在这里注意的点是，echarts-gl版本可以安装低版本，默认安装的依赖版本运行后一直报错。，这也是实现3d地图的主要属性，针对geo3d中每个属性的功能大家可以在echarts文档进行查阅，这里我就不一一细说了。这里我截图展示的，需要看地图动效的，大家可以在本地运行看下地图自动旋转效果。接下来我们看下完整的代码。安装好依赖，在页面引入。
echarts使用中过程中的常用配置属性常见问题及绘制地图
热门推荐
法海你不懂爱
03-21 1万+
echarts使用中的常见的问题 1.给折线图画一条水准线 2.图表自适应容器 3.x轴文字过长显示不全的问题 4.echarts的点击事件 5.数据中如果有空值时 如何实现连接空值或者显示断开 6.关于echarts地图js文件制作问题 7.echarts引入地图文件 绘制地图 8.使用echarts绘制x轴可以自由伸缩的图表 1.给折线图画一条水准线 通常用echarts 我们会绘制...
echarts：3D图旋转后如何恢复初始状态
1111111111
05-16 1814
1、我们需要知道，旋转角度由option.grid3D.viewControl.alpha、beta来控制。 2、我们需要一个事件来触发旋转角度恢复，比如点击画布空白处的时候，旋转角度恢复到初始值，这里有一个难点是如何判断到底点的是空白区还是画布区。 切记，是this.myChart.getZr().on，这个方法相当于整个页面都能响应点击，可以返回坐标值。this.myChart.on('click',function(args)这种点击只能响应echart区域，可以拿到echart具体的数据。
3D自动旋转城市地图(湖南)区域柱图显示；echarts解决方案附所有代码；可以更换成任意省市
07-16
在本项目中，我们探讨的是如何使用Echarts这个强大的前端数据可视化库来创建一个3D自动旋转的城市地图，其中特定的区域用3D柱图表示。这个解决方案特别适用于展示地域性数据，例如湖南各地区的统计数据，同时用户也...
基于Echarts图表在div动态切换时不显示的解决方式
10-15
问题在于，当切换div时，Echarts图表可能不会自动更新其渲染状态，导致图表不显示，控制台报错：“Can't get dom width or height”。 这是因为Echarts在渲染图表时需要一个已经显示的DOM元素来获取其尺寸，而动态...
vue+echarts完整显示x轴的示例以及完整案例.zip
02-15
在使用ECharts进行数据可视化时，有时会遇到X轴（分类轴）的数据显示不完全的问题。这通常是由于数据量过多或者X轴区域宽度有限导致的。`vue+echarts`结合使用时，同样可能遇到此类问题。本示例提供了一个完整的解决...
echart 坐标轴字体部分倾斜
05-01
NULL 博文链接：https://1960370817.iteye.com/blog/2398394
echarts 地图demo
08-24
大家可以在http://echarts.baidu.com/ 下载文档或者代码，我这个只是单独抽取出来的一个例子，因为之前我问过这个问题http://ask.csdn.net/questions/197392，有好多同行在看，最后也忘记给出解决方案了，本来想共享给大家， 这个资源没有0分选项，哈哈，有需要的可以下载
将input框中输入内容显示在相应的div中【三种方法可选】
10-19
本篇文章主要介绍了在input框中输入内容，会相应的显示在下面的div中的不同做法：js方法；jQuery方法；AngularJs方法，具有很好的参考价值。下面跟着小编一起来看下吧
echarts地图直接显示数值.rar
11-18
在本案例中，需求是将ECharts地图应用于公司投屏展示，并且需要地图上的各个区域直接显示对应的数值，而不是仅在鼠标悬停时才显示。这涉及到ECharts的自定义标记（MarkPoint）功能以及地图数据的处理。 首先，...
使用echart.js和echarts-gl.js实现旋转地球
speedwalkman的专栏
02-18 1475
使用echart.js和echarts-gl.js实现旋转地球，非常美丽
echarts横坐标倾斜设置
猫头鹰的夜晚
01-11 2841
echarts横坐标内容如果过长的话，可将内容设置倾斜，角度随意调节。rotate: 50 //设置倾斜角度，数值 可设置 正负 两种，
echart x轴 倾斜_Echarts中线状图的X轴坐标标签倾斜样式
weixin_32202001的博客
12-29 1492
在echarts中应用线状图时可以展现很多的数据，而当数据量过多的时候，X轴的坐标就会显示不全，因为整个图形的宽度是一定的，X轴的全长是一定的比如下面的例子中 X轴是常用的日期格式 20140508 这样子而经过简单的配置，可以达到一个理想的效果，如下其中相关的需要配置的option参数为：formatDate:function(datestring){if(datestring.length!=...
echart实现地图展示
u010289111的专栏
06-01 2045
但是实现的时候发现了一个问题平台下载下来的地图文件是有一百多kb的有点大。我是选择了其它类型下的FeatureCollection类型然后直接下载到本地，在项目里面引入的。// color: '#6cb3e4', //标志颜色。text: ['高', '低'], // 文本，默认为数值文本。import geoJson from './hunan.json' //地图包。// aspectScale: 0.75, //长宽比。// name: '点',
vue中使用echarts3D地图禁止旋转
05-12
可以通过设置 `roam` 属性为 `false` 来禁止echarts3D地图的旋转。具体实现方法为： ``` <template> <div id="chart"></div> </template> <script> import echarts from 'echarts' export default { mounted() { let chart = echarts.init(document.getElementById('chart')) chart.setOption({ // 其他option配置 globe: { roam: false // 禁止旋转 } }) } } </script> ``` 在以上代码中，我们设置了 `globe.roam` 属性为 `false`，这样就可以禁止echarts3D地图的旋转。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值