echarts 地图 滚轮 缩放
原文链接:https://blog.csdn.net/weixin_42707181/article/details/94755890
一: 简单应用
echarts地图 鼠标滚动控制缩放大小比例
添加以下代码就可以
series: [{
type: "map",
map: name,
// center: [104.114129, 37.550339],//当前视角的中心点
zoom: 1, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
}]
可以去官方文档再详细看看
https://echarts.baidu.com/option.html#series-map.roam
二:复杂应用
echart 散点图、百度地图(需下载bmap.js、申请百度ak)、 iview tabs 一起使用时,出现滚轮缩放却向左移动的问题!
1此时需要关闭iview tabs 的 CSS3 动画效果
<Tabs v-bind:animated="false" >
2可能还会出现高度为0问题,修改样式:
.full-content{
position: relative;
height: 100%;
width:100%;
}
.full-content .ivu-tabs{
position: relative;
height: 100%;
width:100%;
}
.full-content .ivu-tabs .ivu-tabs-content{
height: calc(100% - 52px);
width:100%;
}
.full-content .ivu-tabs .ivu-tabs-content .ivu-tabs-tabpane{
height: 100%;
width:100%;
}
3还需要tabs 上层所有 div、 Layout ,修改宽度高度为100%
<div id="contentFirst" style="width:100%;height:100%">
<Layout style="width:100%;height:100%">
你可能会还会遇到以下问题:echarts +iview tabs 散点图 不显示、缩成一团
https://www.cnblogs.com/hao-1234-1234/p/13566005.htmlfalse
相关文章
- echarts
- Echarts个人实例
- echarts geo地图坐标转换为页面Offset坐标
- echarts参数详解--散点图
- 大数据可视化之---echarts地图组件
- Vue+Echarts监控大屏实例十六:Echarts对接天地图插件开发
- Vue+Echarts监控大屏实例十三:网络态势感知监控模板实例下
- arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析(附源码下载)
- echarts使用记录:Echarts的legend改变图例图标为自定义图片、tooltip如何加百分号
- echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据、echarts 图例显示到右边、折线图平滑曲线、echarts图例不显示问题、让x轴刻度居中、柱状图显示背景色
- Web 插件 之 ECharts 实现中国地图数据的简单展示实现
- HTML Echarts图形统计实时显示DHT11温度(二)
- django+echarts
- 关于echarts使用的一些tips
- echarts +iview tabs 散点图 不显示、缩成一团
- .net mvc 中引入 echarts dataTool prepareBoxplotData
- echarts tab 切换问题整理
- 使用Springboot+MybatisPlus+Echarts+Mysql从0-1完成中国地图可视化动态展示
- 世界国旗/地图:世界各国国旗图标整理/与echarts世界地图配置对应