echarts全省地圖下鑽方法__函數

來源:互聯網
上載者:User
因項目需求,使用echarts控制項完成山東省地圖下鑽功能,現在把方法貼一下;
    //隨機產生各省市的資料    function randomData() {    return Math.round(Math.random()*50);}//地圖下鑽 使用switch 轉換地圖json檔案var mapChange=function(city){    var maps='shanDong';    switch(city){    case '濟南市': maps='jinan';break;    case '德州市': maps='dezhou';break;    case '泰安市': maps='taian';break;    case '煙台市': maps='yantai';break;    case '淄博市': maps='zibo';break;    case '萊蕪市': maps='laiwu';break;    case '日照市': maps='rizhao';break;    case '濟寧市': maps='jining';break;    case '菏澤市': maps='heze';break;    case '威海市': maps='weihai';break;    case '棗莊市': maps='zaozhuang';break;    case '臨沂市': maps='linyi';break;    case '濱州市': maps='binzhou';break;    case '東營市': maps='dongying';break;    case '濰坊市': maps='weifang';break;    case '聊城市': maps='liaocheng';break;    case '青島市': maps='qingdao';break;    }    return maps;};//各市區下級縣區方法var cityMapsShow=function(city){    var chart = echarts.init(document.getElementById('cityMaps'));       chart.showLoading();    $.get('js/echarts/map/'+city+'.json', function (chinaJson) {        echarts.registerMap('cityMap', chinaJson);        chart.hideLoading();        chart.setOption({             title : {                    text: '山東地圖',                    subtext: '充電樁調度',                    left: 'left',                    textStyle:{                        color:'#fff',                        fontStyle:'normal',                        fontWeight:'normal',                        fontFamily:'宋體',                        fontSize:22                    },                    subtextStyle:{                        color:'white',                        fontStyle:'normal',                        fontWeight:'normal',                        fontFamily:'宋體',                        fontSize:16                    }                },                visualMap: {                    min: 0,                    max: 200,                    left: '3%',                    top: 'bottom',                    text:['高','低'],           // 文本,預設為數值文本                    calculable : true,                    textStyle:{                        color:'white'                    }                },                tooltip : {                    trigger: 'item'                },                  legend: {                orient: 'vertical',                left: 'right',                top:'bottom',                data:['充電中','待機中','異常狀態'],                    textStyle:{                        color:'#fff'                    }            },            silent:false,                   series: [               {                name:'充電中',                type: 'map',                map: 'cityMap',                roam:true,                scaleLimit:{                    min:1.2,                    max:4                },                showLengendSymbol:true,                label: {                    normal: {                        show: true,                        textStyle:{                            color:'blue',                                                   }                    },                    emphasis: {                        show: true,                        textStyle:{                        }                    }                },            },            ]        });        chart.on("dblclick",function(params){            var city=params.name;            mapChange(city);            document.getElementById('province').style.display='none';            document.getElementById('cityMaps').style.display='block';        });    }); };//返回山東省全省地圖var provinceMaps=function(){     var chart = echarts.init(document.getElementById('province'));       chart.showLoading();    $.get('js/echarts/map/shanDong.json', function (chinaJson) {        echarts.registerMap('shanDong', chinaJson);        chart.hideLoading();        chart.setOption({             title : {                    text: '山東地圖',                    subtext: '充電樁調度',                    left: 'left',                    textStyle:{                        color:'#fff',                        fontStyle:'normal',                        fontWeight:'normal',                        fontFamily:'宋體',                        fontSize:22                    },                    subtextStyle:{                        color:'white',                        fontStyle:'normal',                        fontWeight:'normal',                        fontFamily:'宋體',                        fontSize:16                    }                },                visualMap: {                    min: 0,                    max: 200,                    left: '3%',                    top: 'bottom',                    text:['高','低'],           // 文本,預設為數值文本                    calculable : true,                    textStyle:{                        color:'white'                    }                },                tooltip : {                    trigger: 'item'                },                  legend: {                orient: 'vertical',                left: 'right',                top:'bottom',                data:['充電中','待機中','異常狀態'],                    textStyle:{                        color:'#fff'                    }            },            silent:false,                   series: [               {                name:'充電中',                type: 'map',                map: 'shanDong',                roam:true,                scaleLimit:{                    min:1,                    max:4                },                showLengendSymbol:true,                label: {                    normal: {                        show: true,                        textStyle:{                            color:'blue',                                                   }                    },                    emphasis: {                        show: true,                        textStyle:{                        }                    }                },                data:[                      {name:'濟南市',value:randomData()},                      {name:'德州市',value:randomData()},                      {name:'青島市',value:randomData()},                      ],            },            {                name:'待機中',                type: 'map',                map: 'shanDong',                roam:true,                scaleLimit:{                    min:1,                    max:4                },                showLengendSymbol:true,                label: {                    normal: {                        show: true,                        textStyle:{                            color:'blue',                                                   }                    },                    emphasis: {                        show: true,                        textStyle:{                        }                    }                },                data:[                      {name:'濟南市',value:randomData()},                      {name:'德州市',value:randomData()},                      {name:'青島市',value:randomData()},                      ],            },            {                name:'異常狀態',                type: 'map',                map: 'shanDong',                roam:true,                scaleLimit:{                    min:1,                    max:4                },                showLengendSymbol:true,                label: {                    normal: {                        show: true,                        textStyle:{                            color:'blue',                                                   }                    },                    emphasis: {                        show: true,                        textStyle:{                        }                    }                },                data:[                      {name:'濟南市',value:randomData()},                      {name:'德州市',value:randomData()},                      {name:'青島市',value:randomData()},                      ],            },             ]        });        chart.on("click",function(params){            var city=params.name;               var city1=mapChange(city);            document.getElementById('province').style.display='none';            document.getElementById('cityMaps').style.display='block';            cityMapsShow(city1);        });    }); };

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.