Echarts地图上面的symbol:pin的小图标用右下角的颜色选择器,从下往上滑动为什么不显示pin小图标,但是从上往下却显示?
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('HK', geoJson);
let result = [
{ name: 'Central and Western', value: 20057.34,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Wan Chai', value: 15477.48,centroid:[ 114.166977, 22.281528 ],val:100 },
{ name: 'Eastern', value: 31686.1,centroid: [ 114.198250, 22.258787 ],val:100 },
{ name: 'Southern', value: 6992.6,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Yau Tsim Mong', value: 44045.49,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Sham Shui Po', value: 40689.64,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Kowloon City', value: 37659.78,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Wong Tai Sin', value: 45180.97,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Kwun Tong', value: 55204.26,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Kwai Tsing', value: 21900.9,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Tsuen Wan', value: 4918.26,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Tuen Mun', value: 5881.84,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Yuen Long', value: 4178.01,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'North', value: 2227.92,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Tai Po', value: 2180.98,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Sha Tin', value: 9172.94,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Sai Kung', value: 3368,centroid:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Islands', value: 806.98,centroid:[ 114.113747, 22.285694 ],val:100 }
];
let result12 = [
{ name: 'Central and Western', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Wan Chai', value:[ 114.166977, 22.281528 ],val:100 },
{ name: 'Eastern', value: [ 114.198250, 22.258787 ],val:100 },
{ name: 'Southern', value:[ 114.184860, 22.217638 ],val:100 },
{ name: 'Yau Tsim Mong', value:[ 114.174187, 22.327173 ],val:100 },
{ name: 'Sham Shui Po', value:[ 114.172920, 22.346960 ],val:100 },
{ name: 'Kowloon City', value:[ 114.179657, 22.349068 ],val:100 },
{ name: 'Wong Tai Sin', value:[ 114.221596, 22.347445 ],val:100 },
{ name: 'Kwun Tong', value:[ 114.223022, 22.333910 ],val:100 },
{ name: 'Kwai Tsing', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Tsuen Wan', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Tuen Mun', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Yuen Long', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'North', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Tai Po', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Sha Tin', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Sai Kung', value:[ 114.113747, 22.285694 ],val:100 },
{ name: 'Islands', value:[ 114.113747, 22.285694 ],val:100 }
];
let resultMax = 50000;
let resultMin = 100;
myChart.setOption(
(option = {
geo: {
map: 'HK',
label: {
show: true,
formatter: (params) => {
const find = result.find(
(item) => item.name === params.name
)
if (find) {
return `{name|${find.name}}`
} else {
return `{name|${params.name}}`
}
},
// 富文本
rich: {
name: {
height: 24,
color: 'blue',
padding: [0, 0, 0, 0],
fontSize: 18
},
}
},
// 地图区域的样式设置
itemStyle: {
areaColor: 'red' // 区域颜色
},
top: 50,
bottom: 10,
left: 20,
right: 20
},
visualMap: {
// 设置地图范围值显示的颜色
show: true, //取消显示颜色指示器
// selectedMode: false, // 不能选择
// hoverLink: false, // 取消鼠标移入效果
textStyle: {
color: '#fff',
fontSize:'14px',
},
align: 'left',
itemGap: 20,
inRange: {
color: ['#D7DDE5', '#EAA382', '#E64364']
},
min: resultMin, //区间
max: resultMax,
right: '10px',
text: ['高', '低'],
calculable:true,
},
series: [
{
type: 'map',
map: 'HK',
geoIndex: 0,
data: result,
},
{
type: 'scatter',
coordinateSystem: 'geo',
colorBy: "data",
data: result12,
symbol: 'pin',
symbolSize: [50, 50],
symbolOffset: [0, 0],
label: {
show: true,
formatter: (params) => {
return `${params.data.val}`
},
},
}
]
})
);
});