vue 引入json地图_VUE中通过Echarts引入地图
渲染的方法如下 記得引入echarts
import?echarts?from?'echarts'
-----------------------------------
init(dalian){
this.$nextTick(()=>{
var?myChart?=?this.$echarts.init(document.getElementById('echartMap'));
echarts.registerMap('dalian',?dalian,{});
myChart.setOption({
series:?[{
name:'大連市',
label:?{
normal:?{
show:?true,
},
emphasis:?{
show:?true
}
},
itemStyle:?{
color:?'#ddb926'
},
type:?'map',
zoom:?1,//縮放比例
roam:?true,
mapType:?'dalian',
emphasis:?{
label:?{
show:?true
}
},
//?文本位置修正
textFixed:?{
Alaska:?[20,?-20]
},
data: [{
name:?'瓦房店市',
value:?4822023
},
{
name:?'普蘭店市',
value:?731449
},
{
name:?'莊河市',
value:?6553255
},
{
name:?'金州區',
value:?949131
},
{
name:?'長?？h',
value:?8041430
},
{
name:?'甘井子區',
value:?5187582
},
{
name:?'沙河口區',
value:?3590347
},
{
name:?'西崗區',
value:?917092
},
{
name:?'中山區',
value:?632323
},
{
name:?'旅順口區',
value:?9317568
}
]
}],
//右下角數值條
visualMap:?{
left:?'right',
min:?1,
max:?100,
inRange:?{
color:?['#313695',?'#4575b4',?'#74add1',?'#abd9e9',?'#e0f3f8',?'#ffffbf',?'#fee090',?'#fdae61',?'#f46d43',?'#d73027',?'#a50026']
},
//text:?['High',?'Low'],?//?文本，默認為數值文本
calculable:?true
},
tooltip:?{
trigger:?'item',
showDelay:?0,
transitionDuration:?0.2,
formatter:?function(params)?{
var?value?=?(params.value?+?'').split('.');
value?=?value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,?'$1,');
return?params.seriesName?+?'
'?+?params.name?+?':?'?+?value;
}
},
});
})
}
總結
以上是生活随笔為你收集整理的vue 引入json地图_VUE中通过Echarts引入地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux查看目录下文件个球,球服务翻译
- 下一篇： java获取panel面板画笔_java