echarts在中国地图上绘制各省指标

最新推荐文章于 2025-07-11 13:39:23 发布

Peter447

最新推荐文章于 2025-07-11 13:39:23 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web端文章标签： javascript 中国地图 echarts 省级指标 china.js

本文链接：https://blog.youkuaiyun.com/weixin_42209881/article/details/88397416

web端专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用ECharts和jQuery在网页上实现中国地图数据的可视化，包括加载地图、设置样式和展示数据的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图：
在这里插入图片描述
下面看实现方法：
html中主要代码

<script src="../static/js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="../static/js/echarts.min.js" ></script>
<script type="text/javascript" src="../static/js/china.js" ></script>

<div id = "chartMap" style="width: 50%;height: 500px">

jquey和echarts的包网上都可以找到，这个China.js上边有下载链接，
https://download.youkuaiyun.com/download/weixin_42209881/12103270
JS代码：

function drawCountryMap(){
    $.get(hostBase + "getWholeCountryOption?operator=" + operator,
        function(data) {
            var optionMap = {
                backgroundColor: '#FFFFFF',
                title: {
                    text: '全国数据呈现',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                //左侧小导航图标
                visualMap: {
                    show : true,
                    x: 'left',
                    y: 'center',
                    splitList: [
                        {start: 10000000, end:20000000},{start: 8000000, end: 10000000},
                        {start: 6000000, end: 8000000},{start: 4000000, end: 6000000},
                        {start: 2000000, end: 4000000},{start: 0, end: 2000000}
                    ],
                    color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
                },

                //配置属性
                series: [{
                    name: '数据',
                    type: 'map',
                    mapType: 'china',
                    roam: true,
                    label: {
                        normal: {
                            show: true  //省份名称
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data:JSON.parse(data)  //数据
                }]
            };
            var myChart = echarts.init(document.getElementById('chartMap'));
//使用制定的配置项和数据显示图表
            myChart.setOption(optionMap);
        }
    );

}

data的数据格式是JSON数组，封装好就行：

[{
	"name": "上海",
	"value": 3856401
},
{
	"name": "云南",
	"value": 3925833
},
{
	"name": "内蒙古",
	"value": 2313910
},
{
	"name": "北京",
	"value": 4781838
},
{
	"name": "台湾",
	"value": 5138
},
{
	"name": "吉林",
	"value": 2438855
},
{
	"name": "四川",
	"value": 6901988
},
{
	"name": "天津",
	"value": 1756655
},
{
	"name": "宁夏",
	"value": 607930
},
{
	"name": "安徽",
	"value": 4843313
},
{
	"name": "山东",
	"value": 9684841
},
{
	"name": "山西",
	"value": 415650
},
{
	"name": "广东",
	"value": 13398286
},
{
	"name": "广西",
	"value": 3415299
},
{
	"name": "新疆",
	"value": 1389475
},
{
	"name": "江苏",
	"value": 10190082
},
{
	"name": "江西",
	"value": 3610550
},
{
	"name": "河北",
	"value": 6592566
},
{
	"name": "河南",
	"value": 8996997
},
{
	"name": "浙江",
	"value": 8124778
},
{
	"name": "海南",
	"value": 1042920
},
{
	"name": "湖北",
	"value": 4586677
},
{
	"name": "湖南",
	"value": 4371737
},
{
	"name": "甘肃",
	"value": 1731624
},
{
	"name": "福建",
	"value": 3359203
},
{
	"name": "西藏",
	"value": 192447
},
{
	"name": "贵州",
	"value": 3173901
},
{
	"name": "辽宁",
	"value": 4687312
},
{
	"name": "重庆",
	"value": 2763665
},
{
	"name": "陕西",
	"value": 3907287
},
{
	"name": "青海",
	"value": 370707
},
{
	"name": "黑龙江",
	"value": 3312506
}]

这就大功告成了