<template>
<div>
<h2>地图</h2>
<div id="canvas5" style="width: 1000px;height:400px;"></div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
mounted(){
let mcharts = this.$echarts.init(document.getElementById('canvas5'))
this.$echarts.registerMap('chinaMap','数据')
let option = {
geo:{
type:'map',
map:'chinaMap',//chinaMap是相互对应的,//this.$echarts.registerMap('aa','数据'),那么map:'chinaMap'也是aa
roam:true,//设置是否允许拖拽
label:{//展示标签
show:true
},
zoom:1,//设置初始化缩放比例,默认为1
center:[0,0],//设置地图中心点的坐标, center:[x,y],
},
series:[
{
data:[],//数据
geoIndex:0,//对第几个geo来设置,0就是第一个
type:'map',//什么类型
},
{
data:[],//配置散点的坐标数据
type:'effectScatter',
coordinateSystem:'geo',//指明散点使用的坐标系统,geo的坐标系统
rippleEffect:{//设置涟漪动画
scale:10,//涟漪动画缩放范围10
}
}
],
visualMap:{//空气质量,(例子)
min:0,//设置最小值
max:300,//设置最大值
inRange:{//设置渐变颜色
color:['white','red'],
},
calculable:true,//可以控制筛选污染城市,并出现滑块
}
}
mcharts.setOption(option)
},
}
</script>
<style>
</style>
Echarts地图
最新推荐文章于 2024-02-28 13:49:01 发布