drawechartmap() {
var that = this;
window.addEventListener("resize", function () {
myChart.resize();
});
var myChart = echarts.init(document.getElementById("echartmap"));
var uploadedDataURL = "js/assets/data-1528971808162-BkOXf61WX.json";
// 几大城市坐标
var data = this.list;
var labelData = [
{name: '盐田港', value: 1, coords: [[114.237, 22.5571], [121.724537, 26.726456]]},
{
name: '大铲湾港',
value: 1,
coords: [[113.863247421228, 22.5312412021239], [119.148915, 22.283712]]
},
{
name: '深圳小漠港',
value: 1,
coords: [[115.043340287618, 22.7710296767815], [118.78097, 19.970753]]
},
{
name: '惠州荃湾港',
value: 1,
coords: [[114.567119501524, 22.6945041397154], [112.599478, 17.057501]]
},
]
var seriesData = [];
seriesData.push({
name: '区域',
type: 'scatter',
coordinateSystem: 'geo',
data: labelData,
label: {
normal: {
show: true,
padding: [10, 20],
color: '#fff',
areaColor: '#fff',
backgroundColor: '#000',
borderRadius: 6,
formatter: '{b}'
},
emphasis: {
show: true
}
},
symbolSize: 1
})
function convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}
function convertData1(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap1[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}
function convertData2(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap2[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
}
var option = null;
$.get(uploadedDataURL, function (json) {
echarts.registerMap('js', json);
option = {
geo: [{
map: 'js',
aspectScale: 0.75,
roam: false, //是否允许缩放
zoom: 1.2, //默认显示级别
show: false,
itemStyle: {
normal: {
areaColor: 'rgba(142, 204, 174, 0)'
},
emphasis: {
areaColor: 'rgba(142, 204, 174, 0)'
}
},
}],
series: [
{
type: 'map',
mapType: 'js',
geoIndex: 0,
zoom: 1.2, //默认显示级别
label: {
normal: {
show: false,
position: 'top',
rich: {
name: {
color: '#fff',
align: 'center',
fontSize: 10,
padding: [1, 4, 1, 4],
backgroundColor: 'rgba(75, 152, 150, 1)'
},
pic: {
color: '#fff',
align: 'center',
width: 9,
height: 6,
lineHeight: 22,
backgroundColor: {
image: 'images/icon_sanjiao.png' // 这是vue写法，不是的按原来的写就行
},
},
},
},
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
borderColor: 'rgba(142, 204, 174, 0)',
borderWidth: 0,
areaColor: 'rgba(13, 87, 55, 0)'
},
emphasis: {
areaColor: 'rgba(13, 87, 55, 0)',
borderWidth: 0,
color: 'green'
}
},
}, {
type: 'lines',
data: labelData,
symbolSize: 5,
symbol: 'circle',
color: 'red',
label: {
show: true,
padding: [10, 10],
color: '#fff',
areaColor: 'red',
borderRadius: 6,
formatter: '{b}'
},
lineStyle: {
type: 'solid',
opacity: 1,
color: '#fff'
}
}
]
};
// 点击弹窗
myChart.on('click', function (params) {
console.log(params)
that.getactive(params.name)
myChart.setOption(option, false)
});
myChart.setOption(option);
});
},
