|
|
<template>
|
|
|
<div style="width:100%;height:100%" class='chart' id='chart'></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import '../../../../node_modules/echarts/map/js/china.js' // 引入中国地图
|
|
|
import * as echarts from 'echarts';
|
|
|
import jtmap from './jtmap.json';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
myChart: null,
|
|
|
hookToolTip: {}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.drawChart()
|
|
|
|
|
|
},
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
watch: {
|
|
|
// hookToolTip: {
|
|
|
// handler(newVal, oldVal) {
|
|
|
// let tooltipButton = document.querySelector(".mapsshow" + newVal.data.id)
|
|
|
// let that = this
|
|
|
// tooltipButton.addEventListener('click', function() {
|
|
|
// that.showInfo(newVal.data.id)
|
|
|
// })
|
|
|
|
|
|
// }
|
|
|
// },
|
|
|
},
|
|
|
methods: {
|
|
|
showInfo(id) {
|
|
|
console.log("id", id)
|
|
|
},
|
|
|
resetCharts() {
|
|
|
this.myChart.resize()
|
|
|
},
|
|
|
drawChart() {
|
|
|
let that = this
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
this.myChart = echarts.init(document.getElementById('chart'))
|
|
|
echarts.registerMap('GX', jtmap);
|
|
|
// 绘制图表
|
|
|
this.myChart.setOption({
|
|
|
// 提示框组件
|
|
|
tooltip: {
|
|
|
trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
|
|
|
position: 'right',
|
|
|
enterable: true,
|
|
|
triggerOn: 'click',
|
|
|
formatter: function(val) {
|
|
|
that.hookToolTip = val;
|
|
|
if (!val.data) {
|
|
|
return
|
|
|
}
|
|
|
return '<div><p>' + val.data.name + '</p><p class="mapsshow' + val.data.id +
|
|
|
'" style="color:red">查看详情</p><div>'
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
map: 'china',
|
|
|
type: 'map',
|
|
|
map: 'GX',
|
|
|
// aspectScale: 0.9,
|
|
|
roam: false,
|
|
|
|
|
|
label: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#fff',
|
|
|
fontSize: 12,
|
|
|
}
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderColor: '#0AAEB0', // 图形的描边颜色 #0AAEB0
|
|
|
borderWidth: 1, // 描边线宽。
|
|
|
borderType: 'solid', // 柱条的描边类型。
|
|
|
areaColor: '#233F53', // 图形的颜色 #233F53
|
|
|
shadowBlur: 5, // 图形阴影的模糊大小。
|
|
|
shadowColor: '#233F53', // 阴影色 #233F53
|
|
|
shadowOffsetX: 5, // X轴阴影
|
|
|
shadowOffsetY: 5, // Y轴阴影
|
|
|
|
|
|
label: {
|
|
|
show: false, // 显示区域名称
|
|
|
textStyle: {
|
|
|
color: '#fff',
|
|
|
fontSize: 12,
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
// 鼠标移入时
|
|
|
emphasis: {
|
|
|
borderColor: '#2378f7', // 图形的描边颜色 #2378f7
|
|
|
borderWidth: '1',
|
|
|
areaColor: '#233F53', // 阴影色 #233F53
|
|
|
label: {
|
|
|
show: false,
|
|
|
textStyle: {
|
|
|
color: '#fff',
|
|
|
fontSize: 14,
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
regions: [{
|
|
|
name: "指前镇",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
areaColor: "red",
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: "red",
|
|
|
},
|
|
|
},
|
|
|
}],
|
|
|
|
|
|
effect: {
|
|
|
show: true,
|
|
|
shadowBlur: 10,
|
|
|
loop: true,
|
|
|
}
|
|
|
},
|
|
|
|
|
|
markPoint: {
|
|
|
symbol: 'image://' + require('@/assets/logo-mini.png'), // 自定义图片路径
|
|
|
symbolSize: [50, 40], // 图片大小
|
|
|
symbolOffset: [0, -30],
|
|
|
label: {
|
|
|
position: 'bottom',
|
|
|
color: "#fff",
|
|
|
textAlign: "center",
|
|
|
padding: [4, 7],
|
|
|
borderWidth: 2, // 图形描边的宽度。
|
|
|
borderColor: "#fff", // 边框颜色
|
|
|
backgroundColor: 'green', // 背景色
|
|
|
formatter(val) {
|
|
|
return val.name
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// coord数组存放地址坐标
|
|
|
data: [{
|
|
|
name: '张三',
|
|
|
coord: [119.420551, 31.600407],
|
|
|
value: '2154',
|
|
|
id: 1
|
|
|
},
|
|
|
{
|
|
|
name: '李四',
|
|
|
coord: [119.321608, 31.70714],
|
|
|
value: '1560',
|
|
|
id: 2
|
|
|
},
|
|
|
{
|
|
|
name: '王伍',
|
|
|
coord: [119.3297, 31.724295],
|
|
|
value: '2424',
|
|
|
id: 3
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
}]
|
|
|
})
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.chart {
|
|
|
/* width: 100%;
|
|
|
height: 100%; */
|
|
|
/* margin: 100px 50px 0; */
|
|
|
/* border: 1px solid #eeeeee; */
|
|
|
/* background: url(../../public/static/bg.png) no-repeat; */
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
</style>
|
