graph.dataCenterMap = function (dom, data) {
var myChart = echarts.init(document.getElementById(dom));
var label1 = {
normal: {
position: 'top',
// padding: [30, 0, 0, 0],
// offset: [0, 10],
color: '#1DE9B6',
show: true,
width: 3.54 * vwToPx,
height: 5.09 * vhToPx,
lineHeight: 5.09 * vhToPx,
formatter: function (params) {
console.log(params);
var html = '';
var info1 = params.data.info;
var info2 = params.data.info2;
if (info1) {
html = info1;
} else if (info2) {
html = info2;
}
return ['{a|' + html + '}'];
},
fontSize: 12,
// verticalAlign: 'bottom',
backgroundColor: {
image: '../../images/mapSend.png',
},
rich: {
a: {
padding: [0, 0, (5.09 * vhToPx) / 2, 0],
align: 'center',
color: '#fff',
},
},
},
};
var labelData1 = [
{ value: [125.774678, 44.389735], info: 10, info2: 8 },
{ value: [126.57, 43.87], info: 7 },
];
// var temData1 = [];
labelData1.some(function (item, index) {
var temLabel = jQuery.extend(true, {}, label1);
if (item.info) {
temLabel.show = true;
}
item.label = temLabel;
});
// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
myChart.showLoading();
let index = -1;
echarts.registerMap('mychina', geoJson);
myChart.hideLoading();
var option = {
geo: [
{
map: 'mychina',
// zIndex: -1,
aspectScale: 0.75, //长宽比
zoom: 1.1,
roam: false,
regions: [
{
name: '南海诸岛',
opacity: 0,
show: false,
itemStyle: {
opacity: 0,
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
emphasis: {
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
label: {
show: false, // 隐藏文字
},
},
],
itemStyle: {
normal: {
borderWidth: 0, //设置外层边框
borderColor: 'RGBA(72, 173, 220, 1)',
shadowColor: 'RGBA(23, 68, 84, 0.62)',
areaColor: 'RGBA(23, 50, 69, 0.5)',
shadowOffsetX: -10,
shadowOffsetY: 35,
},
emphasis: {
areaColor: 'RGBA(27, 73, 91, 1)',
borderWidth: 0,
show: false,
color: 'RGBA(27, 73, 91, 1)',
label: {
show: false,
},
},
},
},
],
series: [
// 基础地图绘制
{
type: 'map',
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
},
},
emphasis: {
show: false,
textStyle: {
color: '#fff',
},
},
},
itemStyle: {
normal: {
borderColor: 'RGBA(72, 173, 220, 1)',
borderWidth: 1,
areaColor: 'RGBA(23, 50, 69, 0.5)',
},
emphasis: {
borderColor: 'RGBA(72, 173, 220, 1)',
borderWidth: 1,
areaColor: 'RGBA(23, 50, 69, 0.5)',
},
},
zoom: 1.1,
aspectScale: 0.75, //长宽比
map: 'mychina', //使用
// data: data[0],
data: [
{
name: '延边州',
selected: true,
emphasis: {
itemStyle: {
areaColor: 'RGBA(72, 173, 220, 0.5)',
borderColor: 'RGBA(72, 173, 220, 1)',
borderWidth: 1,
},
},
info: 10,
info2: 7,
},
{
name: '吉林市',
selected: true,
emphasis: {
itemStyle: {
areaColor: 'RGBA(72, 173, 220, 0.5)',
borderColor: 'RGBA(72, 173, 220, 1)',
borderWidth: 1,
},
},
},
],
},
// 点的绘制
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 15,
scale: 2.5,
brushType: 'stroke',
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(72, 173, 220, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 241, 215, 1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
hoverAnimation: false,
// label: {
// normal: {
// position: 'top',
// offset: [0, -10],
// color: '#1DE9B6',
// show: true,
// formatter: function (params) {
// console.log(params);
// var html = '';
// var info1 = params.data.info;
// var info2 = params.data.info2;
// if (info1) {
// html += '发送' + info1 + '
';
// } else if (info2) {
// html += '接收' + info2 + '
';
// }
// return html;
// },
// },
// },
itemStyle: {
normal: {
color: '#1DE9B6',
/* function (value){ //随机颜色
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}*/
shadowBlur: 10,
shadowColor: '#333',
},
},
symbolSize: 8,
data: [
{ value: [125.774678, 44.389735], info: 10, info2: 8 },
{ value: [126.57, 43.87], info: 7 },
],
// data: data[1], //points,
},
//地图线的动画效果
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'pin', //箭头图标
symbolSize: 8, //图标大小
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(72, 173, 220, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 241, 215, 1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(72, 173, 220, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 241, 215, 1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
width: 1, //线条宽度
opacity: 0.1, //尾迹线条透明度
curveness: 0.4, //尾迹线条曲直度
},
},
// data: data[2],
data: [
{
coords: [
[125.774678, 44.389735],
[126.57, 43.87], //右上
],
},
{
coords: [
[116.4551, 40.2539],
[143.4543, 18.9222], //右下
],
},
{
coords: [
[113.12244, 23.009505],
[60.4543, 25.9222], //左下
],
},
],
},
// 对话框的绘制 发出
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
// zlevel: 1,
rippleEffect: {
period: 0,
scale: 0,
brushType: 'stroke',
opacity: 0,
},
zlevel: 10,
// opacity: 0,
hoverAnimation: false,
symbolSize: 0.000001,
data: labelData1,
// data: data[1], //points,
},
],
};
myChart.setOption(option, true);
return myChart;
};
