vue 圆形 水波_vue项目百度地图+echarts的涟漪水波效果
先看效果
image.png
id="allmap"
class="map"
ref="map"
>
import echarts from "echarts";
import "echarts/extension/bmap/bmap";
export default {
data() {
return {
chart: echarts.ECharts,
bmap: {},
mapZoom: 6,
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.chart = echarts.init(this.$refs.map);
this.chart.setOption({
bmap: {
center: [116.43244,39.911172],
zoom: 16,
roam: true
},
series: [
{
type: "effectScatter",
coordinateSystem: "bmap",
data: [{ name: "111", value: [116.43244,39.911172] }],
symbolSize: [20, 20],
showEffectOn: "render",
rippleEffect: {
period: 2, // 漣漪特效的動畫周期
scale: 5, // 漣漪特效動畫中波紋的最大縮放比例
brushType: "fill" // 漣漪特效的波紋繪制方式
},
hoverAnimation: true,
label: {
normal: {
formatter: "",
show: false,
fontSize: 16,
color: "#222222",
fontWeight: "bolder",
lineHeight: 40,
position: ["200%", "200%"],
distance: 20,
align: "center",
backgroundColor: "#FFFFFF",
borderRadius: 5,
padding: 20,
shadowColor: "rgba(0,0,0,0.16)",
shadowBlur: 6,
shadowOffsetX: 0,
shadowOffsetY: 3,
width: 200
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: "#d3463e"
},
emphasis: {
color: "red"
}
},
zlevel: 1
}
]
});
// 獲取百度地圖實例，使用百度地圖自帶的控件
this.bmap = this.chart
.getModel()
.getComponent("bmap")
.getBMap();
this.bmap.setMinZoom(6); // 設置地圖最小縮放比例
this.bmap.setMaxZoom(24); // 設置地圖最大縮放比例
const _this = this;
// 監聽地圖比例縮放， 可以根據縮放等級控制某些圖標的顯示
this.bmap.addEventListener("zoomend", function() {
_this.mapZoom = _this.bmap.getZoom();
});
},
}
};
.content {
width: 100%;
margin-top: 8px;
height: calc(100% - 38px);
float: right;
.map {
width: 100%;
height: 100%;
float: left;
}
}
總結
以上是生活随笔為你收集整理的vue 圆形 水波_vue项目百度地图+echarts的涟漪水波效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2017计算机等级考试试题,2017年计
- 下一篇： java注册是什么意思_springcl