update
qianming
3 years ago
parent
45aee04d6f
commit
92d1c07554
@ -1,544 +0,0 @@
|
|||||||
<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