Echarts绘制中国地图

最新推荐文章于 2023-04-25 14:21:34 发布
最新推荐文章于 2023-04-25 14:21:34 发布
阅读量2.6w 收藏 22
点赞数
分类专栏： echarts3.0 文章标签： echarts3-0 echarts-地图 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zm_miner/article/details/78330101
版权
本文记录了使用Echarts绘制中国地图的过程，包括引入China.js文件，设置地图样式，如使用visualMap进行颜色渐变，并探讨了calculable属性与splitList的效果。适合后续需要在项目中快速实现类似功能的开发者参考。
摘要由CSDN通过智能技术生成

最近项目中需要出现中国地图 ,因为总是使用echarts写柱状图和饼图,头一次写地图,所以就给记录下来 先把整个代码贴上 ,下次用到的时候可以直接拿过来 ,然后在这个基础上做修改就ok了,
因为是中国地图所以要引入China.js,这个js好像不好找,

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>ECharts</title>
    <!--<link rel="stylesheet" type="text/css" href="css/main.css"/>-->
    <script src="../jquery.js"></script>
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
    <style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<body>
<div id="china-map"></div>
<script>
    var myChart = echarts.init(document.getElementById('china-map'));
    var option = {
        title : {
            text: '订单量',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {//提示框组件。
            trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        },
        legend: {
            orient: 'horizontal',//图例的排列方向
            x:'left',//图例的位置
            data:['订单量']
        },

        visualMap: {//颜色的设置  dataRange
            x: 'left',
            y: 'center',
            splitList: [
                {start: 1500},
                {start: 900, end: 1500},
                {start: 310, end: 1000},
                {start: 200, end: 300},
                {start: 10, end: 200, label: '10 到 200（自定义label）'},
                {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
                {end: 10}
            ],
//            min: 0,
//            max: 2500,
//            calculable : true,//颜色呈条状
            text:['高','低'],// 文本，默认为数值文本
            color: ['#E0022B', '#E09107', '#A3E00B']
        },
        toolbox: {//工具栏
            show: true,
            orient : 'vertical',//工具栏 icon 的布局朝向
            x: 'right',
            y: 'center',
            feature : {//各工具配置项。
                mark : {show: true},
                dataView : {show: true, readOnly: false},//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                restore : {show: true},//配置项还原。
                saveAsImage : {show: true}//保存为图片。
            }
        },
        roamController: {//控制地图的上下左右放大缩小 图上没有显示
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series : [
            {
                name: '订单量',
                type: 'map',
                mapType: 'china',
                roam: false,//是否开启鼠标缩放和平移漫游
                itemStyle:{//地图区域的多边形 图形样式
                    normal:{//是图形在默认状态下的样式
                        label:{
                            show:true,//是否显示标签
                            textStyle: {
                                color: "rgb(249, 249, 249)"
                            }
                        }
                    },
                    emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        label:{show:true}
                    }
                },
                top:"3%",//组件距离容器的距离
                data:[
                    {name: '北京',value: Math.round(Math.random()*2000)},
                    {name: '天津',value: Math.round(Math.random()*2000)},
                    {name: '上海',value: Math.round(Math.random()*2000)},
                    {name: '重庆',value: Math.round(Math.random()*2000)},
                    {name: '河北',value: 0},
                    {name: '河南',value: Math.round(Math.random()*2000)},
                    {name: '云南',value: 5},
                    {name: '辽宁',value: 305},
                    {name: '黑龙江',value: Math.round(Math.random()*2000)},
                    {name: '湖南',value: 200},
                    {name: '安徽',value: Math.round(Math.random()*2000)},
                    {name: '山东',value: Math.round(Math.random()*2000)},
                    {name: '新疆',value: Math.round(Math.random()*2000)},
                    {name: '江苏',value: Math.round(Math.random()*2000)},
                    {name: '浙江',value: Math.round(Math.random()*2000)},
                    {name: '江西',value: Math.round(Math.random()*2000)},
                    {name: '湖北',value: Math.round(Math.random()*2000)},
                    {name: '广西',value: Math.round(Math.random()*2000)},
                    {name: '甘肃',value: Math.round(Math.random()*2000)},
                    {name: '山西',value: Math.round(Math.random()*2000)},
                    {name: '内蒙古',value: Math.round(Math.random()*2000)},
                    {name: '陕西',value: Math.round(Math.random()*2000)},
                    {name: '吉林',value: Math.round(Math.random()*2000)},
                    {name: '福建',value: Math.round(Math.random()*2000)},
                    {name: '贵州',value: Math.round(Math.random()*2000)},
                    {name: '广东',value: Math.round(Math.random()*2000)},
                    {name: '青海',value: Math.round(Math.random()*2000)},
                    {name: '西藏',value: Math.round(Math.random()*2000)},
                    {name: '四川',value: Math.round(Math.random()*2000)},
                    {name: '宁夏',value: Math.round(Math.random()*2000)},
                    {name: '海南',value: Math.round(Math.random()*2000)},
                    {name: '台湾',value: Math.round(Math.random()*2000)},
                    {name: '香港',value: Math.round(Math.random()*2000)},
                    {name: '澳门',value: Math.round(Math.random()*2000)}
                ]
            }
        ]
    };
    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
        var dataIndex = params.dataIndex;
        console.log(params);
    });
