地图指定区域每隔1秒闪烁一次，大屏页面效果演示
var name = ""
var time = null
function getecharts5() {
var chartDom = document.getElementById('echarts5');
var myChart = echarts.init(chartDom);
var uploadedDataURL = "data/130900.json";
var nameMap = '沧州市';
window.dataList = [{name: '任丘市', value: 396},
{name: '青县', value: 66},
{name: '河间市', value: 222},
{name: '肃宁县', value: 688},
{name: '黄骅市', value: 75},
{name: '新华区', value: 121},
{name: '献县', value: 91},
{name: '沧县', value: 91},
{name: '泊头市', value: 479},
{name: '孟村回族自治县', value: 34},
{name: '海兴县', value: 631},
{name: '运河区', value: 631},
{name: '南皮县', value: 1203},
{name: '盐山县', value: 988},
{name: '吴桥县', value: 693},
{name: '东光县', value: 693},
];
var geoCoordMap = {};
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) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
console.log('res', res)
return res;
};
$.get(uploadedDataURL, function (gdMap) {
echarts.registerMap(nameMap, gdMap);
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(nameMap).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function (v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.center;
});
console.log(geoCoordMap)
//GDP
var optionMap = {
visualMap: [{
min: 0,
max: 1000,
show: false,
// text: ['High', 'Low'],
realtime: false,
calculable: false,
seriesIndex: [0],
inRange: {
color: ['#116EE1', '#34B8F7', '#2ACAEF', '#1290EC', '#0A86EB', 'rgb(128,128,255)', 'rgb(236,128,141)', 'rgb(194,128,255)', 'rgb(245,154,35)', 'rgb(112,182,3)', 'rgb(0,182,128)', 'rgb(99,0,191)']
}
},
{
min: 0,
max: 1000,
seriesIndex: 1,
show: false,
splitNumber: 4,
right: '2%',
inRange: {
color: ['#116EE1', '#34B8F7', '#2ACAEF', '#1290EC', '#0A86EB',].reverse()
},
formatter: function (value) {
return ''
}
}],
geo: {
map: nameMap,
show: false,
roam: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
}
},
series: [
{ // 地图块的相关信息
type: 'map',
map: nameMap,
zoom: 1.2,
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
fontWeight: 400,
color: 'rgb(0,0,0) '
}
}
},
data: window.dataList
},
{
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [40, 40],
label: {
normal: {
show: true,
textStyle: {
color: '#000',
fontSize: 10,
fontWeight: 600
},
formatter(value) {
return value.data.value[2]
}
}
},
hoverAnimation: true,
itemStyle: {
normal: {
color: 'pink' // 标志颜色
}
},
zlevel: 6,
data: convertData(window.dataList)
},
// {
// // 水波纹
// type: 'effectScatter',
// coordinateSystem: 'geo',
// data: convertData(
// data
// .sort(function (a, b) {
// return b.value - a.value;
// })
// .slice(0, 50)
// ),
// // symbolSize: function (val) {
// // return val[2] / 6;
// // },
// showEffectOn: 'render',
// // symbolOffset: [-10, 10], //偏移
// rippleEffect: {
// period: 10, // 动画时间，值越小速度越快
// scale: 4, // 波纹圆环最大限制，值越大波纹越大
// brushType: 'fill', // 波纹绘制方式 stroke, fill
// },
// zlevel: 2,
// },
]
};
myChart.clear()
myChart.resize()
myChart.setOption(optionMap, true);
myChart.on('click', function (params) {
showwin()
});
time = window.setInterval(() => {
console.log(123)
if (name) {
myChart.dispatchAction({
type: 'highlight', // 高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
seriesIndex: 0,
name: name
})
name = ""
} else {
myChart.dispatchAction({
type: 'downplay', // 取消高亮指定的数据图形
seriesIndex: 0
})
name = '黄骅市'
}
}, 1000)
});
}
// 清除闪烁
function getclear() {
clearInterval(time);
}
