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: '长海县',

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;

}

},

});

})

}