当前位置： 首页 > news >正文

【Echarts】使用echarts绘制多个不同类型的中国地图

news 来源：原创 2025/4/26 4:06:51

一、需求

在同一页面上绘制多个不同类型的中国地图，如果是在同一页面上绘制多个同一种类型的地图可以直接引用一个china.js文件，设置两个独立的div分别用于放置两个地图，并实例化配置相关参数即可，但是如果在同一个页面上绘制多个不同类型的地图，如果只引用一个china.js是行不通的，这样的话生成的地图是一样的。

下面的示例是在同一个页面上分别绘制出以“八大区域”和“全国省份”为要求的地图。

二、示例

点击全国地图，切换到以省份划分的地图，点击八大区域，切换到以八大区域划分的地图。

全国省份地图

八大区域地图

三、引入文件

除了引用jq外，还需要引用三个文件：echarts.js、china.js、chinaRegionsAreas.js

其中：china.js：全国省份划分，chinaRegionsAreas.js：八大区域划分

下载地址：https://download.csdn.net/download/qq_25285531/90690606https://download.csdn.net/download/qq_25285531/90690606

四、示例代码

HTML

<div style="width:100%;padding-left:0.5rem;box-sizing:border-box;margin-top:0.5rem;margin-bottom:0rem"><div style="color:#333;font-size:0.3rem"><i class="fa  fa-map-marker" aria-hidden="true" style="color:#1e80e8"></i> 中草药地域分布</div><div style="background:#fff;height:1px;width:2.7rem;box-shadow: 0px -4px 2px 0px #6ab4ff;border-radius:20px;margin-top:0.15rem"></div>
</div><div style="width:60%;margin:0 auto;margin-top:0.5rem;box-sizing:border-box;max-width:1100px"><div  style="box-shadow: 0px 0px 2px 1px #f5f5f5, inset 0px 0px 3px 3px #fff;background:#ddd;box-sizing:border-box;font-size:0.32rem;color:#666;padding:0.12rem 0.3rem 0.12rem 0.3rem;border:1px solid #fff;text-align:center;border-radius:10rem"><span class="one_btn" style="color:#0066cc">全国地图</span> <span style="position:relative;top:-0.02rem;color:#fff"> &nbsp;| </span> &nbsp;<span  class="two_btn">八大区域</span></div>
</div><div class="one" style="display:block"><div class="all-list" style="padding-top:0rem;"><div id="china-map" style="width: 7rem;height:6rem;margin:0 auto"></div></div>
</div><div class="two" style="display:none"><div class="all-list" style="padding-top:0rem;"><div id="main" style="width: 7rem;height:6rem;margin:0 auto"></div></div>
</div>

JS

