onlybabyou opened a new issue #8297: 在地图上添加了点击事件,跳转到省份后加载省级地图 
visualMap中的pieces由3级减少到2级,但是我希望它不要减少
URL: https://github.com/apache/incubator-echarts/issues/8297
 
 
   <script type="text/javascript">
           var mapStack = [];
           var curMap = {};
           $(function () {
   
               var provinces = {
                   //23个省
                   "台湾": "taiwan",
                   "河北": "hebei",
                   "山西": "shanxi",
                   "辽宁": "liaoning",
                   "吉林": "jilin",
                   "黑龙江": "heilongjiang",
                   "江苏": "jiangsu",
                   "浙江": "zhejiang",
                   "安徽": "anhui",
                   "福建": "fujian",
                   "江西": "jiangxi",
                   "山东": "shandong",
                   "河南": "henan",
                   "湖北": "hubei",
                   "湖南": "hunan",
                   "广东": "guangdong",
                   "海南": "hainan",
                   "四川": "sichuan",
                   "贵州": "guizhou",
                   "云南": "yunnan",
                   "陕西": "shanxi1",
                   "甘肃": "gansu",
                   "青海": "qinghai",
                   //5个自治区
                   "新疆": "xinjiang",
                   "广西": "guangxi",
                   "内蒙古": "neimenggu",
                   "宁夏": "ningxia",
                   "西藏": "xizang",
                   //4个直辖市
                   "北京": "beijing",
                   "天津": "tianjin",
                   "上海": "shanghai",
                   "重庆": "chongqing",
                   //2个特别行政区
                   "香港": "xianggang",
                   "澳门": "aomen",
                   "china": "china"
               };
               var geoCoordMap = {
                   "海南": [110.17, 19.92],
                   "河南": [113.700339, 34.751827],
                   "河北": [114.54095, 38.058913],
                   "湖北": [114.289984, 30.5942],
                   "广东": [113.293215, 23.102603],
                   "湖南": [113.03042, 28.188898],
                   "江西": [115.911671, 28.658012],
                   "黑龙江": [126.629804, 45.774197],
                   "四川": [104.112035, 30.630737],
                   "安徽": [117.321109, 31.850184],
               }
               var data = [{
                   name: '海南',
                   value: 925.73,
                   tooltip: { //单独为海南提示框设置内容
                       //   formatter:'pp'
                   },
                   alarm_num: 54
               }, {
                   name: '河南',
                   value: 737.01,
                   alarm_num: 51
               }, {
                   name: '河北',
                   value: 177.64
               }, {
                   name: '湖北',
                   value: 174.96,
                   alarm_num: 4
               }, {
                   name: '广东',
                   value: 230.15
               }, {
                   name: '湖南',
                   value: 173.05
               }, {
                   name: '江西',
                   value: 723.08,
                   alarm_num: 22
               }, {
                   name: '黑龙江',
                   value: 629.69
               }, {
                   name: '四川',
                   value: 158.43,
                   alarm_num: 1
               }, {
                   name: '安徽',
                   value: 930.80
               },];
   
               var oils = [{
                   name: '四川',
                   oil95: '75L',
                   oil93: '300L',
                   value: 930.80
               }, {
                   name: '新疆',
                   oil95: '165L',
                   oil93: '200L',
                   value: 900.80
               }, {
                   name: '黑龙江',
                   oil95: '3575L',
                   oil93: '800L',
                   value: 130.80
               }, {
                   name: '北京',
                   oil95: '255L',
                   oil93: '1300L',
                   value: 230.80
               }, {
                   name: '天津',
                   oil95: '895L',
                   oil93: '4300L',
                   value: 330.80
               }, {
                   name: '河北',
                   oil95: '85L',
                   oil93: 400,
                   value: 90.80
               }, {
                   name: '辽宁',
                   oil95: '385L',
                   oil93: 800,
                   value: 69.80
               }]
               var exclude = ['山东', '浙江', '福建', '广东'];
   
               function convertData(data) {
                   var res = [];
                   for (var i = 0; i < data.features.length; i++) {
                       var geoCoord = cityMap[data.features[i].properties.name];
                       if (geoCoord) {
                                                if(data.features.length - i > 
0){
                                                        res.push({
                                                                name: 
data.features[i].properties.name,
                                                                value: 
parseInt(Math.random() * 100),
                                                                oil95: 
parseInt(Math.random() * 100),
                                                                oil93: 
parseInt(Math.random() * 100),
                                                                oil98: 
parseInt(Math.random() * 100),
                                                                oil0: 
parseInt(Math.random() * 100)
                                                        });
                                                }
                                                if(data.features.length - i == 
1){
                                                        res.push({
                                                                name: 
data.features[i].properties.name,
                                                                value: 
parseInt(100),
                                                                oil95: 
parseInt(100),
                                                                oil93: 
parseInt(100),
                                                                oil98: 
parseInt(100),
                                                                oil0: 
parseInt(100)
                                                        });     
                                                }
                       }
                   }
                   return res;
               };
   
               var myChart = echarts.init(document.getElementById('main'));
   
               //初始化地图
               loadMap('china', 'china', 1);
                        
               myChart.on('mouseover', function (params) {
                   addpie(params.data)
               });
               myChart.on('mouseout', function (params) {
               });
   
               myChart.on('click', function (params) {
                   var name = params.name;
                   var mapCode = provinces[name];
   
                   var Ocity = undefined;
                   if (!mapCode) {
                       var Ocity = cityMap[name];
                       if (!Ocity) {
                           alert('无此区域地图显示');
                           return;
                       }
                   }
                   var mKey;
                   if (name in provinces) {
                       if (name == 'china') {
                           mKey = 1;
                       } else {
                           mKey = 2;
                       }
                   } else {
                       mKey = 3;
                   }
                   if (Ocity == undefined) {
                                        
//parent.addTab('省损益率综合分析','htmls/detail.html?mapCode='+mapCode+'&name='+name+'&mark='+mKey,'24','15',true);
                       loadMap(mapCode, name, mKey);                            
                   } else {
                                        
//parent.addTab('省损益率综合分析','htmls/detail.html?mapCode='+mapCode+'&name='+name+'&mark='+mKey,'24','15',true);
                       loadMap(Ocity, name, mKey);
                   }
                   //将上一级地图信息压入mapStack
                                if(mKey < 3){
                                        mapStack.push({
                                                mapCode: curMap.mapCode,
                                                mapName: curMap.mapName,
                                                mapMark: curMap.mapMark
                                        });
                                }
               });
   
               myChart.on('contextmenu', function (params) {
                   $('#contextMenu').css({
                       left: params.event.offsetX,
                       top: params.event.offsetY
                   }).show();
               });
   
               $('#contextMenu').on('click', function () {
                   $(this).hide();
                   //获取上一级地图信息
                   var map = mapStack.pop();
                   if (!mapStack.length && !map) {
                       alert('已经到达最上一级地图了');
                       return;
                   }
                   loadMap(map.mapCode, map.mapName, map.mapMark);
   
               });
   
               function loadMap(mapCode, mapName, mark) {
                   var chartsURL;
                   if (mark == 1) {
                       chartsURL = 
"echarts3-chinese-map-drill-down-master/static/map/";
                                        $('#backCountry').hide();
                                        $('#leftMap').show();
                                        $('#country').show();
                                        $('#province').hide();
                                        $('#city').hide();
                   } else if (mark == 2) {
                       chartsURL = 
"echarts3-chinese-map-drill-down-master/static/map/province/";
                                        $('#backCountry').show();
                                        $('#leftMap').show();
                                        $('#province').show();
                                        $('#country').hide();
                                        $('#city').hide();
                                        provinceDataGrid();
                                        container_radar();
                   } else if (mark == 3) {
                       chartsURL = 
"echarts3-chinese-map-drill-down-master/static/map/province/";
                                        $('#backCountry').hide();
                                        $('#city').show();
                                        $('#province').hide();
                                        $('#country').hide();
                                        $('#leftMap').hide();
                                        $('#city').layout({});
                                        yhysDataGrid();
                   }
   
                   $.getJSON(chartsURL + mapCode + '.json', function (datas) {
                       if (datas) {
                           echarts.registerMap(mapName, datas);
                           var option = {
                               tooltip: {
                                   show: false
                               },
                               visualMap: {
                                                                type: 
'piecewise', //分段型。
                                                                splitNumber: 3,
                                                                inverse: true,
                                                                pieces: [{
                                                                        min: 0,
                                                                        max: 60,
                                                                        label: 
'0%-60%',
                                                                        color: 
'#f2d643'
                                                                }, {
                                                                        min: 60,
                                                                        max: 80,
                                                                        label: 
'60%-80%',
                                                                        color: 
'#ffb248'
                                                                }, {
                                                                        min: 80,
                                                                        max: 
100,
                                                                        label: 
'80%-100%',
                                                                        color: 
'#eb8146'
                                                                }],
                                                                left: 'left',
                                                                top: 'bottom',
                                                                textStyle: {
                                                                        color: 
'#000'
                                                                }
                                                        },
                               grid: {
                                   height: 200,
                                   width: 8,
                                   right: 80,
                                   bottom: 10
                               },
                               title: {
                                   text: '验收准确率',
                                   left: 'center'
   
                               },
                               geo: {
                                   show: true,
                                   map: mapName,
                                   roam: true,
                                   center: 0,
                                   label: {
                                       color: '#8B6914',
                                       normal: {
                                           show: true,//初始化时显示省份名称
                                       },
                                       emphasis: {
                                           show: false
                                           //选中省份时显示tooltip数据
                                       }
   
                                   },
                                   itemStyle: {
                                       normal: {
                                           areaColor: '#00CED1',
                                           borderColor: '#3B5077',
                                       },
                                       emphasis: {
                                           areaColor: '#2B91B7',
                                       }
                                   }
                               },
                               series: [{
                                   type: 'map',
                                   map: mapName,
                                   geoIndex: 0,
                                   label: {
                                       normal: {
                                           show: true
                                       },
                                       emphasis: {
                                           show: true,
                                           textStyle: {
                                               color: '#fff'
                                           }
                                       }
                                   },
                                   roam: true,
                                   itemStyle: {
                                       normal: {
                                           areaColor: '#031525',
                                           borderColor: '#3B5077',
                                       },
                                       emphasis: {
                                           areaColor: '#2B91B7'
                                       }
                                   },
                                   animation: false,
                                   data: convertData(datas)
                               }]
                           };
                           myChart.setOption(option);
   
                           //存储当前地图的信息
                           curMap = {
                               mapCode: mapCode,
                               mapName: mapName,
                               mapMark: mark
                           };
   
                       } else {
                           alert('无法加载该地图');
                       }
                   });
   
               }
   
           });
       </script>
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org
For additional commands, e-mail: dev-h...@echarts.apache.org

Reply via email to