vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图import echarts from 'echarts'Vue.prototype.$echarts = echarts;省份是动态引入的,在.vue文件中html部分<div id="province_map_box"><div id=province_map"></div></div>css部分<style
·
效果图
在main.js中引入地图
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
省份是动态引入的,在.vue文件中
html部分
<div id="province_map_box">
<div id=province_map"></div>
</div>
css部分
<style lang="scss" scoped>
#province_map_box {
height: 500px;
position: relative;
}
#province_map_box #province_map{
height: 100%;
}
#province_map_box .province_map_logo{
position: absolute;
top: 0;
left: 0;
width:45px;
}
</style>
<style lang="scss">
#province_map.tooltip_style{
line-height:1.7;
overflow: hidden;
}
#province_map.tooltip_left{
float: left;
}
#province_map.tooltip_right{
float: right;
}
</style>
script部分
data () {
return {
options: {
geo: {
map: "city",
scaleLimit: {
min: 1,
max: 2
},
zoom: 1,
top: 20,
label: {
normal: {
show:false,
fontSize: "14",
color: "rgba(0,0,0,0.7)"
},
emphasis: {
color: '#fff'
}
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
areaColor: "#3b9cff",//设置地图区域背景色
},
emphasis: {
areaColor: "#3b9cff",
shadowOffsetX: 0,
shadowOffsetY: 0
}
}
},
series: [
{
name: '省份',
type: 'map',
geoIndex: 0,
map: 'province',
data:[]
},
{
name: '企业分布', //红色标注
type: 'custom',
coordinateSystem: 'geo',
clickable:true,
data:[]
}
]
}
},
cityJson: {
features: []
}
},
created(){
this.city = this.$route.query.city
},
mounted() {
this.$nextTick(()=>{
this.initEchartMap()
})
},
methods:{
//初始化中国地图
initEchartMap() {
let mapDiv = document.getElementById('japan_map')
let myChart = this.$echarts.init(mapDiv)
let city = this.city
//动态引入省份json文件
this.cityJson = require(`echarts/map/json/province/${city}.json`)
this.$echarts.registerMap('city', this.cityJson, {})
this.setEchartOption()
myChart.setOption(this.options)
//可为自定义图标添加点击事件
myChart.on('click', {element: 'aaa'}, (params) => {
// todo: 当 name 为 'aaa' 的图形元素被点击时,此回调被触发。
});
},
//修改echart配制
setEchartOption(){
//红色标注点的坐标
let markList = [
{ name: '五常', value: [123.523565,52.920114] },
{ name: '中治', value: [126.319954,46.400728] },
{ name: '中顺', value: [133.310927,47.271857] },
{ name: '常也', value: [129.631468,45.65747] },
{ name: '可谭', value: [130.551333,47.321922] },
{ name: '顺允', value: [125.436884,48.460261] },
]
this.options.series[1].data = markList
if(markList.length>0){
this.options.series[1].renderItem = function(params,api){
return {
type: 'image',
name: 'aaa',
style: {
image: require("@/assets/img/icon_mark.png"), //标注点图标
width: 14,
height: 18,
x: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[0],
y: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[1]
}
}
}
}
}
}
注: echarts v4.2.1版本安装后会有地图json文件
更多推荐
已为社区贡献3条内容
所有评论(0)