117 lines
4.5 KiB
JavaScript
117 lines
4.5 KiB
JavaScript
$(function () {
|
||
echarts_3();
|
||
function randomValue() {
|
||
return Math.round(Math.random() * 1000);
|
||
}
|
||
|
||
function showCity(zhName, pyName) {
|
||
console.log(zhName, pyName);
|
||
window.location.href = 'area.html?name=' + zhName + '&abbreviation=' + pyName;
|
||
}
|
||
|
||
function echarts_3() {
|
||
var myChart = echarts.init(document.getElementById('map_1'));
|
||
var province = [
|
||
{name: '北京', value: randomValue()},
|
||
{name: '天津', value: randomValue()},
|
||
{name: '上海', value: randomValue()},
|
||
{name: '重庆', value: randomValue()},
|
||
{name: '河北', value: randomValue()},
|
||
{name: '河南', value: randomValue()},
|
||
{name: '云南', value: randomValue()},
|
||
{name: '辽宁', value: randomValue()},
|
||
{name: '黑龙江', value: randomValue()},
|
||
{name: '湖南', value: randomValue()},
|
||
{name: '安徽', value: randomValue()},
|
||
{name: '山东', value: randomValue()},
|
||
{name: '新疆', value: randomValue()},
|
||
{name: '江苏', value: randomValue()},
|
||
{name: '浙江', value: randomValue()},
|
||
{name: '江西', value: randomValue()},
|
||
{name: '湖北', value: randomValue()},
|
||
{name: '广西', value: randomValue()},
|
||
{name: '甘肃', value: randomValue()},
|
||
{name: '山西', value: randomValue()},
|
||
{name: '内蒙古', value: randomValue()},
|
||
{name: '陕西', value: randomValue()},
|
||
{name: '吉林', value: randomValue()},
|
||
{name: '福建', value: randomValue()},
|
||
{name: '贵州', value: randomValue()},
|
||
{name: '广东', value: randomValue()},
|
||
{name: '青海', value: randomValue()},
|
||
{name: '西藏', value: randomValue()},
|
||
{name: '四川', value: randomValue()},
|
||
{name: '宁夏', value: randomValue()},
|
||
{name: '海南', value: randomValue()},
|
||
{name: '台湾', value: randomValue()},
|
||
{name: '香港', value: randomValue()},
|
||
{name: '澳门', value: randomValue()}
|
||
];
|
||
var option = {
|
||
animation: false,
|
||
visualMap: {
|
||
show: true,
|
||
min: 1,
|
||
max: 1000,
|
||
// splitNumber: 5,
|
||
inRange: {
|
||
color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
|
||
},
|
||
textStyle: {color: '#fff'}
|
||
},
|
||
geo: {
|
||
map: 'china',
|
||
type: 'map'
|
||
},
|
||
series: [{
|
||
name: 'china',
|
||
type: 'map',
|
||
aspectScale: 0.75,
|
||
zoom: 1,
|
||
mapType: 'china',
|
||
roam: false,
|
||
//geoIndex: 0,//默认情况下，map series 会自己生成内部专用的 geo 组件
|
||
label: {
|
||
normal: {
|
||
show: true,//显示省份标签
|
||
textStyle: {color: "#fff", fontSize: '9'}//省份标签字体颜色
|
||
},
|
||
emphasis: {//对应的鼠标悬浮效果
|
||
show: true,
|
||
textStyle: {color: "#800080"}
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#ffeb7b',
|
||
areaColor: '#4c60ff',
|
||
borderColor: '#1935e1'
|
||
}
|
||
},
|
||
data: province
|
||
}]
|
||
};
|
||
myChart.setOption(option);
|
||
var cityArr = [
|
||
['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'],
|
||
['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
|
||
];
|
||
myChart.on('click', function (params) {//点击事件
|
||
console.log(params);
|
||
var cityName = params.name;
|
||
for (var i = 0, len = cityArr[0].length; i < len; i++) {// 查找是否有对应城市有则加载城市
|
||
if (cityName == cityArr[0][i]) {
|
||
showCity(cityArr[0][i], cityArr[1][i]);// 获取得城市拼音
|
||
return;
|
||
}
|
||
}
|
||
//没有找到对应城市的话，那么返回到全国地图
|
||
option.series[0].mapType = 'china';
|
||
myChart.setOption(option);
|
||
});
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
});
|