|
|
|
|
@ -7,17 +7,17 @@
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import jtmap from './jtmap.json';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
props:{
|
|
|
|
|
mapData:{
|
|
|
|
|
type:Array,
|
|
|
|
|
default:[]
|
|
|
|
|
}
|
|
|
|
|
export default {
|
|
|
|
|
props: {
|
|
|
|
|
mapData: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
myChart: null,
|
|
|
|
|
hookToolTip: {},
|
|
|
|
|
hookToolTip: {},
|
|
|
|
|
// mapData:[]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -41,18 +41,23 @@
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
showInfo(id) {
|
|
|
|
|
this.$router.push({path:"/record/personinfo",query:{id:id}})
|
|
|
|
|
showInfo(id) {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: "/record/personinfo",
|
|
|
|
|
query: {
|
|
|
|
|
id: id
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
resetCharts() {
|
|
|
|
|
this.myChart.resize()
|
|
|
|
|
},
|
|
|
|
|
drawChart() {
|
|
|
|
|
let that = this
|
|
|
|
|
this.mapData.forEach((m,index)=>{
|
|
|
|
|
if(!m.coord){
|
|
|
|
|
m.coord = ['','']
|
|
|
|
|
}
|
|
|
|
|
let that = this
|
|
|
|
|
this.mapData.forEach((m, index) => {
|
|
|
|
|
if (!m.coord) {
|
|
|
|
|
m.coord = ['', '']
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// 基于准备好的dom,初始化echarts实例
|
|
|
|
|
this.myChart = echarts.init(document.getElementById('chart'))
|
|
|
|
|
@ -70,75 +75,135 @@
|
|
|
|
|
if (!val.data) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
return '<div class="mapsshow' + val.data.id +'" style="cursor:pointer"><p>' + val.data.name + '</p><p style="color:red">查看详情</p><div>'
|
|
|
|
|
return '<div class="mapsshow' + val.data.id + '" style="cursor:pointer"><p>' + val.data.name +
|
|
|
|
|
'</p><p style="color:red">查看详情</p><div>'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
map: 'china',
|
|
|
|
|
type: 'map',
|
|
|
|
|
map: 'GX',
|
|
|
|
|
// aspectScale: 0.9,
|
|
|
|
|
roam: false,
|
|
|
|
|
|
|
|
|
|
geo: {
|
|
|
|
|
map: "GX",
|
|
|
|
|
roam: false, //不开启缩放和平移
|
|
|
|
|
zoom: 1.23, //视角缩放比例
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
}
|
|
|
|
|
normal: {
|
|
|
|
|
show: false,
|
|
|
|
|
fontSize: "0",
|
|
|
|
|
color: "rgba(0,0,0,0.7)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
borderColor: '#0AAEB0', // 图形的描边颜色 #0AAEB0
|
|
|
|
|
borderWidth: 1, // 描边线宽。
|
|
|
|
|
borderType: 'solid', // 柱条的描边类型。
|
|
|
|
|
areaColor: '#2378f7', // 图形的颜色 #233F53
|
|
|
|
|
shadowBlur: 5, // 图形阴影的模糊大小。
|
|
|
|
|
shadowColor: '#2378f7', // 阴影色 #233F53
|
|
|
|
|
shadowOffsetX: 5, // X轴阴影
|
|
|
|
|
shadowOffsetY: 5, // Y轴阴影
|
|
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
show: false, // 显示区域名称
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
borderColor: "rgba(0, 0, 0, 0.2)",
|
|
|
|
|
},
|
|
|
|
|
// 鼠标移入时
|
|
|
|
|
emphasis: {
|
|
|
|
|
borderColor: '#fff', // 图形的描边颜色 #2378f7
|
|
|
|
|
borderWidth: '1',
|
|
|
|
|
areaColor: '#2378f7', // 阴影色 #233F53
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// areaColor: "#F3B329", //鼠标选择区域颜色
|
|
|
|
|
shadowOffsetX: 0,
|
|
|
|
|
shadowOffsetY: 0,
|
|
|
|
|
shadowBlur: 20,
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
|
|
},
|
|
|
|
|
regions: [{
|
|
|
|
|
},
|
|
|
|
|
// data:this.dataList
|
|
|
|
|
|
|
|
|
|
regions: [
|
|
|
|
|
//对不同的区块进行着色
|
|
|
|
|
{
|
|
|
|
|
name: "开发区",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor: "#75bedc",
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor: "#75bedc",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "指前镇",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor: "red",
|
|
|
|
|
areaColor: "#d7335a",
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor: "red",
|
|
|
|
|
areaColor: "#d7335a",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "朱林镇",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor: "#fc8251",
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor: "#fc8251",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "直溪镇",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor:'#91cd77',
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor:'#91cd77',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "薛埠镇",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor:'#ef6567',
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor:'#ef6567',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "金城镇",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor:'#f9c956',
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor:'#f9c956',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "儒林镇",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor:'#c968e1',
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor:'#c968e1',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "尧塘镇",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor:'#00ffff',
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor:'#00ffff',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
effect: {
|
|
|
|
|
show: true,
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
loop: true,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
|
|
|
|
|
name: "一户一档",
|
|
|
|
|
type: "map",
|
|
|
|
|
mapType: "china",
|
|
|
|
|
geoIndex: 0,
|
|
|
|
|
markPoint: {
|
|
|
|
|
symbol: 'image://' + require('@/assets/logo-mini.png'), // 自定义图片路径
|
|
|
|
|
symbolSize: [50, 40], // 图片大小
|
|
|
|
|
@ -159,7 +224,7 @@
|
|
|
|
|
// coord数组存放地址坐标
|
|
|
|
|
data: this.mapData
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
}],
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|