软件开发定制定制echarts的中国地图，点击进入省级地图，按需加载对应的省js，可返回中国地图

软件开发定制定制这是我项目中用到的示例图：

 原理：软件开发定制定制创建两个省份的数组，软件开发定制定制在点击某个省份的时候，软件开发定制定制遍历获取对应省份的数据js，软件开发定制定制并加载此数据js，同时重新初始化echarts渲染此省份的数据效果

1.省份数组，用于遍历获取对应城市js包

  1.        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'];
  2.         var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];

2.echart的点击事件后通过遍历获取对用的js用于加载

并且获取对应省份数据重新初始化

  1.         myChart.on('click', function (params) {
  2.             // alert(params.name);
  3.           //遍历取到provincesText 中的下标  去拿到对应的省js
  4.           for(var  i= 0 ; i < provincesText.length ; i++ ){
  5.             if(params.name == provincesText[i]){
  6.               //显示对应省份的方法
  7.               showProvince(provinces[i],provincesText[i])
  8.               break ;
  9.             }
  10.           }
  11.         });
  12.         function showProvince(pName, Chinese_){
  13.           //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
  14.           loadBdScript('$'+pName+'JS','js/province/'+pName+'.js',function(){
  15.               //初始化echarts:具体代码参考上面初始化中国地图即可，这里不再重复。
  16.               console.log(app)
  17.               app.isback = true
  18.               myChart.dispose()
  19.               app.provinceMap(Chinese_);
  20.           });
  21.         }
  22.  
  23.         //加载对应的JS
  24.         function loadBdScript(scriptId, url, callback) {
  25.           var script = document.createElement("script")
  26.           script.type = "text/javascript";
  27.           if (script.readyState){  //IE
  28.               script.onreadystatechange = function(){
  29.                 if (script.readyState == "loaded" || script.readyState == "complete"){
  30.                   script.onreadystatechange = null;
  31.                   callback();
  32.                 }
  33.               };
  34.           } else {  //Others
  35.             script.onload = function(){
  36.               callback();
  37.             };
  38.           }
  39.           script.src = url;
  40.           script.id = scriptId;
  41.           document.getElementsByTagName("head")[0].appendChild(script);
  42.         };

3.点击顶部返回国家地图

（因为我是外部引入vue写的，直接重新运行国家地图的方法即可）

  1.       // 返回到国家地图
  2.       backLink(){
  3.         this.isback = false
  4.         this.chinaMap()
  5.       },

