.agency_information {
width: 250px;
padding: 5px 0;
background: transparent;
border-radius: 5px;
}
.agency_title {
min-width: 150px;
height: auto;
margin-bottom: 6px;
font-size: 14px;
color: #ffffff;
font-weight: normal;
text-align: center;
}
.agency_type {
color: #fe0101;
}
.agency_info_row {
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: auto;
padding-left: 10px;
background: #ffffff33;
margin-bottom: 4px;
font-size: 12px;
color: #ffffff;
font-weight: normal;
}
.agency_info_row > label:first-child {
width: 60px;
height: auto;
margin-right: 20px;
text-align: left;
}
<div class="map" id="map" style="width:900px;height:900px;"></div>
function ecMapServicer(name) {
var uploadedDataURL = "json/wuhan.json";
// 基於準備好的dom,初始化echarts實例
const myChart = echarts.init(document.getElementById(name));
/* {name:'武漢', geoCoord:[114.31, 30.52]}, x-y座標軸起點[113.45, 29.95] */
var data_type_1 = [{
type: "一類",
name: "五零四文化廣場",
value: [114.31, 30.1222, 120]
},
{
type: "一類",
name: "五零四文化廣場",
value: [114.41, 30.32, 120]
},
{
type: "一類",
name: "五零四文化廣場",
value: [114.39, 30.52, 120]
},
{
type: "一類",
name: "五零四文化廣場",
value: [114.73, 30.72, 120]
}
];
var data_type_2 = [{
type: "二類",
name: "五零四文化廣場",
value: [114.2133, 30.1222, 120]
},
{
type: "二類",
name: "五零四文化廣場",
value: [114.01, 30.3222, 120]
},
{
type: "二類",
name: "五零四文化廣場",
value: [114.59, 30.82, 120]
},
{
type: "二類",
name: "五零四文化廣場",
value: [114.73, 30.72, 120]
}
];
var data_type_3 = [{
type: "三類",
name: "五零四文化廣場",
value: [114.27, 31.292, 120]
},
{
type: "三類",
name: "五零四文化廣場",
value: [114.21, 30.72, 120]
},
{
type: "三類",
name: "五零四文化廣場",
value: [114.429, 30.12, 120]
},
{
type: "三類",
name: "五零四文化廣場",
value: [114.73, 30.62, 120]
}
];
// 顯示加載動畫
myChart.showLoading();
$.getJSON(uploadedDataURL, null, function (data) {
echarts.registerMap("mapData", data);
myChart.hideLoading();
option = {
color: ["#91c7ae", "#749f83", "#ca8622"], //顏色組
tooltip: {
trigger: "item",
show: true,
padding: 0,
backgroundColor: "#ffffff33",
formatter: function (params) {
var str = `
<div class="agency_information">
<div class="agency_title">
${params.name}
<label class="agency_type">(${params.data.type})</label>
</div>
<div class="agency_info_row">
<label>建立時間:</label><label> 2007(使用)</label>
</div>
<div class="agency_info_row">
<label>負責人:</label><label> 張建華 </label>
</div>
<div class="agency_info_row">
<label>牀位數: </label><label> 200 </label>
</div>
<div class="agency_info_row">
<label>聯繫方式:</label><label> 125697415266</label>
</div>
<div class="agency_info_row">
<label>地址:</label><label> 武漢市xxxxxxxx</label>
</div>
</div>
`;
return str;
/* if (typeof params.value[2] == "undefined") {
return params.name + " : " + params.value;
} else {
return params.name + " : " + params.value[2];
} */
}
},
grid: {
top: 100
},
legend: {
orient: "vertical",
icon: "pain",
right: '10%',
bottom: '10%',
itemWidth: 20,
itemHeight: 12,
align: "left",
textStyle: {
color: "#fff",
fontSize: 12
},
data: ["一類", "二類", "三類"]
},
xAxis: {
show: false
},
yAxis: {
show: false
},
geo: {
show: true,
map: "mapData",
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
zoom: 1.2,
roam: true,
itemStyle: {
areaColor: "#1A2B75",
borderColor: "#3fdaff",
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: "#2B91B7"
}
}
},
series: [
// 一類
{
name: "一類",
type: "scatter",
coordinateSystem: "geo",
symbol: "image://img/icon_location_1.png",//自行找圖標
symbolSize: [14, 16],
label: {
normal: {
show: false,
backgroundColor: "#0D1151",
position: "right",
color: "#ffffff",
fontSize: "14",
padding: 20
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#00A0E9", //控制圖例和地圖標記點的顏色
borderWidth: 2
}
},
data: data_type_1
},
// 二類
{
name: "二類",
type: "scatter",
coordinateSystem: "geo",
symbol: "image://img/icon_location_2.png",
symbolSize: [14, 16],
label: {
normal: {
show: false,
backgroundColor: "#2B91B7",
position: "right",
color: "#ffffff",
fontSize: "14",
padding: 20
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#11D53F", //控制圖例和地圖標記點的顏色
borderWidth: 2
}
},
data: data_type_2
},
// 三類
{
name: "三類",
type: "scatter",
coordinateSystem: "geo",
symbol: "image://img/icon_location_3.png",
symbolSize: [14, 16],
label: {
normal: {
show: false,
backgroundColor: "#2B91B7",
position: "right",
color: "#ffffff",
fontSize: "14",
padding: 20
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#E39F28",
borderWidth: 2
}
},
data: data_type_3
}
]
};
myChart.setOption(option);
});
myChart.setOption(option);
}
Echarts繪製地圖帶標記tooltip
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.