效果图
湖南地图json下载地址DataV.GeoAtlas地理小工具系列 (aliyun.com)
代码配置
import * as echarts from 'echarts'
import hunanMapData from './map.json' //湖南地图json
import back from '@/assets/images/back.png'
export default {
data() {
return {
option:{},
tempData1:[
{
name: '张家界市',
value: [110.079921,29.397401],
ph: 7.7,
rjy: 9.32,
},
{
name: '常德市',
value: [111.791347,29.300225],
ph: 7.7,
rjy: 9.32,
},
{
name: '岳阳市',
value: [113.5,29.07029],
ph: 7.7,
rjy: 9.32
},
{
name: '怀化市',
value: [109.17824,27.350082],
ph: 7.7,
rjy: 9.32,
},
{
name: '长沙市',
value: [113.382279,28.19409],
ph: 7.7,
rjy: 9.32,
},
{
name: '郴州市',
value:[113.332067,25.593589],
ph: 7.7,
rjy: 9.32,
},
],
tempData2:[
{
name: '岳阳市',
value: [113.2,28.9],
},
{
name: '长沙市',
value: [113.102279,28.09409],
},
{
name: '常德市',
value: [111.591347,29.100225],
},
{
name: '张家界市',
value: [110.559921,29.297401],
},
{
name: '湘西土家族苗族自治州',
value: [109.739735,28.499296],
},
{
name: '怀化市',
value: [110.17824,27.450082],
},
{
name: '益阳市',
value: [111.975042,28.370066],
},
{
name: '娄底市',
value: [111.608497,27.658136],
},
{
name: '湘潭市',
value: [112.604052,27.62973],
},
{
name: '邵阳市',
value: [110.86923,26.807842],
},
{
name: '衡阳市',
value: [112.557693,26.700358],
},
{
name: '永州市',
value: [111.708019,25.734516],
},
{
name: '株洲市',
value: [113.551737,26.975806],
},
{
name: '郴州市',
value:[113.132067,25.793589],
},
],
};
},
var myChart = echarts.init(document.getElementById('hunanMap'));
this.option = {
tooltip: {
show: false,
},
geo: {
map: 'hunan', //湖南的项目
show: true,
roam: false,
zoom: 1.23,//3d阴影效果
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
areaColor: '#00091a',
borderColor: '#00091a', //线
shadowColor: '#0f5d9d',
shadowBlur: 20,
shadowOffsetX: -10, //
shadowOffsetY: 10,
opacity: 0.5,
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
},
}
},
series: [
{
type: 'map',
zoom: 1.2,//等比缩放
mapType: 'hunan',
label: {
show: true
},
label: {
show: true,
color: '#fff',
},
select: {
label: {
show: true,
color: '#fff',
},
itemStyle:{
areaColor: {
type: 'linear-gradient',
x: 0,
y: 300,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(99, 177, 217, 0.5)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(99, 177, 217, 0.5)' // 50% 处的颜色
}],
global: true // 缺省为 false
},
borderWidth: 0
}
},
itemStyle: {
normal: {
borderColor:'rgba(147, 235, 248, 0.5)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(147, 235, 248, 0.1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 0.5)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: { //鼠标事件区块样式
areaColor: {
type: 'linear-gradient',
x: 0,
y: 300,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(99, 177, 217, 0.5)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(99, 177, 217, 0.5)' // 50% 处的颜色
}],
global: true // 缺省为 false
},
borderWidth: 0
}
},
data: [
{name: this.cityName, selected: true,id:1,"coord": [100,4300],} // 选中某市
]
},
{
tooltip: {
show: false,
},
type: 'effectScatter', //标记点
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'stroke'
},
showEffectOn: 'render',
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'rgba(0,255,246,0.1)'
}, {
offset: 0.6,
color: 'rgba(0,255,246,0.4)'
}, {
offset: 0.8,
color: 'rgba(0,255,246,0.6)'
}],
global: false // 缺省为 false
},
},
label: {
normal: {
color: '#fff',
},
},
symbol: 'circle',
symbolSize: 14,
data: this.tempData2,
zlevel: 1,
},
{
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'image://'+back,
// legendHoverLink: true,
symbolSize: [120, 85],
symbolOffset: [50, 0],
legendHoverLink: true,
label: {
show: true,
offset: [0, -5], //偏移设置
fontSize: 12,
lineHeight: 23,
// borderWidth: 1,
// backgroundColor: '#061a4c',
// borderColor: '#2BD8FB',
// padding: 6,
formatter: function(value) {
return `{name|${value.data.name}}\n系统数量:{pt|${value.data.ph}个}\n表数{pt|${value.data.rjy}个}`;
},
rich: {
name: {
fontWeight: 'bold',
fontSize: 12,
color: '#fff',
},
pt: {
fontSize: 12,
color: '#2BD8FB',
},
},
color: '#fff',
},
itemStyle: {
normal: {
color: '#D8BC37', //标志颜色
shadowBlur: 2,
shadowColor: 'D8BC37',
},
},
data: this.tempData1,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
zlevel: 1,
}
]
};
console.log('option',this.option);
myChart.setOption(this.option);