</script>
</body>
</html>

image.png

   dataRange: {//颜色的变化设置
            x: 'left',
            y: 'bottom',
            splitList: [
                {start: 1500},
                {start: 900, end: 1500},
                {start: 310, end: 1000},
                {start: 200, end: 300},
                {start: 10, end: 200, label: '10 到 200（自定义label）'},
                {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
                {end: 10}
            ],
//            calculable : true,//颜色呈条状
//            text:['高','低'],// 文本，默认为数值文本
            color: ['#E0022B', '#E09107', '#A3E00B']
        },

貌似dataRange换成visualMap效果是一样的 我也没发现不同
image.png

如果要想呈现这种样式可以设置calculable为true

   visualMap: {//颜色的设置  dataRange
            x: 'left',
            y: 'bottom',
           splitList: [
                {start: 1500},
                {start: 900, end: 1500},
                {start: 310, end: 1000},
                {start: 200, end: 300},
                {start: 10, end: 200, label: '10 到 200（自定义label）'},
                {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
                {end: 10}
            ],
//            min: 0,
//            max: 2500,
            calculable : true,//颜色呈条状
            text:['高','低'],// 文本，默认为数值文本
            color: ['#E0022B', '#E09107', '#A3E00B']
        },

设置calculable为true为线性渐变,splitList就没有效果了,并且最小数值是0 最大是200 自己也可以使用min和max设置

如果设置默认文本 text 那么设置的splitList就没有效果了

image.png

一些属性我也在代码后面做了说明,反正还挺容易理解的,如果项目中还需要一些细节处理就可以翻看api

本例子参照

http://echarts.baidu.com/echarts2/doc/example/map1.html

好多人没有China.js 文件

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('china', {"type":"FeatureCollection","features":[{"id":"710000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@°Ü¯Û"],["@@ƛĴÕƊÉɼģºðʀ\\ƎsÆNŌÔĚäœnÜƤɊĂǀĆĴžĤNJŨxĚĮǂƺòƌ‚–âÔ®ĮXŦţƸZûЋƕƑGđ¨ĭMó·ęcëƝɉlÝƯֹÅŃ^Ó·śŃNjƏďíåɛGɉ™¿@ăƑŽ¥ĘWǬÏĶŁâ"],["@@\\p|WoYG¿¥I†j@¢"],["@@
¡‰@ˆV^RqˆBbAŒnTXeRz¤Lž«³I"],["@@ÆEE—„kWqë @œ"],["@@fced"]],"encodeOffsets":[[[122886,24033]],[[123335,22980]],[[122375,24193]],[[122518,24117]],[[124427,22618]],[[124862,26043]]]},"properties":{"cp":[121.509062,25.044332],"name":"台湾","childNum":6}},{"id":"130000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@o~†Z]‚ªr‰ºc_ħ²G¼s`jΟnüsÂœłNX_“M`ǽÓnUK
Ĝēs¤­©yrý§uģŒc†JŠ›e"],["@@U`Ts¿m‚"],["@@oºƋÄd–eVŽDJj£€J|Ådz•Ft~žKŨ¸IÆv|”‡¢r}膎onb˜}`RÎÄn°ÒdÞ²„^®’lnÐèĄlðÓœ×]ªÆ}LiĂ±Ö`^°Ç¶p®đDcœŋ`–ZÔ’¶êqvFÆš†N®ĆTH®¦O’¾ŠIbÐã´BĐɢŴÆíȦp–ĐÞXR€·nndOž¤’OÀĈƒ­Qg˜µFo|gȒęSWb©osx|hYh•gŃfmÖĩnº€TÌ’Sp›¢dYĤ¶UĈjl’ǐpäìë|³kÛfw²Xjz~ÂqbTŠÑ„ěŨ@|oM‡’zv¢ZrÃVw¬ŧĖ¸fŒ°ÐT€ªqŽs{Sž¯r æÝlNd®²Ğ džiGĘ‚J™¼lr}~K¨ŸƐÌWö€™ÆŠzRš¤lêmĞL΄’@¡|q]SvK€ÑcwpÏρ†ĿćènĪWlĄkT}ˆJ”¤~ƒÈT„d„™pddʾĬŠ”ŽBVt„EÀ¢ôPĎƗè@~‚k–ü\\rÊĔÖæW_§¼F˜†´©òDòj’ˆYÈrbĞāøŀG{ƀ|¦ðrb|ÀH`pʞkv‚GpuARhÞÆǶgĘŠTǼƹS£¨¡ù³ŘÍ]¿Ây™ôEP xX¶¹܇O¡“gÚ¡IwÃ鑦ÅB‡Ï|Ç°
N«úmH¯‹âŸDùŽyŜžŲIÄuШDž•¸dɂ‡‚FŸƒ•›Oh‡đ©OŸ›iÃ`ww^ƒÌkŸ‘ÑH«ƇǤŗĺtFu
{Z}Ö@U‡´
ʚLg®¯Oı°ÃwŸ ^˜—€VbÉs‡ˆmA
ê]]w„§›RRl£‡ȭµu¯b{ÍDěïÿȧŽuT£ġƒěŗƃĝ“Q¨fV†Ƌ•ƅn­a@‘³@šď„yýIĹÊKšŭfċŰóŒxV@tˆƯŒJ”]eƒR¾fe|rHA˜|h~Ėƍl§ÏŠlTíb ØoˆÅbbx³^zÃĶš¶Sj®A”yÂhðk`š«P€”ˈµEF†Û¬Y¨Ļrõqi¼‰Wi°§’б´°^[ˆÀ|ĠO@ÆxO\\tŽa\\tĕtû{ġŒȧXýĪÓjùÎRb›š^ΛfK[ݏděYfíÙTyŽuUSyŌŏů@Oi½’éŅ­aVcř§ax¹XŻác‡žWU£ôãºQ¨÷Ñws¥qEH‰Ù|‰›šYQoŕÇyáĂ£MðoťÊ‰P¡mšWO¡€v†{ôvîēÜISpÌhp¨ ‘j†deŔQÖj˜X³à™Ĉ[n`Yp@Už–cM`’RKhŒEbœ”pŞlNut®Etq‚nsÁŠgA‹iú‹oH‡qCX‡”hfgu“~Ï‹WP½¢G^}¯ÅīGCŸÑ^ãziMáļMTÃƘrMc|O_ž¯Ŏ´|‡morDkO\\mĆJfl@cĢ¬¢aĦtRıÒ™¾ùƀ^juųœK­ƒUFy™—Ɲ
›īÛ÷ąV×qƥV¿aȉd³B›qPBm›aËđŻģm“Å®VŠ¹d^K‡KoŸnYg“¯Xhqa”Ldu¥•ÍpDž¡KąÅƒkĝęěhq‡}HyÓ]¹ǧ£
Í÷¿qᵧš™g‘¤o^á¾ZE‡¤i`ij{n•ƒOl»ŸWÝĔįhg›F[¿¡—ßkOüš_‰€ū‹i„DZàUtėGylƒ}ŒÓM}€jpEC~¡FtoQi‘šHkk{Ãmï‚"]],"encodeOffsets":[[[119712,40641]],
最低0.47元/天 解锁文章
嚣张.miner
关注
专栏目录
ECharts--中国地图（无敌详细）
qq_45066453的博客
03-12 7万+
使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！
echarts中国地图
克己
08-17 2003
记录一下echarts中国地图
echarts china map
10-17
此文件包含了echarts 里面的china.js 完整版的 如果不能用联系我QQ352183987 随时更新 echarts官网的不能下载的旧的矢量地图我都有 这个包里面还有各个省份的js文件和json文件 需要的请自行下载 下载之后就可以用 实在不懂随后我有空会出一个教程在我的博客里面.或者联系我QQ
Echarts——中国地图绘制
热门推荐
heal_l的博客
01-13 1万+
首先准备中国城市分布Geo数据 china.jsonhttps://download.csdn.net/download/heal_l/75671467https://download.csdn.net/download/heal_l/75671467
Echarts-中国大地图
weixin_57246351的博客
04-22 465
<template> <div class="map"> <div id="map" ref="chart1" style="width:777px;height:527px"></div> </div> </template> <script> import * as echarts from 'echarts' // import jsonp from 'jsonp' import 'e
html绘制中国地图,ECharts绘制中国地图、广西地图
weixin_42617150的博客
06-28 3346
准备工作：导入ECharts依赖、和地图需要的.js文件。文件获取方式：官网：urlgithub：url(下载完后 ：incubator-echarts-4.8.0\map\js\province目录下有各个省级的.js文件)绘制中国地图先在html中添加一个地图要挂载的节点：china-mapjs:var myChart = echarts.init(document.getElementByI...
vue中使用echarts绘制中国地图
weixin_44864084的博客
08-07 2860
首先需要一个绘制中国地图的json文件（资源还在审核，审核过后会重新贴上来） 1、首先引入echarts和json文件，在需要的地方引即可 import echarts from 'echarts'; const chinaJson = require('./china2.json'); 2、注册中国地图（重要代码），这是我写的一个动态的地图组件，可以根据自己的需求进行改造 init(data) { let dataSourcePie = echarts.init(
vue3+echarts绘制中国地图
lbchenxy的博客
05-19 6031
最近接到一个需求是做一个中国地图 样式大概是这样的 这里我们能看到明显的去除了南海群岛。百度查阅相关资料都是说要这样，这个方法的大概意思就是：在地图中对特定的区域配置样式。穿梭车 regions: [ { name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, l
vue使用echarts绘制中国地图
weixin_45161039的博客
04-21 713
vue使用echarts地图 //myMap.vue //china.js下载地址 //mymap.js下载地址 import china from "@/components/map/china.js"; import option from "@/components/map/mymap.js"; export default { methods: { initMap() { this.ECharts.registerMap("china", china); let
echarts绘制全国地图完整代码
06-08
在“echarts绘制全国地图完整代码”这个主题中，我们将深入探讨如何使用 ECharts 来绘制中国全图，并了解相关的核心知识点。 首先，`map.html` 文件是主页面，它包含了 ECharts 地图展示的 HTML 结构。在这个文件中...
echarts-china-map点击显示省地图
05-08
echarts-china-map点击显示省地图，实测有效
Echarts 中国地图和省份信息完整版JSON文件（包含香港、澳门、台湾和钓鱼岛）
05-23
Echarts 中国地图和省份信息完整版JSON文件（包含香港、澳门、台湾和钓鱼岛），下载这个文件然后直接引人就可以使用Echarts的地图功能了
echarts地图资源
12-06
echarts map 资源,含全世界；中国；省；市地区的地图 ；json .js都有），echarts官网上都挺详细的，唯一难受的地方就是echarts的地图数据都下架了，数据或许不是很精确，所以仅供大家参考。有问题可以联系
echarts中国城市
07-12
echarts中国地级市调用必备，，，
Echarts vue 中国地图
qq_41625949的博客
04-30 323
<template> <div class="echarts"> <div ref="map" :style="{height:'610px',width:'100%'}"></div> </div> </template> <script> import echarts from 'echarts' require('echarts/map/js/china') import api from '@/a.
Echarts实现——中国地图
qqjuanqq的博客
11-01 1万+
Echarts实现——中国地图
echarts 画中国地图
weixin_51666715的博客
04-25 2948
数据可视化平台，中国各省数据和坐标 阿里云可视化 效果 使用echart画中国地图，步骤如下 1.安装依赖 npm i echarts 创建一个js文件 当你可以访问https请求的时候则使用，如下代码 import axios from "axios"; export default axios.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json") 如果无法请求https接口，则直接导入 3。配置option配
echarts绘制宁夏地图
最新发布
04-18
ECharts 是一个基于 JavaScript 的开源可视化库，用于创建交互式的图表和地图。它提供了丰富的图表类型和灵活的配置选项，可以满足各种数据可视化的需求。 要绘制宁夏地图，首先需要准备地图数据。ECharts 提供了官方的地图数据集，其中包括了中国各个省份和城市的地理信息数据。你可以在 ECharts 的官方网站上下载到这些地图数据。 接下来，你需要引入 ECharts 的 JavaScript 文件，并创建一个 HTML 容器来显示地图。然后，通过配置 ECharts 实例的参数，指定要绘制的地图类型为宁夏，并设置相应的样式和数据。 以下是一个简单的示例代码，用于绘制宁夏地图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 绘制宁夏地图</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script> </head> <body> <div id="map" style="width: 800px; height: 600px;"></div> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('map')); // 配置地图参数 var option = { title: { text: '宁夏地图', left: 'center' }, tooltip: {}, visualMap: { min: 0, max: 100, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true }, series: [{ name: '宁夏地图', type: 'map', mapType: 'ningxia', roam: true, label: { show: true }, data: [ {name: '银川市', value: 80}, {name: '石嘴山市', value: 50}, {name: '吴忠市', value: 70}, {name: '固原市', value: 60}, {name: '中卫市', value: 40} ] }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 在上述代码中，我们通过设置 `mapType` 参数为 `'ningxia'` 来指定绘制宁夏地图。然后，在 `series` 的 `data` 中设置各个城市的数据，可以根据实际情况进行修改。 以上是一个简单的示例，你可以根据自己的需求进一步定制和美化地图。希望对你有帮助！
评论 37
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值