initMap () {
const chart = this.$echarts.init(document.getElementById('map-box'));
// 引入省市的json数据
var hz = require('../../../../static/china_province/330000_full.json')
const data = hz;
this.$echarts.registerMap('hz', data);
let option = {
// 悬浮框
tooltip: {
show: false,
formatter: '{a}<br/>{b}: {c}'
},
geo: {
map: 'hz',
show: true,
itemStyle: {
normal: {
shadowColor: '#00003A', // 外边框阴影色
shadowBlur: 100, //外边框阴影
opacity: 1,
}
}
},
//底部颜色范围
dataRange: {
show: false,
x: 'left',
y: 'bottom',
splitList: [
{ start: 3, end: 4, color: '#ac4b42' },
{ start: 2, end: 3, color: '#a67027' },
{ start: 1, end: 2, color: '#3d8d61' },
],
color: ['#3d8d61', '#a67027', '#ac4b42']
},
textStyle: {
color: '#3899FF' // 值域文字颜色
},
selectedMode: false,
series: [{
name: '浙江',
type: 'map',
mapType: 'hz',
roam: false,
zoom: 1,
hoverable: false,
lengend: {
show: false
},
itemStyle: {
normal: {
borderWidth: 1, //区域边框宽度
borderColor: '#4aa4d5', //区域边框颜色
label: {
show: true,
color: '#fff',
formatter: (data) => `{num|${data.data.value}}\n${data.data.name}`,
rich: {
num: {
color: 'yellow'
}
}
},
},
emphasis: {
borderWidth: 0,
borderColor: 'transparent',
// areaColor: "transparent",
}
},
//数据评分value
data: [
{ "name": "湖州市", "value": 1.7 },
{ "name": "杭州市", "value": 3.8 },
{ "name": "嘉兴市", "value": 2.4 },
{ "name": "宁波市", "value": 2.6 },
{ "name": "绍兴市", "value": 3.5 },
{ "name": "金华市", "value": 1.2 },
{ "name": "衢州市", "value": 1.3 },
{ "name": "丽水市", "value": 1.5 },
{ "name": "台州市", "value": 1.5 },
{ "name": "温州市", "value": 2.2 },
{ "name": "舟山市", "value": 1.2 },
]
}],//各省地图颜色数据依赖value
}
chart.setOption(option);
setTimeout(function () {
window.onresize = function () {
chart.resize();
}
}, 200)
}
echarts地图
最新推荐文章于 2024-05-16 23:18:35 发布