效果图:
要点1:calc函数
重点：在于mapChart的height可以写成函数以便适配不同尺寸；
<div class="content-map">
<div class="wai-top-box" style="width: 100%; height: 100%">
<div id="mapChart" style=" width: 100%; height: calc(100vh - 100px)">
</div>
</div>
</div>
重点1：在于mapChart的height可以写成函数适配不同尺寸
要点2：要点较多
map: {
title: {
text: '',
x: 'center',
textStyle: {
color: '#333333'
}
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
const value = (params.value + '').split('.');
const valueStr = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.name + ': ' + (params.value ? valueStr : 0);
}
},
// 数据和类型
series: [
{
type: 'map',
map: 'china',
label: {
normal: { PS： 自定义label 一定要写在norml里面
show: true,
position: 'inside',
formatter: function (params) {
const value = (params.value + '').split('.');
const valueStr = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.name + '\n' + '{a|' + (params.value ? valueStr : 0) + '}'; PS:\n用于换行
},
rich: { PS:rich可以对自定的label的样子进行单独修改 ，该场景是下面的数字的fontSize比上面的小
a: {
color: "rgba(104, 104, 104, 0.8)",
fontSize: 12,
lineHeight: 16
}
},
color: 'rgba(104, 104, 104, 0.8)',
fontSize: 17
},
},
// 地图区域的多边形 图形样式。
itemStyle: {
normal: {
borderColor: '#E3E3E3', 省会旁边的描边颜色 即border的属性
borderWidth: 1
},
},
// 地图大小倍数
zoom: 1.2, 感觉
data: []
}
],
visualMap: {
type: "piecewise", 这里是采用根据区间来设置颜色
min: 0,
text: ['High', 'Low'],
realtime: true,
calculable: true,
textStyle: {
color: '#fff'
},
// inRange: { 这种情况是不限制区间根据地图自动渲染
// color: ['#FFFAED', '#840007', 'blue']
// },
pieces: [
{ gt: 3000, color: "#280000" },
{ gt: 1000, lte: 3000, color: "#450000" },
{ gt: 500, lte: 1000, color: "#630000" },
{ gt: 300, lte: 500, color: "#840007" },
{ gt: 250, lte: 300, color: "#9B000C" },
{ gt: 200, lte: 250, color: "#B20011" },
{ gt: 150, lte: 200, color: "#CA0017" },
{ gt: 100, lte: 150, color: "#DA0C23" },
{ gt: 90, lte: 100, color: "#E22537" },
{ gt: 80, lte: 90, color: "#EA3E4B" },
{ gt: 70, lte: 80, color: "#F25760" },
{ gt: 60, lte: 70, color: "#FB7174" },
{ gt: 50, lte: 60, color: "#FF9469" },
{ gt: 40, lte: 50, color: "#FFB24C" },
{ gt: 30, lte: 40, color: "#FFCB45" },
{ gt: 20, lte: 30, color: "#FFD15D" },
{ gt: 10, lte: 20, color: "#FFD874" },
{ gt: 1, lte: 10, color: "#FFE5A3" },
{ value: 0, lte: 1, color: "#FFFAED" }
],
right: -100
}
}要点3：数据请求
getMap() {
// 中国地图
this.map.series[0].data = [];
distributed().then((res) => {
this.nowData = res.data;
res.data.loanProvinceCountList.forEach((item) => {
if (item.province) {
this.map.series[0].data.push({
name:item.province
value: item.loanCount
});
}
console.log(this.map.series[0].data);
});
this.map.series[0].data.push({
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 1,
label: {
show: false
}
}
}
});
let mapChartDom = document.getElementById('mapChart');
let mapChart = this.$echarts.init(mapChartDom);
mapChart.setOption(this.map);
window.addEventListener('resize', function () {
mapChart.resize(); 根据尺寸自适应
});
});
},要点4:引用china
因为报错说map.china不存在
在main.js里面引入china.json
import * as echarts from 'echarts';
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
