echarts地图下钻（全国到省）下钻一次

优速盾-小U • 2022年7月30日 21:57 • 行业资讯 • 阅读 575

<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://cdn.huanggefan.cn/echarts/4.6.0/echarts.js"></script> <script src="https://cdn.huanggefan.cn/jquery/3.4.1/jquery-3.4.1.js"></script> <title>ECharts China Map Demo</title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; } </style> </head> <body> <div id="main" style="height:100%; width:100%"></div> <script type="text/javascript"> //地图容器 var chart = echarts.init(document.getElementById('main')); //34个省、市、自治区的名字拼音映射数组 var provinces = [ //23个省 "台湾省", "河北省", "山西省", "辽宁省", "吉林省", "黑龙江省", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "海南省", "四川省", "贵州省", "云南省", "陕西省", "甘肃省", "青海省", //5个自治区 "新疆维吾尔自治区", "广西壮族自治区", "内蒙古自治区", "宁夏回族自治区", "西藏自治区", //4个直辖市 "北京市", "天津市", "上海市", "重庆市", //2个特别行政区 "香港特别行政区", "澳门特别行政区" ]; var mapdata = []; //绘制全国地图 $.getJSON('../data/china.json', function(data) { d = []; for (var i = 0; i < data.features.length; i++) { d.push({ name: data.features[i].properties.name }) } mapdata = d; echarts.registerMap('china', data); renderMap('china', d); }); //地图点击事件 chart.on('click', function(params) { if (provinces.indexOf(params.name) != -1) { $.getJSON('../data/province/' + params.name + '.json', function(data) { echarts.registerMap(params.name, data); var d = []; for (var i = 0; i < data.features.length; i++) { d.push({ name: data.features[i].properties.name }) } renderMap(params.name, d); }); } else { renderMap('china', mapdata); } }); //初始化绘制全国地图配置 var option = { tooltip: { trigger: 'item', formatter: '{b}' }, animationDuration: 1000, animationEasing: 'cubicOut', animationDurationUpdate: 1000, }; function renderMap(map, data) { option.series = [{ name: map, type: 'map', mapType: map, // roam: false, zoom: 1, nameMap: { 'china': '中国' }, label: { normal: { show: true }, emphasis: { show: true } }, roam: true, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(175,238,238, 0)' // 0% 处的颜色  }, { offset: 1, color: 'rgba( 47,79,79, .1)' // 100% 处的颜色  }], globalCoord: false // 缺省为 false  }, shadowColor: 'rgba(128, 217, 248, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, data: data }]; //渲染地图  chart.setOption(option); } </script> </body> </html>