<script src="/lexicon/echarts/echarts.js"></script>
<script>// 八大区域、全国地图点击效果$(document).ready(function() {$('.one_btn').click(function() {$('.one').show();$('.two').hide();$(this).css('color', '#0066cc');$('.two_btn').css('color', '#666');});$('.two_btn').click(function() {$('.one').hide();$('.two').show();$(this).css('color', '#0066cc');$('.one_btn').css('color', '#666');});});</script><!--八大区域 地图----------------------------------------------------------------------------------------------------------------------->
<script src="/lexicon/echarts/chinaRegionsAreas.js"></script>
<script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));option = null;option = {dataRange: {x: '-1000px',//图例横轴位置y: '-1000px',//图例纵轴位置splitList: [// 这里的数字需要和下面series里data的value值对应{start: 2, end: 2, color: '#54c3f0'},//东北{start: 3, end: 3, color: '#669900'},//华北{start: 4, end: 4, color: '#66cc66'},//西北{start: 5, end: 5, color: '#ffcc66'},//华中{start: 6, end: 6, color: '#cc6633'},//华东{start: 7, end: 7, color: '#3399ff'},//华南{start: 8, end: 8, color: '#33cccc'},//西南{start: 9, end: 9, color: '#669900'},//香港{start: 10, end: 10, color: '#669900'},//澳门{start: 11, end: 11, color: '#33cccc'},//台湾{start: 12, end: 12, color: '#339966'},//南海诸岛],splitNumber: 0},backgroundColor: '#fff',//画布背景颜色geo: {show: true,map: 'china',layoutCenter: ['66.5%', '50%'],//距离左右，上下距离的百分比layoutSize:'75%',//map百分比大小label: {show: false},roam: false,  // 是否允许地图缩放及拖到zoom:1.1,   //默认缩放比例itemStyle: {normal: {color: 'rgb(7,60,141)',borderColor: '#a5a0a0',  // 描边颜色黄色borderWidth: 1,       // 描边宽度shadowBlur: 5,    // 描边模糊shadowColor: 'rgba(0,0,0,0.01)',shadowOffsetX: 1,   // 描边偏移shadowOffsetY: 1,   // 描边偏移},// 设置鼠标经过高亮状态下的多边形和标签样式emphasis: {areaColor: '#fff',  shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 0,borderWidth: 1,shadowColor: 'rgba(200, 200, 200, 0.01)',}}},series: [{             name: '地图',type: 'map',mapType: 'china',showLegendSymbol : false,layoutCenter: ['66.5%', '50%'],//距离左右，上下距离的百分比layoutSize:'75%',//map百分比大小roam: false,  // 是否允许地图缩放及拖到zoom:1.1,   // 默认缩放比例label: {normal: {show: true},emphasis: {show: false}},itemStyle: {normal: {borderWidth: 0, //设置外层边框lineStyle: { type: 'solid', color:'#666',background:'red', },borderColor: '#bccace',shadowBlur: 10,shadowColor: 'rgba(0,0,0,.3)',shadowOffsetX: 1,shadowOffsetY: 1,label: {fontSize:14,lineHeght:14,height:14,color:'#000',show: false,formatter:function(params){if( params.name == '澳门' || params.name == '香港'){return '';}params.name = params.name.substring(0,2);return params.name+""+params.data.percent//+"\r\n"+params.data.val+"\r\n"+"Top"+params.value;},}}},emphasis: {label: {show: true}},data:[// 这里的value数值需要和上面dataRange里splitList的数值对应{name: '东北',value: 2,val:19,percent:''  },{name: '华北',value: 3,val:306,percent:'' },{name: '西北',value: 4,val:53,percent:''},{name: '华中',value: 5,val:241,percent:''  },{name: '华东',value: 6,val:561,percent:''  },{name: '华南',value: 7,val:274,percent:''  },{name: '西南',value: 8,val:108,percent:''  },{name: '香港', value: 9,percent:'' },{name: '澳门', value: 10,percent:'' },{name: '台湾', value: 11,percent:'' },{name: '南海诸岛', value: 12,percent:'' },]}]};// 地图点击事件myChart.on('click', function (params) {  layer.open({type: 2,shadeClose: false,shade: 'background-color: rgba(0,0,0,.5)',content: ''});// 点击事件携带的参数值var areaName=params.name;var areaValue=params.value;// 跳转页面window.location.href="xxx?typeid="+areaValue;});if (option && typeof option === "object") {myChart.setOption(option, true);}
</script><!--全国地图----------------------------------------------------------------------------------------------------------------------->
<script src="/shibienew/echarts-lixian/js/map/china.js"></script>
<script>var mChart = echarts.init(document.getElementById('china-map'));var option2 = {backgroundColor: '#fff',//画布背景颜色series: [{type: "map",map: "china", // 使用注册的地图名称layoutSize:'75%',//map百分比大小roam: false,data:[// 给全国省份设置不同的区域颜色{ name: '北京', value: 100, itemStyle: { areaColor: '#FEFDD8' } },{ name: '天津', value: 100, itemStyle: { areaColor: '#C8E4D4' } },{ name: '上海', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '重庆', value: 100, itemStyle: { areaColor: '#CACDE9' } },{ name: '河北', value: 100, itemStyle: { areaColor: '#F5C6DB' } },{ name: '山西', value: 100, itemStyle: { areaColor: '#C8E4D4' } },{ name: '辽宁', value: 100, itemStyle: { areaColor: '#CACDE9' } },{ name: '吉林', value: 100, itemStyle: { areaColor: '#F5C6DB' } },{ name: '黑龙江', value: 100, itemStyle: { areaColor: '#C8E4D4' } },{ name: '江苏', value: 100, itemStyle: { areaColor: '#F5C6DB' } },{ name: '浙江', value: 100, itemStyle: { areaColor: '#FEFDD8' } },{ name: '安徽', value: 100, itemStyle: { areaColor: '#C8E4D4' } },{ name: '福建', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '江西', value: 100, itemStyle: { areaColor: '#F5C6DB' } },{ name: '山东', value: 100, itemStyle: { areaColor: '#FEFDD8' } },{ name: '河南', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '湖北', value: 100, itemStyle: { areaColor: '#FEFDD8' } },{ name: '湖南', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '广东', value: 100, itemStyle: { areaColor: '#FEFDD8' } },{ name: '海南', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '四川', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '贵州', value: 100, itemStyle: { areaColor: '#C8E4D4' } },{ name: '云南', value: 100, itemStyle: { areaColor: '#FEFDD8' } },{ name: '陕西', value: 100, itemStyle: { areaColor: '#F5C6DB' } },{ name: '甘肃', value: 100, itemStyle: { areaColor: '#C8E4D4' } },{ name: '青海', value: 100, itemStyle: { areaColor: '#CACDE9' } },{ name: '台湾', value: 100, itemStyle: { areaColor: '#C8E4D4' } },{ name: '内蒙古', value: 100, itemStyle: { areaColor: '#FEFDD8' } },{ name: '广西', value: 100, itemStyle: { areaColor: '#F5C6DB' } },{ name: '西藏', value: 100, itemStyle: { areaColor: '#F5C6DB' } },{ name: '宁夏', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '新疆', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '香港', value: 100, itemStyle: { areaColor: '#F8E0BF' } },{ name: '澳门', value: 100, itemStyle: { areaColor: '#F8E0BF' } }],// 标签文字样式设置label: {normal: {fontSize:12,lineHeght:12,height:12,color:'#000',show: true,},},roam: false, //是否开启平游或缩放zoom: 1.2, //默认缩放比例itemStyle: {normal: {borderColor: '#a5a0a0',borderWidth: 0.5,shadowBlur: 5,shadowColor: 'rgba(0,0,0,.3)',shadowOffsetX: 1,shadowOffsetY: 1,},emphasis: {label: {show: true}},}}]};// 设置配置mChart.setOption(option2, true);// 窗口大小变化时重置地图window.addEventListener('resize', function() {mChart.resize();});// 地图点击事件mChart.on('click', function (params) {  //mouseoverlayer.open({type: 2,shadeClose: false,shade: 'background-color: rgba(0,0,0,.5)',content: ''});// 跳转window.location.href="xxx";});
</script>

参考文章

【Echarts】绘制中国地图及各省份地图_echarts雄安新区地图-CSDN博客

相关文章：

  • Java 安全：如何实现用户认证与授权？
  • 微信小程序文章管理系统开发实现
  • C++智能指针概念理解的面试题
  • 4/25 研0学习日志
  • 【产品经理】常见的交互说明撰写方法
  • 工业电子测量中的安全隐患与解决方案——差分探头的技术优势解析
  • 小白电路设计-设计11-恒功率充电电路设计
  • 人工智能与机器学习：Python从零实现逻辑回归模型
  • 遥测终端机，推动灌区流量监测向数据驱动跃迁
  • P19:Inception v1算法实战与解析
  • 第1讲｜R语言绘图体系总览（Base、ggplot2、ComplexHeatmap等）
  • 2025年GPLT团体程序设计天梯赛L1-L2
  • 电力系统最小惯性常数解析
  • 技术前沿：剖析Atheris在Python项目模糊测试中的核心优势
  • 技术面试一面标准流程
  • 查找函数【C++】
  • Pandas中的日期时间date处理
  • 进程和线程的区别、联系与典型应用场景
  • OpenWrt 与 Docker：打造轻量级容器化应用平台技术分享
  • 【不同名字的yolo的yaml文件名是什么意思】
  • 最高法知识产权法庭：6年来新收涉外案件年均增长23.2%
  • 经济日报金观平：充分发挥增量政策的经济牵引力
  • 国铁集团：一季度全国海铁运输商品车同比增长33.62%
  • 拉卡拉一季度净利约1亿降超五成，去年净利3.5亿降逾23%
  • 记录发生真相，南沙岛礁生态调查纪实片《归巢》发布
  • 乌克兰基辅遭大规模袭击，已致12人死亡