4.整个完整的示例代码如下：

  1.     mounted() {
  2.       this.chinaMap()
  3.     },
  4.     methods: {
  5.       // 返回到国家地图
  6.       backLink(){
  7.         this.isback = false
  8.         this.chinaMap()
  9.       },
  10.       //模拟国家数据， 获取国家数据的方法
  11.       chinaMap() {
  12.         // 临时数据
  13.         var dataList=[
  14.         {name: '北京', value: 92, UserCount: 675}
  15.         ,{name: '安徽', value: 34, UserCount: 345}
  16.         ,{name: '福建', value: 23, UserCount: 23}
  17.         ,{name: '甘肃', value: 65, UserCount: 43}
  18.         ,{name: '广东', value: 74, UserCount: 845}
  19.         ,{name: '广西', value: 23, UserCount: 45}
  20.         ,{name: '贵州', value: 34, UserCount: 84}
  21.         ,{name: '海南', value: 66, UserCount: 457}
  22.         ,{name: '河北', value: 23, UserCount: 78}
  23.         ,{name: '河南', value: 25, UserCount: 845}
  24.         ,{name: '黑龙江', value: 63, UserCount: 367}
  25.         ,{name: '湖北', value: 46, UserCount: 63}
  26.         ,{name: '湖南', value: 15, UserCount: 345}
  27.         ,{name: '吉林', value: 45, UserCount: 64}
  28.         ,{name: '江苏', value: 65, UserCount: 744}
  29.         ,{name: '江西', value: 135, UserCount: 94}
  30.         ,{name: '辽宁', value: 11, UserCount: 356}
  31.         ,{name: '内蒙古', value: 23, UserCount: 23}
  32.         ,{name: '宁夏', value: 64, UserCount: 123}
  33.         ,{name: '青海', value: 63, UserCount: 178}
  34.         ,{name: '山东', value: 12, UserCount: 25}
  35.         ,{name: '山西', value: 24, UserCount: 74}
  36.         ,{name: '陕西', value: 43, UserCount: 22}
  37.         ,{name: '上海', value: 28, UserCount: 74}
  38.         ,{name: '四川', value: 24, UserCount: 745}
  39.         ,{name: '天津', value: 122, UserCount: 54}
  40.         ,{name: '西藏', value: 4, UserCount: 234}
  41.         ,{name: '新疆', value: 16, UserCount: 111}
  42.         ,{name: '云南', value: 36, UserCount: 34}
  43.         ,{name: '浙江', value: 296, UserCount: 34}
  44.         ,{name: '重庆', value: 45, UserCount: 62}
  45.         ,{name: '香港', value: 73, UserCount: 34}
  46.         ,{name: '澳门', value: 85, UserCount: 234}
  47.         ,{name: '台湾', value: 23, UserCount: 250}
  48.         ]
  49.         setTimeout(()=>{
  50.           this.getPushedMap(dataList, 'china')
  51.         },1000)
  52.       },
  53.       // 模拟安徽，
  54.       provinceMap(names){
  55.         // 请求方法拿到安徽省的数据后
  56.         var dataList = [{ name: "黄山市", value: 896, UserCount: "10.92" },
  57.           { name: "宣城市", value: 1520, UserCount: "10.51" },
  58.           { name: "滁州市", value: 779, UserCount: "9.50" },
  59.           { name: "六安市", value: 88, UserCount: "8.96" },
  60.           { name: "池州市", value: 631, UserCount: "7.69" },
  61.           { name: "合肥市", value: 617, UserCount: "7.52" },
  62.           { name: "阜阳市", value: 10, UserCount: "6.52" },
  63.           { name: "芜湖市", value: 100, UserCount: "5.91" },
  64.           { name: "马鞍山市", value: 480, UserCount: "5.85" },
  65.           { name: "安庆市", value: 464, UserCount: "5.66" },
  66.           { name: "蚌埠市", value: 429, UserCount: "5.23" },
  67.           { name: "亳州市", value: 3277, UserCount: "4.60" },
  68.           { name: "铜陵市", value: 555, UserCount: "3.51" },
  69.           { name: "淮南市", value: 243, UserCount: "2.96" },
  70.           { name: "淮北市", value: 999, UserCount: "2.85" },
  71.           { name: "宿州市", value: 1461, UserCount: "1.78" }]
  72.           setTimeout(()=>{
  73.               this.getPushedMap(dataList, names)
  74.         },1000)
  75.       },
  76. getPushedMap(dataList, names) {
  77.         var myChart = echarts.init(document.querySelector(".map"));
  78.         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'];
  79.         var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
  80.         option = {
  81.             tooltip: {
  82.                     //自定义tooltip数据
  83.                     formatter(params) {
  84.                       if(params.name == '南海诸岛') {
  85.                         return;
  86.                       }
  87.                       return `
  88.                       ${params.data.name}</br>
  89.                       学校数量：${params.data.value}</br>
  90.                       用户数量：${params.data.UserCount}
  91.                       `;
  92.                     },
  93.                 },
  94.             visualMap: {
  95.                 min: 0,
  96.                 max: 100,
  97.                 left: 'left',
  98.                 top: 'bottom',
  99.                 text: ['高','低'],//取值范围的文字
  100.                 
  101.                 textStyle: {
  102.                   color: '#ffffff',
  103.                 },
  104.                 inRange: {
  105.                     color: ['#e0ffff', '#006edd']//取值范围的颜色
  106.                 },
  107.                 show:true//图注
  108.             },
  109.             geo: {
  110.                 map: names,
  111.                 roam: false,//不开启缩放和平移
  112.                 zoom:1.23,//视角缩放比例
  113.                 label: {
  114.                     normal: {
  115.                         show: true,
  116.                         fontSize:'10',
  117.                         color: 'rgba(0,0,0,0.7)'
  118.                     }
  119.                 },
  120.                 itemStyle: {
  121.                     normal:{
  122.                         borderColor: 'rgba(0, 0, 0, 0.2)'
  123.                     },
  124.                     emphasis:{
  125.                         areaColor: '#F3B329',//鼠标选择区域颜色
  126.                         shadowOffsetX: 0,
  127.                         shadowOffsetY: 0,
  128.                         shadowBlur: 20,
  129.                         borderWidth: 0,
  130.                         shadowColor: 'rgba(0, 0, 0, 0.5)'
  131.                     }
  132.                 }
  133.             },
  134.             series : [
  135.                 {
  136.                     name: '学校数量',
  137.                     type: 'map',
  138.                     geoIndex: 0,
  139.                     data:dataList
  140.                 }
  141.             ]
  142.         };
  143.         myChart.setOption(option);
  144.         myChart.on('click', function (params) {
  145.             // alert(params.name);
  146.           //遍历取到provincesText 中的下标  去拿到对应的省js
  147.           for(var  i= 0 ; i < provincesText.length ; i++ ){
  148.             if(params.name == provincesText[i]){
  149.               //显示对应省份的方法
  150.               showProvince(provinces[i],provincesText[i])
  151.               break ;
  152.             }
  153.           }
  154.         });
  155.         function showProvince(pName, Chinese_){
  156.           //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
  157.           loadBdScript('$'+pName+'JS','js/province/'+pName+'.js',function(){
  158.               //初始化echarts:具体代码参考上面初始化中国地图即可，这里不再重复。
  159.               console.log(app)
  160.               app.isback = true
  161.               myChart.dispose()
  162.               app.provinceMap(Chinese_);
  163.           });
  164.         }
  165.  
  166.         //加载对应的JS
  167.         function loadBdScript(scriptId, url, callback) {
  168.           var script = document.createElement("script")
  169.           script.type = "text/javascript";
  170.           if (script.readyState){  //IE
  171.               script.onreadystatechange = function(){
  172.                 if (script.readyState == "loaded" || script.readyState == "complete"){
  173.                   script.onreadystatechange = null;
  174.                   callback();
  175.                 }
  176.               };
  177.           } else {  //Others
  178.             script.onload = function(){
  179.               callback();
  180.             };
  181.           }
  182.           script.src = url;
  183.           script.id = scriptId;
  184.           document.getElementsByTagName("head")[0].appendChild(script);
  185.         };
  186.  
  187.       },
  188.     }

暂时没找到更好的方法，用这种方法也能实现，并且不用一次加载所有省份js。

省份js地址（网上找的）：

保存在本地，需要时加载使用即可。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发