178 lines
5.9 KiB
JavaScript
178 lines
5.9 KiB
JavaScript
$(function () {
|
||
const data = []
|
||
Chart6_Data.forEach((i) => {
|
||
data.push({
|
||
name: i.name,
|
||
value: i.value[0][1]
|
||
})
|
||
})
|
||
console.log(data);
|
||
|
||
map();
|
||
|
||
function map() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('map_1'));
|
||
// geoCoordMap = {};
|
||
var geoCoordMap = {
|
||
'北碚': [106.50, 29.81],
|
||
'城口': [108.6520475, 31.90676506],
|
||
'大足': [105.7692868, 29.65392091],
|
||
'垫江': [107.4004904, 30.24903189],
|
||
'丰都': [107.7461781, 29.91492542],
|
||
'奉节': [109.3758974, 30.98202119],
|
||
'合川': [106.2833096, 30.09766756],
|
||
'江北': [106.6214893, 29.64821182],
|
||
'江津': [106.2647885, 28.98483627],
|
||
'开州': [108.1818518, 31.29466521],
|
||
'南岸': [106.6379653, 29.47704825],
|
||
'南川': [107.1406799, 29.12047319],
|
||
'彭水': [108.2573507, 29.36444557],
|
||
'綦南': [106.8036647, 28.96872774],
|
||
'黔江': [108.7559876, 29.44290625],
|
||
'石柱': [108.2438988, 30.07512144],
|
||
'市区': [106.4377397, 29.52648606],
|
||
'铜梁': [106.0616035, 29.81036286],
|
||
'潼南': [105.8116920, 30.13795513],
|
||
'万州': [108.0828876, 30.73353669],
|
||
'巫山': [109.8779184, 31.09568937],
|
||
'巫溪': [109.2970739, 31.48090521],
|
||
'武隆': [107.6831317, 29.36831708],
|
||
'秀山': [108.9997005, 28.49462861],
|
||
'永川': [105.8347961, 29.41042605],
|
||
'酉阳': [108.7911679, 28.88330557],
|
||
'云阳': [108.7533957, 30.96025875],
|
||
'长寿': [107.24, 29.95],
|
||
'忠县': [107.9279014, 30.33522658],
|
||
'川东': [107.3488646, 29.68233099]
|
||
};
|
||
var convertData = function (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)
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
|
||
option = {
|
||
// backgroundColor: '#404a59',
|
||
title: {
|
||
text: '重庆市实时数据',
|
||
subtext: '来源：气象局',
|
||
sublink: 'https://gitee.com/iGaoWei/big-data-view',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
if (params.seriesIndex === 0) {
|
||
if (typeof (params.value)[2] == "undefined") {
|
||
return params.name + ' : ' + params.value;
|
||
} else {
|
||
return params.name + ' : AQI ' + params.value[2];
|
||
}
|
||
} else {
|
||
if (isNaN(params.value)) {
|
||
return "";
|
||
}
|
||
return params.name + ' : ' + params.value + " ℃";
|
||
}
|
||
}
|
||
},
|
||
geo: {
|
||
map: '重庆',
|
||
label: {
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
roam: false,//禁止其放大缩小
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#4c60ff',
|
||
borderColor: '#002097'
|
||
},
|
||
emphasis: {
|
||
areaColor: "red", //鼠标选择区域颜色
|
||
}
|
||
},
|
||
},
|
||
visualMap: {
|
||
seriesIndex: 1,
|
||
left: '30%',
|
||
min: 10,
|
||
max: 30,
|
||
inRange: {
|
||
color: [
|
||
'#313695',
|
||
'#4575b4',
|
||
'#74add1',
|
||
'#abd9e9',
|
||
'#e0f3f8',
|
||
'#ffffbf',
|
||
'#fee090',
|
||
'#fdae61',
|
||
'#f46d43',
|
||
'#d73027',
|
||
'#a50026'
|
||
]
|
||
},
|
||
text: ['High', 'Low'],
|
||
textStyle: { // 设置图例文字的样式
|
||
color: '#fff' // 设置图例文字颜色为白色
|
||
},
|
||
calculable: true,
|
||
},
|
||
series: [
|
||
{
|
||
name: 'AQI',
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
data: convertData(data),
|
||
symbolSize: function (val) {
|
||
return val[2] / 2;
|
||
},
|
||
label: {
|
||
normal: {
|
||
formatter: '{b}',
|
||
position: 'right',
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#06c8ab'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
geoIndex: 0,
|
||
name: '温度',
|
||
type: 'map',
|
||
coordinateSystem: 'geo',
|
||
data: TMP_ALL_DATA,
|
||
}
|
||
]
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
})
|
||
|