update
qianming
3 years ago
parent
d03af19e96
commit
6b0aa17045
@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<div :style="styleObj">
|
||||
<v-chart :options="options" autoresize/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
|
||||
let geoMap = {
|
||||
'上海': '/assets/map/上海市.json',
|
||||
'云南': '/assets/map/云南省.json',
|
||||
'内蒙古': '/assets/map/内蒙古自治区.json',
|
||||
'北京': '/assets/map/北京市.json',
|
||||
'台湾': '/assets/map/台湾省.json',
|
||||
'吉林': '/assets/map/吉林省.json',
|
||||
'天津': '/assets/map/天津市.json',
|
||||
'宁夏': '/assets/map/宁夏回族自治区.json',
|
||||
'安徽': '/assets/map/安徽省.json',
|
||||
'山东': '/assets/map/山东省.json',
|
||||
'山西': '/assets/map/山西省.json',
|
||||
'广东': '/assets/map/广东省.json',
|
||||
'广西': '/assets/map/广西壮族自治区.json',
|
||||
'新疆': '/assets/map/新疆维吾尔自治区.json',
|
||||
'江苏': '/assets/map/江苏省.json',
|
||||
'江西': '/assets/map/江西省.json',
|
||||
'河北': '/assets/map/河北省.json',
|
||||
'河南': '/assets/map/河南省.json',
|
||||
'海南': '/assets/map/海南省.json',
|
||||
'湖北': '/assets/map/湖北省.json',
|
||||
'湖南': '/assets/map/湖南省.json',
|
||||
'澳门': '/assets/map/澳门特别行政区.json',
|
||||
'甘肃': '/assets/map/甘肃省.json',
|
||||
'福建': '/assets/map/福建省.json',
|
||||
'西藏': '/assets/map/西藏自治区.json',
|
||||
'贵州': '/assets/map/贵州省.json',
|
||||
'辽宁': '/assets/map/辽宁省.json',
|
||||
'重庆': '/assets/map/重庆市.json',
|
||||
'陕西': '/assets/map/陕西省.json',
|
||||
'青海': '/assets/map/青海省.json',
|
||||
'香港': '/assets/map/香港特别行政区.json',
|
||||
'黑龙江': '/assets/map/黑龙江省.json',
|
||||
};
|
||||
export default {
|
||||
name: 'allMap',
|
||||
data() {
|
||||
return {
|
||||
myCharts: null,
|
||||
geo: {
|
||||
map: "china",
|
||||
show: true,
|
||||
roam: false,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
layoutSize: "80%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#00F6FF"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#53D9FF"
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
borderWidth: 3,
|
||||
shadowColor: "rgba(10,76,139,1)",
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 60
|
||||
}
|
||||
}
|
||||
},
|
||||
series:[],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getGeoJson(100000)
|
||||
},
|
||||
methods: {
|
||||
getGeoJson(adcode) {
|
||||
let that = this;
|
||||
AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
|
||||
var districtExplorer = new DistrictExplorer();
|
||||
districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
let Json = areaNode.getSubFeatures();
|
||||
if (Json.length > 0) {
|
||||
that.geoJson.features = Json;
|
||||
} else if (Json.length === 0) {
|
||||
that.geoJson.features = that.geoJson.features.filter(
|
||||
item => item.properties.adcode == adcode
|
||||
);
|
||||
if (that.geoJson.features.length === 0) return;
|
||||
}
|
||||
that.getMapData();
|
||||
});
|
||||
});
|
||||
},
|
||||
//获取数据
|
||||
getMapData() {
|
||||
let mapData = {},
|
||||
pointData = {},
|
||||
sum = {}
|
||||
this.timeTitle.forEach(item => {
|
||||
mapData[item] = []
|
||||
pointData[item] = []
|
||||
sum[item] = 0
|
||||
this.geoJson.features.forEach(j => {
|
||||
let value = Math.random() * 3000
|
||||
mapData[item].push({
|
||||
name: j.properties.name,
|
||||
value: value,
|
||||
cityCode: j.properties.adcode
|
||||
})
|
||||
pointData[item].push({
|
||||
name: j.properties.name,
|
||||
value: [j.properties.center[0], j.properties.center[1], value],
|
||||
cityCode: j.properties.adcode
|
||||
})
|
||||
sum[item] += value
|
||||
})
|
||||
mapData[item] = mapData[item].sort(function (a, b) {
|
||||
return b.value - a.value
|
||||
});
|
||||
})
|
||||
this.initEcharts(mapData, pointData, sum)
|
||||
},
|
||||
initEcharts(mapData, pointData, sum) {
|
||||
this.myChart = echarts.init(this.$refs.allMap)
|
||||
if (this.parentInfo.length === 1) {
|
||||
echarts.registerMap('china', this.geoJson); //注册
|
||||
} else {
|
||||
echarts.registerMap('map', this.geoJson); //注册
|
||||
}
|
||||
var option = {
|
||||
timeline: {
|
||||
data: this.timeTitle,
|
||||
axisType: 'category',
|
||||
autoPlay: true,
|
||||
playInterval: 3000,
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '2%',
|
||||
width: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: 'rgb(179, 239, 255)'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
symbolSize: 10,
|
||||
lineStyle: {
|
||||
color: '#8df4f4'
|
||||
},
|
||||
checkpointStyle: {
|
||||
borderColor: '#8df4f4',
|
||||
color: '#53D9FF',
|
||||
borderWidth: 2,
|
||||
},
|
||||
controlStyle: {
|
||||
showNextBtn: true,
|
||||
showPrevBtn: true,
|
||||
normal: {
|
||||
color: '#53D9FF',
|
||||
borderColor: '#53D9FF'
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgb(58,115,192)',
|
||||
borderColor: 'rgb(58,115,192)'
|
||||
}
|
||||
},
|
||||
},
|
||||
baseOption: {
|
||||
animation: true,
|
||||
animationDuration: 900,
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDurationUpdate: 900,
|
||||
animationEasingUpdate: 'cubicInOut',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
right: '2%',
|
||||
top: '12%',
|
||||
bottom: '8%',
|
||||
width: '20%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
restore: {
|
||||
show: false
|
||||
},
|
||||
dataView: {
|
||||
optionToContent: function (opt) {
|
||||
let series = opt.series[0].data //折线图数据
|
||||
let tdHeads =
|
||||
'<th style="padding: 0 20px">所在地区</th><th style="padding: 0 20px">销售额</th>' //表头
|
||||
let tdBodys = '' //数据
|
||||
let table =
|
||||
`<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
table += `<tr>
|
||||
<td style="padding: 0 50px">${series[i].name}</td>
|
||||
<td style="padding: 0 50px">${series[i].value.toFixed(2)}万</td>
|
||||
</tr>`
|
||||
}
|
||||
table += '</tbody></table>'
|
||||
return table
|
||||
}
|
||||
},
|
||||
saveAsImage: {
|
||||
name: this.parentInfo[this.parentInfo.length - 1].cityName + '销售额统计图'
|
||||
},
|
||||
dataZoom: {
|
||||
show: false
|
||||
},
|
||||
magicType: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: '#1990DA'
|
||||
}
|
||||
},
|
||||
top: 15,
|
||||
right: 35
|
||||
},
|
||||
geo: {
|
||||
map: this.parentInfo.length === 1 ? 'china' : 'map',
|
||||
zoom: 1.1,
|
||||
roam: true,
|
||||
center: this.parentInfo.length === 1 ? ['118.83531246', '32.0267395887'] : false,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: (p) => {
|
||||
let val = p.value[2];
|
||||
if (window.isNaN(val)) {
|
||||
val = 0;
|
||||
}
|
||||
let txtCon =
|
||||
"<div style='text-align:left'>" + p.name + ":<br />销售额：" + val.toFixed(
|
||||
2) + '万</div>';
|
||||
return txtCon;
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "rgb(249, 249, 249)", //省份标签字体颜色
|
||||
formatter: p => {
|
||||
switch (p.name) {
|
||||
case '内蒙古自治区':
|
||||
p.name = "内蒙古"
|
||||
break;
|
||||
case '西藏自治区':
|
||||
p.name = "西藏"
|
||||
break;
|
||||
case '新疆维吾尔自治区':
|
||||
p.name = "新疆"
|
||||
break;
|
||||
case '宁夏回族自治区':
|
||||
p.name = "宁夏"
|
||||
break;
|
||||
case '广西壮族自治区':
|
||||
p.name = "广西"
|
||||
break;
|
||||
case '香港特别行政区':
|
||||
p.name = "香港"
|
||||
break;
|
||||
case '澳门特别行政区':
|
||||
p.name = "澳门"
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return p.name;
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
color: '#f75a00',
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#24CFF4',
|
||||
borderColor: '#53D9FF',
|
||||
borderWidth: 1.3,
|
||||
shadowBlur: 15,
|
||||
shadowColor: 'rgb(58,115,192)',
|
||||
shadowOffsetX: 7,
|
||||
shadowOffsetY: 6,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#8dd7fc',
|
||||
borderWidth: 1.6,
|
||||
shadowBlur: 25,
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
options: []
|
||||
}
|
||||
this.timeTitle.forEach(item => {
|
||||
var xData = [],
|
||||
yData = []
|
||||
var min = mapData[item][mapData[item].length - 1].value
|
||||
var max = mapData[item][0].value
|
||||
if (mapData[item].length === 1) {
|
||||
min = 0
|
||||
}
|
||||
mapData[item].forEach(c => {
|
||||
xData.unshift(c.name)
|
||||
yData.unshift(c.value)
|
||||
})
|
||||
option.options.push({
|
||||
title: [{
|
||||
left: 'center',
|
||||
top: 10,
|
||||
text: item + this.parentInfo[this.parentInfo.length - 1].cityName +
|
||||
'年' +
|
||||
'销售额统计图(可点击下钻到县)',
|
||||
textStyle: {
|
||||
color: 'rgb(179, 239, 255)',
|
||||
fontSize: 16
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "销售总额：" + sum[item].toFixed(2) + '万',
|
||||
left: 'center',
|
||||
top: '6.5%',
|
||||
textStyle: {
|
||||
color: '#FFAC50',
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
],
|
||||
visualMap: {
|
||||
min: min,
|
||||
max: max,
|
||||
left: '3%',
|
||||
bottom: '5%',
|
||||
calculable: true,
|
||||
seriesIndex: [0],
|
||||
inRange: {
|
||||
color: ['#24CFF4', '#2E98CA', '#1E62AC']
|
||||
},
|
||||
textStyle: {
|
||||
color: '#24CFF4'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
position: 'top',
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#455B77'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 2,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#c0e6f9'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
nameGap: 16,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#455B77'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#c0e6f9'
|
||||
}
|
||||
},
|
||||
data: xData
|
||||
},
|
||||
series: [{
|
||||
name: item + '销售额度',
|
||||
type: 'map',
|
||||
geoIndex: 0,
|
||||
map: this.parentInfo.length === 1 ? 'china' : 'map',
|
||||
roam: true,
|
||||
zoom: 1.3,
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: p => {
|
||||
let val = p.value;
|
||||
if (p.name == '南海诸岛') return
|
||||
if (window.isNaN(val)) {
|
||||
val = 0;
|
||||
}
|
||||
let txtCon =
|
||||
"<div style='text-align:left'>" + p.name +
|
||||
":<br />销售额：" + val.toFixed(2) + '万</div>';
|
||||
return txtCon;
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
data: mapData[item],
|
||||
}, {
|
||||
name: '散点',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
rippleEffect: {
|
||||
brushType: 'fill'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#F4E925',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333'
|
||||
}
|
||||
},
|
||||
data: pointData[item],
|
||||
// symbolSize: 8,
|
||||
symbolSize: function (val) {
|
||||
let value = val[2]
|
||||
if (value == max) {
|
||||
return 27
|
||||
}
|
||||
return 10
|
||||
},
|
||||
showEffectOn: 'render', //加载完毕显示特效
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barGap: '-100%',
|
||||
barCategoryGap: '55%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 30,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: 'rgb(57,89,255,1)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(46,200,207,1)'
|
||||
}]),
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: yData
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
this.myChart.setOption(option, true)
|
||||
this.myChart.off('click');
|
||||
this.myChart.on('click', this.echartsMapClick);
|
||||
},
|
||||
//点击下钻
|
||||
echartsMapClick(params) {
|
||||
if (!params.data) {
|
||||
return
|
||||
}
|
||||
if (
|
||||
this.parentInfo[this.parentInfo.length - 1].code ==
|
||||
params.data.cityCode
|
||||
) {
|
||||
return;
|
||||
}
|
||||
let data = params.data;
|
||||
this.parentInfo.push({
|
||||
cityName: data.name,
|
||||
code: data.cityCode
|
||||
});
|
||||
this.getGeoJson(data.cityCode);
|
||||
},
|
||||
//选择切换市县
|
||||
chooseArea(val, index) {
|
||||
if (this.parentInfo.length === index + 1) {
|
||||
return
|
||||
}
|
||||
this.parentInfo.splice(index + 1)
|
||||
this.getGeoJson(this.parentInfo[this.parentInfo.length - 1].code);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.echartMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue