319 lines
12 KiB
HTML
319 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
<script src="../lib/jquery/dist/jquery.js"></script>
|
|
<script src="../lib/vuejs/vue.js"></script>
|
|
<script src="../lib/echarts5temp/composition-api1.0.0-rc.js"></script>
|
|
<script src="../lib/echarts5temp/echarts5.0.2.js"></script>
|
|
<script src="../lib/echarts5temp/vue-echarts6.0.0-beta.js"></script>
|
|
<script src="../lib/vuejs/axios.min.js"></script>
|
|
<script src="../lib/elementui/index.js"></script>
|
|
<link href="../lib/elementui/index.css" rel="stylesheet" />
|
|
<script src="../map/china.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" style="background-color:#013954;">
|
|
<el-container>
|
|
<el-main>
|
|
<div id="main" style="width: 100%;height:700px;">
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
geoJson: {}, //
|
|
selYear: ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
|
|
selArea: ['普陀区', '崇明区', '嘉定区', '金山区', '浦东新区', '杨浦区', '奉贤区', '青浦区', '闵行区', '松江区', '黄浦区', '徐汇区', '长宁区', '静安区', '虹口区', '宝山区'],
|
|
addressJson: {},
|
|
geoCoordMap: {}, //地理位置信息
|
|
displayData:[] //地理位置显示数据
|
|
}
|
|
},
|
|
mounted() {
|
|
var _this = this; //this指向vue
|
|
let sendArr = [
|
|
axios.get('../map/shmapall.json'),
|
|
axios.get('../map/geoCoordMapjson2020_1.json'),
|
|
axios.get('../map/datajson2020_1.json')
|
|
]
|
|
|
|
axios.all(sendArr).then(axios.spread(function (res1, res2,res3) {
|
|
_this.geoJson = res1.data
|
|
_this.geoCoordMap = res2.data
|
|
_this.displayData = res3.data
|
|
|
|
_this.refreshMap()
|
|
}));
|
|
},
|
|
methods: {
|
|
//图形计算
|
|
refreshMap() {
|
|
|
|
var _this = this; //this指向vue
|
|
echarts.registerMap('china', _this.geoJson);
|
|
|
|
axios.get("").then(function(res){
|
|
|
|
})
|
|
|
|
var convertData = function (data) {
|
|
var res = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
var geoCoord = _this.geoCoordMap[data[i].name];
|
|
if (geoCoord) {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(data[i].value)
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
|
|
var convertedData = [
|
|
convertData(_this.displayData),
|
|
convertData(_this.displayData.sort(function (a, b) {
|
|
//return b.value - a.value;
|
|
return 10;
|
|
}).slice(0, 6))
|
|
];
|
|
|
|
|
|
option = {
|
|
backgroundColor: '#404a59',
|
|
animation: true,
|
|
animationDuration: 1000,
|
|
animationEasing: 'cubicInOut',
|
|
animationDurationUpdate: 1000,
|
|
animationEasingUpdate: 'cubicInOut',
|
|
title: [
|
|
{
|
|
text: '被抽样单位分布散点图',
|
|
subtext: '',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
{
|
|
id: 'statistic',
|
|
right: 120,
|
|
top: 40,
|
|
width: 100,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
],
|
|
toolbox: {
|
|
iconStyle: {
|
|
normal: {
|
|
borderColor: '#fff'
|
|
},
|
|
emphasis: {
|
|
borderColor: '#b1e4ff'
|
|
}
|
|
},
|
|
feature: {
|
|
dataZoom: {},
|
|
brush: {
|
|
type: ['rect', 'polygon', 'clear']
|
|
},
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
brush: {
|
|
outOfBrush: {
|
|
color: '#abc'
|
|
},
|
|
brushStyle: {
|
|
borderWidth: 2,
|
|
color: 'rgba(0,0,0,0.2)',
|
|
borderColor: 'rgba(0,0,0,0.5)',
|
|
},
|
|
seriesIndex: [0, 1],
|
|
throttleType: 'debounce',
|
|
throttleDelay: 300,
|
|
geoIndex: 0
|
|
},
|
|
geo: {
|
|
map: 'china',
|
|
//left: '10',
|
|
//right: '35%',
|
|
center: [121.4648, 31.2891],
|
|
zoom: 10,
|
|
label: {
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
roam: true,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#323c48',
|
|
borderColor: '#111'
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2a333d'
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
grid: {
|
|
right: 40,
|
|
top: 100,
|
|
bottom: 40,
|
|
width: '30%'
|
|
},
|
|
xAxis: {
|
|
|
|
type: 'value',
|
|
scale: true,
|
|
position: 'top',
|
|
min: 0,
|
|
boundaryGap: false,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
margin: 2,
|
|
textStyle: {
|
|
color: '#aaa'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
name:'showMapTip',
|
|
// name: 'TOP 20',
|
|
nameGap: 16,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
data: this.selArea
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertedData[0],
|
|
symbolSize: 5,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#ddb926'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'Top 5',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertedData[1],
|
|
symbolSize: function (val) {
|
|
//return Math.max(val[2] / 10, 8);
|
|
return 10;
|
|
},
|
|
showEffectOn: 'emphasis',
|
|
rippleEffect: {
|
|
brushType: 'stroke'
|
|
},
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#f4e925',
|
|
shadowBlur: 10,
|
|
shadowColor: '#333'
|
|
}
|
|
},
|
|
zlevel: 1
|
|
},
|
|
{
|
|
id: 'bar',
|
|
zlevel: 2,
|
|
type: 'bar',
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#ddb926'
|
|
}
|
|
},
|
|
data: []
|
|
},
|
|
//柱状图
|
|
{
|
|
zlevel: 1.5,
|
|
type: 'bar',
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#ddb926'
|
|
}
|
|
},
|
|
data: this.selYear
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
|
|
|
|
|
|
</script> |