echarts map(地图) 省份名称居中显示

修改echarts中的china.js文件中省份经纬度,使省份名称居中显示。

亲测可用,更新于2020-12-10

china.js 点击下载


修改前,省份名称并不居中显示:

在这里插入图片描述

修改后:

在这里插入图片描述


具体修改方法(替换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);
}
posted @ 2022-07-20 18:15  猫老板的豆  阅读(739)  评论(0编辑  收藏  举报