echart 地图

来源：互联网发布：2017淘宝复核认证规则编辑：程序博客网时间：2024/05/27 10:43

        /**         * @description 渲染地图         * @chart {object} 地图json数据         */        window.updateMapChart = function(chart) {        if(typeof mapChart !='undefined'){        mapChart.dispose();        }        if(chart.areaStyle){        $("#mapResult").find(".c1").remove();        $("#mapResult").append("<div class='c1' style='position: relative'><div id='map-chart' style='position: absolute'></div></div>");                $("#"+mapchartId).css(eval('('+chart.areaStyle+')'));        $("#"+mapchartId).parent().css({position:'relative'})        }else{        $("#mapResult").find(".c1").remove();        $("#mapResult").append("<div class='c1' id='map-chart'></div>");        }        mapChart = window.echarts.init(document.getElementById(mapchartId));        if(chart.mapType=="MAP_CONTRY_AREA"){//出全国地图            cityJson = {};        renderAllContryAreaMap(chart);        }else if(chart.mapType=="MAP_CONTRY_CITY"){//出全国城市地图        renderAllContryCityMap(chart);        }else if(chart.mapType=="MAP_AREA"){//出大区地图            cityJson = {};        renderAreaMap(chart);        }        };

     /**         * @description 渲染全国大区地图         * @json {object} 图标数据         */        window.renderAllContryAreaMap = function(json) {        option = {            tooltip : {                trigger: 'item'            },    series : []};//alert(JSON.stringify(json.bigAreaList));for(var i=0;i<json.bigAreaList.length;i++){var sery = json.bigAreaList[i];var data = [];for(var j=0;j<sery.data.length;j++){var d = {};var itemStyle={normal: {                    borderColor:'#'+sery.color,                    color: '#'+sery.color,                    label: {                        show: true,                        formatter :sery.data[j].itemStyle.normal.label.formatter,                        textStyle:{color:'#000000',fontFamily:'微软雅黑'}                    }                },                emphasis:{label:{show:true},color: '#dbbf8e'}   };d.name=sery.data[j].name;if(sery.data[j].value){d.value=sery.data[j].value;}d.itemStyle = itemStyle;d.tooltip = {                trigger: 'item',                formatter: sery.name+'<br/>'+sery.tooltip             }; data.push(d);} option.series.push({            name: sery.name,            type: 'map',            mapType: 'china',            selectedMode : 'single',            itemStyle:{                normal:{label:{show:false}},                emphasis:{label:{show:true},color: '#dbbf8e'}            },            data:data});};var seriesObj = {            name: '隐藏南海诸岛',            type: 'map',            mapType: 'china',                      hoverable: false,            itemStyle:{                normal:{                color: '#ffffff',                borderColor:'#ffffff',                label: {                        show: false,                        textStyle:{color:'#000000',fontFamily:'微软雅黑'}                    }                },                emphasis:{label:{show:true}}            },            data:[                {name: '南海诸岛',value: Math.round(Math.random()*1000)}            ]        }        option.series.push(seriesObj);                var seriesObj = {            name: '台湾',            type: 'map',            mapType: 'china',                      hoverable: false,itemStyle:{    normal:{        color: '#cdecff',        borderColor:'#cdecff',        label: {            show: false,            textStyle:{color:'#000000',fontFamily:'微软雅黑'}            }     },     emphasis:{label:{show:false}}},            data:[                {name: '台湾',tooltip: {                        show:false,                trigger: 'item'             }}            ]        }        option.series.push(seriesObj);        mapChart.clear();     mapChart.setOption(option);               //注册点击事件     mapChart.on(window.echarts.config.EVENT.MAP_SELECTED, function(param){   var selected = param.selected;   //console.log(selected);   var name;   for(var i in selected){   if(selected[i]){   name=i;   }   }   if($.trim(name)=='台湾' || $.trim(name)=='南海诸岛'){   return;   }   $("#provinceName").val(selected.name);   out:for(var i=0;i<json.bigAreaList.length;i++){var sery = json.bigAreaList[i];for(var j=0;j<sery.data.length;j++){var ce = sery.data[j];if(ce.name==name){$("#areaId").val(sery.id);$("#areaName").val(sery.name);break out;}}   }   mapDrill(0,$("#areaId").val(),$("#areaName").val());});        }

     /**         * @description 渲染全国大区地图         * @json {object} 图标数据         */        window.renderAllContryAreaMap = function(json) {        option = {            tooltip : {                trigger: 'item'            },    series : []};//alert(JSON.stringify(json.bigAreaList));for(var i=0;i<json.bigAreaList.length;i++){var sery = json.bigAreaList[i];var data = [];for(var j=0;j<sery.data.length;j++){var d = {};var itemStyle={normal: {                    borderColor:'#'+sery.color,                    color: '#'+sery.color,                    label: {                        show: true,                        formatter :sery.data[j].itemStyle.normal.label.formatter,                        textStyle:{color:'#000000',fontFamily:'微软雅黑'}                    }                },                emphasis:{label:{show:true},color: '#dbbf8e'}   };d.name=sery.data[j].name;if(sery.data[j].value){d.value=sery.data[j].value;}d.itemStyle = itemStyle;d.tooltip = {                trigger: 'item',                formatter: sery.name+'<br/>'+sery.tooltip             }; data.push(d);} option.series.push({            name: sery.name,            type: 'map',            mapType: 'china',            selectedMode : 'single',            itemStyle:{                normal:{label:{show:false}},                emphasis:{label:{show:true},color: '#dbbf8e'}            },            data:data});};var seriesObj = {            name: '隐藏南海诸岛',            type: 'map',            mapType: 'china',                      hoverable: false,            itemStyle:{                normal:{                color: '#ffffff',                borderColor:'#ffffff',                label: {                        show: false,                        textStyle:{color:'#000000',fontFamily:'微软雅黑'}                    }                },                emphasis:{label:{show:true}}            },            data:[                {name: '南海诸岛',value: Math.round(Math.random()*1000)}            ]        }        option.series.push(seriesObj);                var seriesObj = {            name: '台湾',            type: 'map',            mapType: 'china',                      hoverable: false,itemStyle:{    normal:{        color: '#cdecff',        borderColor:'#cdecff',        label: {            show: false,            textStyle:{color:'#000000',fontFamily:'微软雅黑'}            }     },     emphasis:{label:{show:false}}},            data:[                {name: '台湾',tooltip: {                        show:false,                trigger: 'item'             }}            ]        }        option.series.push(seriesObj);        mapChart.clear();     mapChart.setOption(option);               //注册点击事件     mapChart.on(window.echarts.config.EVENT.MAP_SELECTED, function(param){   var selected = param.selected;   //console.log(selected);   var name;   for(var i in selected){   if(selected[i]){   name=i;   }   }   if($.trim(name)=='台湾' || $.trim(name)=='南海诸岛'){   return;   }   $("#provinceName").val(selected.name);   out:for(var i=0;i<json.bigAreaList.length;i++){var sery = json.bigAreaList[i];for(var j=0;j<sery.data.length;j++){var ce = sery.data[j];if(ce.name==name){$("#areaId").val(sery.id);$("#areaName").val(sery.name);break out;}}   }   mapDrill(0,$("#areaId").val(),$("#areaName").val());});        }                /**         * @description 渲染全国城市地图         * @json {object} 图标数据         */        window.renderAllContryCityMap= function(json) {            cityJson = {};            cityJson = json;        };                        controller.drawOtherCity=function(data){           //console.log("json=="+JSON.stringify(json));           if(cityJson){           var markPointData = [],selectedData=[];        var beginIdx=0,endIdx=10;        if(data){            beginIdx=data.beginIdx;            endIdx=data.endIdx;        }for(var i=beginIdx;i<endIdx && i<cityJson.bigAreaList.length;i++){var sery = cityJson.bigAreaList[i];markPointData.push({name:sery.name,value:'',tooltip:{trigger: 'item',formatter: sery.name+'<br/>'+sery.tooltip}});if(sery.my){selectedData.push({name:sery.name,value:sery.name,tooltip:{trigger: 'item',formatter: sery.name+'<br/>'+sery.tooltip}            });}}//console.log("markPointData="+JSON.stringify(markPointData));        option = {            tooltip : {                trigger: 'item'            },    series : [{            name: '销量',            type: 'map',            mapType: 'china',            hoverable: false,            itemStyle:{                normal:{                color: '#'+cityJson.color,                label: {                        show: false,                        textStyle:{color:'#000000',fontFamily:'微软雅黑',fontSize:10}                    }                },                emphasis:{label:{show:true}}            },            data:[],            markPoint : {                symbolSize: 5,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2                itemStyle: {                    normal: {                        color:'lightgreen',                        borderColor: '#87cefa',                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1                        label: {                            show: true,                            formatter:function(v1,v2,v3) {return "\r\n\r\n"+v2;},                            textStyle:{color:"#000000",fontFamily:'微软雅黑',fontSize:10}                        }                    },                    emphasis: {                        borderColor: '#1e90ff',                        borderWidth: 5,                        label: {                            show: false                        }                    }                },                data : markPointData            },           geoCoord: cityJson.geoCoord       }    ]};if(selectedData.length >0){option.series.push({            name: 'selectedCity',            type: 'map',            mapType: 'china',            hoverable: false,            data:[],            markPoint : {                symbolSize: 5,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2                itemStyle: {                    normal: {                        color:'lightgreen',                        borderColor: '#1e90ff',                        borderWidth: 5,                        label: {                            show: true,                            formatter:function(v1,v2,v3) {return "\r\n\r\n"+v2;},                            textStyle:{color:"#000000",fontFamily:'微软雅黑',fontSize:10}                        }                    }                },                data : selectedData            }       })}var seriesObj = {            name: '隐藏南海诸岛',            type: 'map',            mapType: 'china',                      hoverable: false,            itemStyle:{                normal:{                color: '#ffffff',                borderColor:'#ffffff',                label: {                        show: false,                        textStyle:{color:'#000000',fontFamily:'微软雅黑'}                    }                },                emphasis:{label:{show:true}}            },            data:[                {name: '南海诸岛',value: Math.round(Math.random()*1000)}            ]        }        option.series.push(seriesObj);mapChart.clear();     mapChart.setOption(option);          //注册点击事件     mapChart.on(window.echarts.config.EVENT.CLICK, function(param){   //console.log(param.name);   if(param.name){   for(var i=0;i<cityJson.bigAreaList.length;i++){var sery = cityJson.bigAreaList[i];if(sery.name==param.name){$("#cityId").val(sery.id);$("#cityName").val(sery.name);mapDrill(2,$("#cityId").val(),$("#cityName").val());break;}   }   }});           }        }

        /**         * @description 渲染大区地图         * @json {object} 图标数据         */        window.renderAreaMap= function(json) {        var markPointData = [],seriesData=[],selectedData=[];for(var i=0;i<json.bigAreaList.length;i++){var sery = json.bigAreaList[i];if(sery.my){markPointData.push({name:sery.name,tooltip:{trigger: 'item',formatter: sery.name+'<br/>'+sery.tooltip},itemStyle: {                    normal: {                        color:'lightgreen',                        borderColor: '#1e90ff',                        borderWidth: 5,                        label: {                                                    show: false                        }                    }                }  });}else{markPointData.push({name:sery.name,tooltip:{trigger: 'item',formatter: sery.name+'<br/>'+sery.tooltip}});}}for(var i=0;i<json.provinceList.length;i++){var sery = json.provinceList[i];seriesData.push({name:sery.name,itemStyle:{normal:{color:'#'+json.color,borderColor:'#'+json.color,label:{show:true,formatter :sery.itemStyle.normal.label.formatter}}}});}//console.log("markPointData="+JSON.stringify(markPointData));        option = {            tooltip : {                trigger: 'item'            },    series : [{            name: '销量',            type: 'map',            mapType: 'china',            hoverable: false,            itemStyle:{                normal:{                color: '#ffffff',                borderColor:'#ffffff',                label: {                        show: false,                        textStyle:{color:'#000000',fontFamily:'微软雅黑'}                    }                },                emphasis:{label:{show:true}}            },            data:seriesData,            markPoint : {                symbolSize: 5,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2                itemStyle: {                    normal: {                        color:'lightgreen',                        borderColor: '#87cefa',                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1                        label: {                            show: false                        }                    },                    emphasis: {                        borderColor: '#1e90ff',                        borderWidth: 5,                        label: {                            show: false                        }                    }                },                data : markPointData            },            geoCoord: json.geoCoord        }    ]};mapChart.clear();     mapChart.setOption(option);     //console.log("option="+JSON.stringify(option));          //注册点击事件     mapChart.on(window.echarts.config.EVENT.CLICK, function(param){   if(param.name){   for(var i=0;i<json.bigAreaList.length;i++){var sery = json.bigAreaList[i];if(sery.name==param.name){console.log("sery.id="+sery.id);console.log("sery.name="+sery.name);$("#cityId").val(sery.id);$("#cityName").val(sery.name);mapDrill(2,$("#cityId").val(),$("#cityName").val());break;}   }   }});        };

0 0