vue echarts 实现地图大气泡图

1.插件使用vue-echarts

插件地址 https://www.npmjs.com/package/vue-echarts

2.安装之后 在main.js 引入

import ECharts from 'vue-echarts';

import chinaMap from "./assets/js/china.json";

ECharts.registerMap("china", chinaMap);

如果报错 找不到 地图

在html引入

3.注册 echarts 组件

Vue.component('echarts', ECharts);

4.实现大气泡地图代码

getMapData() {

this.mapEchartsData = {

title: {

text: "",

subtext: "",

x: "center",

textStyle: {

color: "#fff"

}

},

tooltip: {

trigger: "item",

formatter: function(params) {

return params.name + " : " + params.value[2];

}

},

visualMap: {

min: 0,

max: 200,

show: false,

calculable: false,

inRange: {

color: ["#65a0f7"]

},

textStyle: {

color: "#fff"

}

},

geo: {

map: "china",

layoutCenter: ['50%', '50%'],

layoutSize: 630,

label: {

emphasis: {

show: false

}

},

itemStyle: {

normal: {

areaColor: "#F4F5F7",

borderColor: "#111"

},

emphasis: {

areaColor: "#ECF0F3"

}

},

regions: [

{

name: "南海诸岛",

value: 0,

show: false,

itemStyle: {

normal: {

opacity: 0,

label: {

show: false

},

color: "#71D4E7"

}

}

}

]

},

series: [

{

name: "pm2.5",

type: "effectScatter",

scaling: 1.7,

//该系列使用的坐标系

coordinateSystem: "geo",

symbolSize: function(val) {

return val[2] / 10;

},

data: [

{ name: "合肥", value: [117.29, 32.0581, 134] },

{ name: "上海", value: [121.4648, 31.2891, 90] },

{ name: "北京", value: [116.4551, 40.2539, 210] },

{ name: "杭州", value: [119.5313, 29.8773, 30] },

{ name: "乌鲁木齐", value: [87.9236, 43.5883, 230] },

{ name: "长沙市", value: [113.0823, 28.2568, 21] },

{ name: "广州", value: [113.5107, 23.2196, 90] },

{ name: "南京", value: [118.8062, 31.9208, 55] },

{ name: "成都", value: [103.9526, 30.7617, 33] },

{ name: "武汉", value: [114.3896, 30.6628, 66] },

{ name: "中山", value: [113.4229, 22.478, 21] }

],

//配置何时显示特效'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。

showEffectOn: "render",

//目前只有ripple这一种

effectType: "ripple",

//涟漪特效相关配置。

rippleEffect: {

//动画的时间

period: 4,

//动画中波纹的最大缩放比例

scale: 4,

//波纹的绘制方式可选 'stroke' 和 'fill'

brushType: "stroke"

},

//Scatter才有这个属性,是否开启鼠标 hover 的提示动画效果

hoverAnimation: true

}

]

};

},

 

5. 地图data数据里面的格式  value 里面三个数据 跟别是 经度和纬度的坐标第三个是 数值

6.效果图