苏州前端薪资演示echarts heatmap配置项内容和展示
配置项如下
var points = [
[120.537635, 30.849469, 8000],
[120.676453, 31.300149, 10666],
[120.576769, 31.295081, 7000],
[120.78272, 31.312972, 5500],
[120.714536, 31.360307, 7000],
[117.125366, 40.162327, 12000],
[121.484324, 31.236757, 3000],
[120.576769, 31.295081, 1500],
[120.552412, 31.288019, 5249],
[120.676768, 31.322286, 9000],
[120.578755, 31.302676, 5000],
[120.584778, 31.317492, 10500],
[120.41764, 31.331319, 9583],
[120.642574, 31.308123, 6000],
[120.682258, 31.320221, 3000],
[120.673334, 31.308375, 9000],
[120.691415, 31.479935, 12500],
[120.745595, 31.271488, 11194],
[120.595017, 31.308917, 8500],
[120.741179, 31.271694, 10703],
[120.750679, 31.276876, 12062],
[116.29209, 40.050604, 8250],
[120.675965, 31.301535, 9499],
[120.399186, 30.956474, 9000],
[120.67766, 31.301541, 9000],
[120.62357, 31.34618, 6000],
[118.762542, 31.980529, 9000],
[120.180544, 30.187768, 12500],
[120.632173, 31.284085, 5000],
[120.740819, 31.259654, 17000],
[120.742773, 31.271715, 5000],
[120.675965, 31.301534, 7000],
[121.137567, 31.450491, 5833],
[121.355238, 30.775161, 2800],
[120.533813, 31.406352, 5249],
[120.565571, 31.290375, 9000],
[120.74059, 31.261045, 5000],
[120.559278, 31.285298, 6999],
[120.67287, 31.294761, 12499],
[120.562109, 31.327013, 12000],
[120.656581, 31.720813, 11500],
[120.587132, 31.296975, 4000],
[120.753155, 31.276276, 7500],
[120.740169, 31.265748, 7500],
[121.11269, 31.469927, 12666],
[120.68254, 31.312405, 6999],
[120.649603, 31.819055, 11249],
[120.745719, 31.270795, 15400],
[120.673955, 31.176929, 12500],
[120.744903, 31.264268, 7000],
[120.739302, 31.27135, 10199],
[120.753922, 31.362392, 5374],
[120.672451, 31.301969, 7000],
[120.67766, 31.301541, 8250],
[120.721394, 31.324471, 9750],
[120.545798, 31.282515, 7499],
[120.639779, 31.272996, 6999],
[120.431104, 31.339555, 6999],
[120.752964, 31.276161, 9124],
[120.596624, 31.190051, 3500],
[117.196976, 34.267427, 6000],
[120.603212, 31.217193, 10000],
[120.741568, 31.627826, 17500],
[120.862671, 32.038162, 12500],
[120.560041, 31.455586, 6500],
[120.721372, 31.372736, 18333],
[120.63379, 31.392899, 7000],
[120.533813, 31.406352, 5249],
[120.364718, 36.079585, 11500],
[120.677282, 31.167409, 6687],
[120.737806, 31.269298, 3000],
[120.745433, 31.264465, 5500],
[120.606019, 31.194738, 15375],
[120.910465, 31.503455, 10500],
[120.617332, 31.540938, 7999],
[120.784976, 31.279882, 7999],
[120.744666, 31.375143, 11832],
[120.739169, 31.271121, 12499],
[120.6778, 31.300143, 8000],
[120.63837, 31.307771, 5249],
[120.677086, 31.300786, 7000],
[120.560041, 31.455586, 8999],
[120.675121, 31.280209, 12499],
[120.674161, 31.307861, 9708],
[120.675965, 31.301535, 6999],
[121.398065, 31.23968, 17499],
[120.634068, 31.277132, 6000],
[120.5758, 31.298952, 17499],
[120.6778, 31.300143, 14583],
[120.802526, 31.041474, 8999],
[120.757807, 31.685786, 10000],
[120.187893, 30.188594, 13333],
[120.677728, 31.324007, 4000],
[120.736677, 31.36627, 10416],
[120.736434, 31.264806, 12500],
[120.562704, 31.278792, 9000],
[120.625439, 31.312432, 6999],
[120.729465, 31.271418, 12500],
[120.628302, 31.259432, 14999],
[120.672451, 31.301969, 7749],
[120.620632, 31.256138, 9000],
[116.333043, 39.989134, 12000],
[120.595352, 31.317542, 5000],
[120.612004, 31.312418, 27499],
[120.681294, 31.321418, 8999],
[120.676768, 31.322286, 9000],
[120.610262, 31.312454, 6500],
[120.560041, 31.455586, 14583],
[120.56121, 31.286544, 3749],
[120.653278, 30.908931, 7000],
[120.5371, 30.881747, 6000],
[120.658562, 31.306505, 14583],
[120.599484, 31.311789, 7000],
[120.67609, 31.328576, 9000],
[120.633762, 31.29253, 12500],
[120.538042, 30.843482, 8999],
[120.418414, 31.368378, 12499],
[120.74408, 31.271022, 7500],
[120.637941, 31.307788, 5000],
[121.436411, 31.194923, 8999],
[120.655666, 31.399498, 10000],
[120.673538, 31.294333, 7000],
[120.403578, 31.524915, 9000],
[120.771903, 31.281456, 5249],
[120.671893, 31.273459, 5250],
[120.803752, 31.64715, 11000],
[120.681765, 31.310388, 5000],
[119.756095, 33.446139, 7000],
[120.739302, 31.27135, 11500],
[120.719262, 31.327271, 5249],
[120.607292, 31.346996, 8750],
[120.62205, 31.428536, 5000],
[120.605013, 31.26945, 6999],
[120.676453, 31.300149, 6999],
[120.802324, 31.315591, 8000],
[120.736529, 31.358438, 10416],
[121.072624, 31.572375, 4250],
[120.51031, 31.191737, 8999],
[120.753157, 31.276276, 12499],
[120.637715, 31.314932, 5000],
[113.94573, 22.528047, 14000],
[116.471814, 39.992083, 5249],
[120.6778, 31.300143, 5833],
[120.656159, 31.195173, 7000],
[120.662691, 31.374124, 7937]
]
var option = {
bmap: {
center: [120.631007, 31.308762],
zoom: 12,
roam: true,
enableMapClick: false,
mapStyle: {
styleJson: [{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 47,
"saturation": -100
}
}, {
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#ffffff"
}
}, {
"featureType": "poi",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "road",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}]
}
},
title: {
text: "苏州前端平均薪资演示",
left: 'center',
top: 5,
backgroundColor:"rgba(255,255,255,0.8)",
textStyle:{
color:"#2B98DC",
fontWeight:"bold"
}
},
visualMap: {
type: 'piecewise',
show: true,
bottom: '10',
left:"10",
orient: 'vertical',
backgroundColor:"rgba(255,255,255,0.8)",
min: 1000,
max: 20000,
seriesIndex: 0,
calculable: true,
pieces: [{
max: 5000,
}, {
max: 8000,
},{
max: 12000,
},{
max: 15000,
}, {
max: 20000,
}, {
min: 20000,
}],
inRange: {
color: ['#5AB1EF', '#2EC7C9', '#B6A2DE', "#FFB980", '#D87A80']
// color: ['green', 'red']
//color:['lightskyblue', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
minOpacity: 0.5,
pointSize: 12,
blurSize: 0
}]
}
myChart.setOption(option);
setTimeout(init, 0)
function init() {
initMap();
}
function getMap() {
return myChart.getModel().getComponent('bmap').getBMap();
}
function initMap() {
var top_left_navigation = new BMap.NavigationControl({
type: BMAP_NAVIGATION_CONTROL_SMALL
});
var map = getMap();
//map.centerAndZoom("苏州", 13);
map.addControl(top_left_navigation);
map.disableDoubleClickZoom();
return map;
}
截图如下
