原图：
地图显示市级区域，按照设置参数不同热力图颜色不同，自动循环显示所有热力图信息
代码：
//订单热力图接口
function OrderMap() {
getOrdermap().then(res => {
console.log(res);
var center1 = []
for (var i = 0; i < res.length; i++) {
for (var j = 0; j < city.length; j++) {
if (res[i].cityname == city[j].name) {
city[j].value = res[i].totalprice
}
}
}
var chart5 = echarts.init(document.getElementById('ddrlt'));
//最重要的'chinaCity'
echarts.registerMap('china', chinaCity);
var option5 = {
tooltip: {
trigger: "item",
formatter: function (e, t, n) {
return .5 == e.value ? e.name + "：数量" : e.seriesName + "
" + e.name + "：" + e.value
}
},
// layoutCenter: ['50%', '50%'],//位置
// layoutSize:'80%',//大小
visualMap: { //设置热力图参数
min: 0, //最小值
max: 1000, //最大值
right: 26, //位置
bottom: 40,
showLabel: !0,
text: ["高", "低"],
pieces: [{
gt: 10000, //参数值
label: "> 10000", //显示的文本
color: "#0066ff" //颜色
}, {
gte: 1000,
lte: 10000,
label: "1000 - 10000",
color: "#0078ff"
}, {
gte: 100,
lt: 1000,
label: "100 - 1000",
color: "#4a9cfe"
}, {
gt: 1,
lt: 100,
label: "1 - 100",
color: "#79baff"
}, {
value: 0,
color: "#a5c2e2"
}],
textStyle: {
color: '#0078ff',
fontSize: 14
},
show: !0
},
geo: {
map: "china", //必须，地图名称
roam: !1,
scaleLimit: {
min: 1,
max: 2
},
zoom: 1.05,
top: 105,
left: 'center',
label: {
normal: {
show: false,
fontSize: "12",
color: "rgba(0,0,0,0.3)"
}
},
// 这里是重点！！！
// 不希望地图展示哪些部分
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
],
itemStyle: {
normal: {
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#F3D958",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: [{
name: "数量",
type: "map",
geoIndex: 0,
data: city
}]
};
chart5.setOption(option5);
//监听
window.addEventListener("resize", chart5);
// 循环
var index1 = -1;
var timer1;
if(!isMap1){
timer1 = setInterval(function () {
//隐藏提示框
chart5.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index1
});
// 显示提示框
chart5.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index1 + 1
});
// 取消高亮指定的数据图形
chart5.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index1
});
// 高亮指定的数据图形
chart5.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index1 + 1
});
index1++;
if (index1 === 730) {
index1 = -1;
}
}, 2000);
isMap1 = true
}
})
}
chinaCity 市级地图json包
链接: https://pan.baidu.com/s/1tDNWYtYN_wbUO3GVIuSIOA
提取码: wcg9
下载完成直接新建一个js文件
在页面引用js，直接用chinaCity变量就可以
文章来源
您阅读本篇文章共花了：
发表评论