echarts map(地图) 省份名称居中显示
修改echarts中的china.js文件中省份经纬度,使省份名称居中显示。
亲测可用,更新于2020-12-10
china.js 点击下载
修改前,省份名称并不居中显示:
修改后:
具体修改方法(替换china.js
):
vue项目替换:node_modules\echarts\map\js\china.js
其他项目直接引入:<script src="../js/china.js"></script>
另外附上源码
<script src="../js/echarts.min.js"></script>
<script src="../js/china.js"></script>
<div id="map-box"></div>
var mapData = [
{ name: '北京', value: Math.round(Math.random() * 1000) },
{ name: '天津', value: Math.round(Math.random() * 1000) },
{ name: '上海', value: Math.round(Math.random() * 1000) },
{ name: '重庆', value: Math.round(Math.random() * 10) },
{ name: '河北', value: Math.round(Math.random() * 1000) },
{ name: '河南', value: Math.round(Math.random() * 1000) },
{ name: '云南', value: Math.round(Math.random() * 1000) },
{ name: '辽宁', value: Math.round(Math.random() * 10) },
{ name: '黑龙江', value: Math.round(Math.random() * 1000) },
{ name: '湖南', value: Math.round(Math.random() * 1000) },
{ name: '安徽', value: Math.round(Math.random() * 1000) },
{ name: '山东', value: Math.round(Math.random() * 10) },
{ name: '新疆', value: Math.round(Math.random() * 0) },
{ name: '江苏', value: Math.round(Math.random() * 10) },
{ name: '浙江', value: Math.round(Math.random() * 1000) },
{ name: '江西', value: Math.round(Math.random() * 1000) },
{ name: '湖北', value: Math.round(Math.random() * 10) },
{ name: '广西', value: Math.round(Math.random() * 1000) },
{ name: '甘肃', value: Math.round(Math.random() * 100) },
{ name: '山西', value: Math.round(Math.random() * 1000) },
{ name: '内蒙古', value: Math.round(Math.random() * 1000) },
{ name: '陕西', value: Math.round(Math.random() * 1000) },
{ name: '吉林', value: Math.round(Math.random() * 1000) },
{ name: '福建', value: Math.round(Math.random() * 10) },
{ name: '贵州', value: Math.round(Math.random() * 1000) },
{ name: '广东', value: Math.round(Math.random() * 100) },
{ name: '青海', value: Math.round(Math.random() * 1000) },
{ name: '西藏', value: Math.round(Math.random() * 10) },
{ name: '四川', value: Math.round(Math.random() * 1000) },
{ name: '宁夏', value: Math.round(Math.random() * 1000) },
{ name: '海南', value: Math.round(Math.random() * 1000) },
{ name: '台湾', value: Math.round(Math.random() * 1000) },
{ name: '香港', value: Math.round(Math.random() * 100) },
{ name: '澳门', value: Math.round(Math.random() * 1000) }
]
getMap(1000, mapData);
function getMap(max, seriesData) {
var dom = document.getElementById('map-box'),
myChart = echarts.init(dom),
option = {
title: {
subtext: '设备数',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: function (data) {
return '设备数<br/>' + data.name + ' : ' + (data.value || 0) + '个';
}
},
visualMap: {
min: 0,
max: max,
left: 'center',
top: 'bottom',
color: ['#F2602C', '#F9CC2A'],
calculable: true,
calculable: true,
orient: "horizontal",
itemHeight: 200,
},
series: [
{
name: '设备数',
type: 'map',
mapType: 'china',
zoom: 1.2,
y: 30,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data: seriesData
}]
};
myChart.setOption(option);
}