本人近期一個(gè)項(xiàng)目需要做一個(gè)大屏數(shù)據(jù)展示，在最中間的地方實(shí)現(xiàn)一個(gè)可以查看數(shù)據(jù)的地圖，而且是大連市的地圖。
話不多說先看東西。
當(dāng)然這是可以放大縮小的
首先需要一個(gè)地圖的json數(shù)據(jù)，這個(gè)數(shù)據(jù)可以通過這個(gè)網(wǎng)站生成，http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
<div?id="echartMap"?style="width:60%;height:90%"></div>
echarts的數(shù)據(jù)我就通過div渲染了，這種我用起來比較順手。
渲染前記得引入地圖數(shù)據(jù)
data(){???????????????
?????return{????????????
????????batchId:'',????????????
????????areaData:[],????????????
????????dalian:?require('./json/dalian.json')? ? ? ? //地圖json數(shù)據(jù)
????}????
},?
渲染的方法如下 記得引入echarts
<script>
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:?'金州區(qū)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value:?949131
? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:?'長(zhǎng)?？h',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value:?8041430
? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:?'甘井子區(qū)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value:?5187582
? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:?'沙河口區(qū)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value:?3590347
? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:?'西崗區(qū)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value:?917092
? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:?'中山區(qū)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value:?632323
? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:?'旅順口區(qū)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?value:?9317568
? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?]
????????????????}],
????????????????//右下角數(shù)值條
????????????????visualMap:?{
????????????????????left:?'right',
????????????????????min:?1,
????????????????????max:?100,
????????????????????inRange:?{
????????????????????????color:?['#313695',?'#4575b4',?'#74add1',?'#abd9e9',?'#e0f3f8',?'#ffffbf',?'#fee090',?'#fdae61',?'#f46d43',?'#d73027',?'#a50026']
????????????????????},
????????????????????//text:?['High',?'Low'],?//?文本，默認(rèn)為數(shù)值文本
????????????????????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?+?'<br/>'?+?params.name?+?':?'?+?value;
????????????????????}
????????????????},
????????????});
????????????})
????????}
溫馨提是：多注意下echarts.registerMap('dalian',?dalian,{});這塊的用法 建議百度一下。
