You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
5.0 KiB
122 lines
5.0 KiB
2 months ago
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
var myChart = echarts.init(document.getElementById('c2'));
|
||
|
|
myChart.showLoading();
|
||
|
|
$.when(
|
||
|
|
$.get('https://fastly.jsdelivr.net/npm/echarts/map/json/china.json'),
|
||
|
|
$.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
|
||
|
|
$.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
|
||
|
|
).done(function (res) {
|
||
|
|
const chinaJson = res[0];
|
||
|
|
const projection = d3.geoMercator();
|
||
|
|
myChart.hideLoading();
|
||
|
|
echarts.registerMap('China', chinaJson);
|
||
|
|
option = {
|
||
|
|
color: 'white',
|
||
|
|
title: {
|
||
|
|
text: '中国各省得奖情况',
|
||
|
|
sublink: 'http://www.census.gov/popest/data/datasets.html',
|
||
|
|
left: 'center',
|
||
|
|
top:'top',
|
||
|
|
textStyle:{
|
||
|
|
color:'#FFFFFF',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
showDelay: 0,
|
||
|
|
transitionDuration: 0.2
|
||
|
|
},
|
||
|
|
visualMap: {
|
||
|
|
left: 'right',
|
||
|
|
min: 0,
|
||
|
|
max: 18,
|
||
|
|
inRange: {
|
||
|
|
color: [
|
||
|
|
'#313695',
|
||
|
|
'#4575b4',
|
||
|
|
'#74add1',
|
||
|
|
'#abd9e9',
|
||
|
|
'#e0f3f8',
|
||
|
|
'#ffffbf',
|
||
|
|
'#fee090',
|
||
|
|
'#fdae61',
|
||
|
|
'#f46d43',
|
||
|
|
'#d73027',
|
||
|
|
'#a50026'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
text: ['高', '低'],
|
||
|
|
calculable: true,
|
||
|
|
show:false,
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
show: false,
|
||
|
|
left: 'left',
|
||
|
|
top: 'top',
|
||
|
|
feature: {
|
||
|
|
dataView: {readOnly: false},
|
||
|
|
restore: {},
|
||
|
|
saveAsImage: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '奖牌数',
|
||
|
|
type: 'map',
|
||
|
|
map: 'China',
|
||
|
|
projection: {
|
||
|
|
project: function (point) {
|
||
|
|
return projection(point);
|
||
|
|
},
|
||
|
|
unproject: function (point) {
|
||
|
|
return projection.invert(point);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ name: '北京', value: 5 },
|
||
|
|
{ name: '天津', value: 3 },
|
||
|
|
{ name: '上海', value: 9 },
|
||
|
|
{ name: '重庆', value: 2 },
|
||
|
|
{ name: '河北', value: 5 },
|
||
|
|
{ name: '河南', value: 3 },
|
||
|
|
{ name: '云南', value: 2 },
|
||
|
|
{ name: '辽宁', value: 7 },
|
||
|
|
{ name: '黑龙江', value: 1 },
|
||
|
|
{ name: '湖南', value: 15 },
|
||
|
|
{ name: '安徽', value: 1 },
|
||
|
|
{ name: '山东', value: 16 },
|
||
|
|
{ name: '新疆', value: 1 },
|
||
|
|
{ name: '江苏', value: 17 },
|
||
|
|
{ name: '浙江', value: 18 },
|
||
|
|
{ name: '江西', value: 3 },
|
||
|
|
{ name: '湖北', value: 6 },
|
||
|
|
{ name: '广西', value: 2 },
|
||
|
|
{ name: '甘肃', value: 0 },
|
||
|
|
{ name: '山西', value: 0 },
|
||
|
|
{ name: '内蒙古', value: 2 },
|
||
|
|
{ name: '陕西', value: 0 },
|
||
|
|
{ name: '吉林', value: 4 },
|
||
|
|
{ name: '福建', value: 4 },
|
||
|
|
{ name: '贵州', value: 3 },
|
||
|
|
{ name: '广东', value: 16 },
|
||
|
|
{ name: '青海', value: 0 },
|
||
|
|
{ name: '西藏', value: 0 },
|
||
|
|
{ name: '四川', value: 18 },
|
||
|
|
{ name: '宁夏', value: 0 },
|
||
|
|
{ name: '海南', value: 2 },
|
||
|
|
{ name: '台湾', value: 7 },
|
||
|
|
{ name: '香港', value: 4 },
|
||
|
|
{ name: '澳门', value: 0 },
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
});
|
||
|
|
});
|