java地图图表动态亮点,echarts全国地图图表标注效果

一、效果图

1615279375.jpg

二、代码上传

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

var app = {};

var option;

var data = [

{ name: '海门服务站', value: 134, content: '1' },

{ name: '鄂尔多斯', value: 134, content: '2' },

{ name: '招远', value: 134, content: '3' },

{ name: '舟山', value: 134, content: '4' },

{ name: '齐齐哈尔', value: 134, content: '5' },

{ name: '盐城', value: 134, content: '6' },

{ name: '赤峰', value: 134, content: '7' },

{ name: '青岛', value: 134, content: '8' },

{ name: '抚顺', value: 135, content: '33' },

{ name: '玉溪', value: 135, content: '34' },

{ name: '张家口', value: 135, content: '姓名：李**
电话：159****6228
服务站编号：鲁P030001
地址：牛角店镇夏码村南' },

{ name: '盐城1', value: 133, content: '6' },

{ name: '赤峰2', value: 133, content: '7' },

{ name: '青岛3', value: 133, content: '8' },

]

var geoCoordMap = {

'海门': [121.15, 31.89],

'鄂尔多斯': [109.781327, 39.608266],

'招远': [120.38, 37.35],

'舟山': [122.207216, 29.985295],

'齐齐哈尔': [123.97, 47.33],

'盐城': [120.13, 33.38],

'赤峰': [118.87, 42.28],

'青岛': [120.33, 36.07],

'抚顺': [123.97, 41.97],

'玉溪': [102.52, 24.35],

'张家口': [114.87, 40.82],

'盐城1': [125.153, 33.38],

'赤峰2': [112.877, 42.28],

'青岛3': [124.303, 36.07]

};

var convertData = function (data) {

console.log('data', data)

var res = [];

for (var i = 0; i < data.length; i++) {

var geoCoord = geoCoordMap[data[i].name];

if (geoCoord) {

// console.log('geoCoord', geoCoord)

res.push({

name: data[i].name + '服务站',

value: geoCoord.concat(data[i].value),

content: data[i].content,

});

}

}

return res;

};

option = {

tooltip: {

trigger: 'item',

formatter: function (b) {

// '{b}'

// console.log('b',b)

return b.data.content

},

},

bmap: {

center: [104.114129, 37.550339],

zoom: 5,

roam: true,

mapStyle: {

styleJson: [{

'featureType': 'water',

'elementType': 'all',

'stylers': {

'color': '#d1d1d1'

}

}, {

'featureType': 'land',

'elementType': 'all',

'stylers': {

'color': '#f3f3f3'

}

}, {

'featureType': 'railway',

'elementType': 'all',

'stylers': {

'visibility': 'off'

}

}, {

'featureType': 'highway',

'elementType': 'all',

'stylers': {

'color': '#fdfdfd'

}

}, {

'featureType': 'highway',

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

}, {

'featureType': 'arterial',

'elementType': 'geometry',

'stylers': {

'color': '#fefefe'

}

}, {

'featureType': 'arterial',

'elementType': 'geometry.fill',

'stylers': {

'color': '#fefefe'

}

}, {

'featureType': 'poi',

'elementType': 'all',

'stylers': {

'visibility': 'off'

}

}, {

'featureType': 'green',

'elementType': 'all',

'stylers': {

'visibility': 'off'

}

}, {

'featureType': 'subway',

'elementType': 'all',

'stylers': {

'visibility': 'off'

}

}, {

'featureType': 'manmade',

'elementType': 'all',

'stylers': {

'color': '#d1d1d1'

}

}, {

'featureType': 'local',

'elementType': 'all',

'stylers': {

'color': '#d1d1d1'

}

}, {

'featureType': 'arterial',

'elementType': 'labels',

'stylers': {

'visibility': 'off'

}

}, {

'featureType': 'boundary',

'elementType': 'all',

'stylers': {

'color': '#fefefe'

}

}, {

'featureType': 'building',

'elementType': 'all',

'stylers': {

'color': '#d1d1d1'

}

}, {

'featureType': 'label',

'elementType': 'labels.text.fill',

'stylers': {

'color': '#999999'

}

}]

}

},

series: [

{

type: 'scatter',

coordinateSystem: 'bmap',

data: convertData(data),

symbolSize: function (val) {

if(val[2]===134)

return val[2] /10;

},

encode: {

value: 2

},

label: {

formatter: '{b}',

position: 'right',

show: false

},

emphasis: {

label: {

show: true

}

},

itemStyle: {

normal: {

color: 'red', //紫色

}

}

},

{

type: 'scatter',

coordinateSystem: 'bmap',

data: convertData(data),

symbolSize: function (val) {

console.log('val2', val)

if(val[2]===133)

return val[2] /10;

},

encode: {

value: 133

},

label: {

formatter: '{b}',

position: 'right',

show: false

},

emphasis: {

label: {

show: true

}

},

itemStyle: {

normal: {

color: 'green',

}

}

},

{

type: 'effectScatter',

coordinateSystem: 'bmap',

data: convertData(data.sort(function (a, b, c) {

console.log(a, b, c)

return b.value - a.value;

}).slice(0, 3)),

symbolSize: function (val) {

console.log('b-a', val)

return val[2] / 10;

},

encode: {

value: 2

},

showEffectOn: 'render',

rippleEffect: {

brushType: 'stroke'

},

hoverAnimation: true,

label: {

formatter: '{b}',

position: 'right',

show: true

},

itemStyle: {

shadowBlur: 10,

// shadowColor: '#333'

color:'#333'

},

zlevel: 1

}

]

};

if (option && typeof option === 'object') {

myChart.setOption(option);

}