项目需求是飞线地图,但是目前飞线还没实现,直接上代码,效果如下:
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
var series = []; //地图展现数据
var series = []; //地图展现数据
//24个省市经度纬度
var geoCoordMap = {
'陕西': [109.503789, 35.860026],
'西安': [108.946466, 34.347269],
'甘肃': [103.832478, 36.065465],
'兰州': [103.84044, 36.067321],
'新疆': [87.633473, 43.799238],
'乌鲁木齐': [87.62444, 43.830763],
'内蒙古': [111.772606, 40.823156],
'包头': [109.846544, 40.662929],
'青海': [101.786462, 36.627159],
'西宁': [101.78443, 36.623393],
'宁夏': [106.265605, 38.476878],
'银川': [106.258602, 38.487834],
'四川': [104.073467, 30.577543],
'成都': [104.081534, 30.655822],
'重庆': [106.558434, 29.568996],
'西藏': [91.124342, 29.652894],
'拉萨': [91.120789, 29.65005],
'云南': [101.592952, 24.864213],
'昆明': [102.852448, 24.873998],
'丽江': [100.233026,26.872108],
'贵州': [106.714476, 26.60403],
'贵阳': [106.636577, 26.653325],
'广西': [108.924274, 23.552255],
'南宁': [108.373451, 22.822607],
'山西': [112.515496, 37.866566],
'太原': [112.534919, 37.873219],
'河南': [101.556307, 34.51139],
'郑州': [113.631419, 34.753439],
'湖北': [112.410562, 31.209316],
'武汉': [114.311582, 30.598467],
'湖南': [111.720664, 27.695864],
'长沙': [112.945473, 28.234889],
'江西': [115.676082, 27.757258],
'南昌': [115.864589, 28.689455],
'安徽': [117.33054, 31.734294],
'合肥': [117.233443, 31.826578],
'上海': [121.480539, 31.235929],
'浙江': [120.159533, 30.271548],
'杭州': [120.215503, 30.253087],
'广东': [113.394818, 23.408004],
'广州': [113.271431, 23.135336],
'北京': [116.413384, 39.910925],
'天津': [117.209523, 39.093668],
'河北': [117.220297, 39.173149],
'唐山': [118.186459, 39.636584],
};
option = {
backgroundColor: "#123456",
color: ['#fc5353', '#f4fc6c', '#e68b55', '#9a68ff', '#ff60c5'],
visualMap: {
min: 1000,
max: 5000,
calculable: true,
right: '32%',
bottom: '6%',
zlevel: 10,
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
if (params.value) {
return params.name + ' : ' + params.value[2];
} else {
return params.name;
}
}
},
legend: {
orient: 'horizontal',
left: '27%',
top: '5%',
data: ['高线'],
textStyle: {
color: '#ffffff'
},
icon: 'circle'
},
geo: {
map: 'china',
zlevel: 10,
layoutCenter: ['48%', '43%'],
roam: true,
layoutSize: "100%",
zoom: 1.08,
label: {
normal: {
show: true, //地图上的省份名称是否显示
textStyle: {
fontSize: 12,
color: '#43D0D6'
}
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#062031',
borderWidth: 1.1,
borderColor: '#43D0D6'
},
emphasis: {
areaColor: '#43D0D6'
}
}
},
series: series
};
myChart.setOption(option);