echarts显示中国地图以及省份资源-CSDN文库

共41个文件

js：39个

html：2个

echarts

31 浏览量 2024-09-10 18:03:45 上传评论收藏 1.2MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

echarts-map.zip （41个子文件）

map

china-contour.js 11KB

province

yunnan.js 62KB

neimenggu.js 58KB

shanxi.js 24KB

hubei.js 39KB

chongqing.js 48KB

xianggang.js 13KB

anhui.js 32KB

hebei.js 40KB

jiangxi.js 33KB

shanxi1.js 32KB

jiangsu.js 24KB

beijing.js 22KB

hunan.js 46KB

gansu.js 48KB

hainan.js 30KB

ningxia.js 14KB

qinghai.js 44KB

heilongjiang.js 78KB

guangdong.js 72KB

aomen.js 3KB

fujian.js 44KB

jilin.js 42KB

xinjiang.js 87KB

guizhou.js 33KB

guangxi.js 47KB

sichuan.js 84KB

henan.js 37KB

xizang.js 51KB

tianjin.js 14KB

zhejiang.js 51KB

shanghai.js 13KB

shandong.js 51KB

liaoning.js 50KB

taiwan.js 30KB

china.js 61KB

world.js 144KB

echarts.min.4.9.0.js 767KB

jquery.min.js 94KB

map-china-provice.html 7KB

map-china.html 4KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全国省份切换</title>  <script src="js/echarts.min.4.9.0.js"></script>  <script src="js/map/china.js"></script> <script src="js/jquery.min.js"></script> </head> <body>  <button id="back">返回全国</button> <div id="main" style="width: 1100px;height:800px;"></div> <script type="text/javascript"> var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen','taiwan']; var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']; var oBack = document.getElementById("back"); var chart = echarts.init(document.getElementById('main')); var seriesData = [ {name:'北京',value:45}, {name:'天津',value:54}, {name:'河北',value:247}, {name:'山西',value:2}, {name:'辽宁',value:63}, {name:'黑龙江',value:4}, {name:'上海',value:773}, {name:'江苏',value:2656}, {name:'浙江',value:2866}, {name:'安徽',value:576}, {name:'福建',value:151}, {name:'江西',value:175}, {name:'山东',value:2000}, {name:'河南',value:150}, {name:'湖北',value:214}, {name:'湖南',value:21}, {name:'广东',value:3446}, {name:'广西',value:18}, {name:'海南',value:17}, {name:'重庆',value:16}, {name:'四川',value:16}, {name:'贵州',value:8}, {name:'云南',value:1}, {name:'陕西',value:19}, {name:'甘肃',value:1}, {name:'新疆',value:37} ] oBack.onclick = function () { initEcharts("china", "中国"); }; initEcharts("china", "中国"); // 初始化echarts function initEcharts(pName, Chinese_) { var tmpSeriesData = pName === "china" ? seriesData : []; var option = { title: { text: Chinese_ || pName, top:'top', x:'center' }, tooltip: { trigger: 'item', // 触发类型，'item' 表示鼠标悬浮到图形上时触发 formatter: '{b}: {c}' // 提示框内容的格式，{b} 是名称，{c} 是值 }, // dataRange visualMap: { show: true, min: 0, max: 3000, text: ["高", "低"], realtime: true, calculable: true, color: ["#28C9B7", "#E3F2D9"], }, series:[ { name: Chinese_ || pName, type:'map', map: pName, roam: false,//是否开启鼠标缩放和平移漫游 show:true, zoom:1.1, selectedMode : 'single', label: { normal: { show: true, // 显示省份名称或数量 formatter: function (params) { if (pName === "china") { // 当值为0时不显示省份名称，直接留空；否则显示省份名称 if (params.value && params.value >0){ return params.name } return ''; }else{ return params.name } }, fontSize:12, color:'#333', position: 'top' // 标签在地图内部 }, emphasis: { show: true, fontSize: '14', fontWeight: 'bold' } }, tooltip: { formatter: function (params) { // 当值为0时不显示信息，直接留空；否则显示数量 if (params.value && params.value >0){ return params.name + ' : '+params.value } return params.name; } }, markArea:{ label:{ show:true }, itemStyle:{ color:'blue', }, }, itemStyle: { normal: { show:true, color:'#fff', areaColor: "#DAE3F3", borderColor: '#fff', // 省份边界线颜色 borderWidth: 1, // 省份边界线宽度 position: 'inside' // 标签在地图内部 }, emphasis: { areaColor: null, shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, data: tmpSeriesData } ], }; chart.setOption(option); chart.off("click"); if (pName === "china") { // 全国时，添加click 进入省级 chart.on('click', function (param) { console.log(param.name); // 遍历取到provincesText 中的下标去拿到对应的省js for (var i = 0; i < provincesText.length; i++) { if (param.name === provincesText[i]) { //显示对应省份的方法 showProvince(provinces[i], provincesText[i]); break; } } if (param.componentType === 'series') { var provinceName =param.name; $('#box').css('display','block'); $("#box-title").html(provinceName); } }); } else { // 省份，添加双击回退到全国 chart.on("dblclick", function () { initEcharts("china", "中国"); }); } } // 展示对应的省 function showProvince(pName, Chinese_) { //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。 loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function () { initEcharts(Chinese_); }); } // 加载对应的JS function loadBdScript(scriptId, url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if (script.readyState) { //IE script.onreadystatechange = function () { if (script.readyState === "loaded" || script.readyState === "complete") { script.onreadystatechange = null; callback(); } }; } else { // Others script.onload = function () { callback(); }; } script.src = url; script.id = scriptId; document.getElementsByTagName("head")[0].appendChild(script); }; </script> </body> </html>

评论收藏

内容反馈