先看效果

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的涟漪水波效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。