渲染的方法如下 记得引入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;
}
},
});
})
}