JS 第三方工具封装经典案例(中国地图)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
    <script type="text/javascript" src="./js/echarts-gl.min.js"></script>
    <script type="text/javascript" src="./js/china.js"></script>
    <script type="text/javascript" src="./js/test.js"></script>
    <style>
        #china-map {
          width: 900px;
          height: 600px;
          margin: auto;
        }
        #box{
            display:none;
            background-color: goldenrod;
            width: 180px;
            height: 30px;
        }
        #box-title{
            display:block;
        }
      </style>
</head>
<body>
    <div id="china-map"></div>
    <script>
        var myChart = echarts.init(document.getElementById('china-map'));
        var loadedProvince =[];
        function initEcharts(pname,data){
            myChart.setOption({
            title:{
                text:'中国地图',
                left:'center'
            },
            tooltip:{
                trigger:'item',
                formatter:'{b} 
{c} '
}, series: [{ type: 'map3D', map: pname, data:data, selectedMode : 'single', //multiple zoom:1.2, label: { show: true,//显示省份标签 color:'#fbfdfe', //省份标签字体颜色 textStyle:{ fontSize:'12' } }, itemStyle:{ color:'#B1D0EC', //图形的颜色 borderColor:'#dadfde', //边线的颜色 borderWidth:1 }, emphasis: {//对应的鼠标悬浮效果 borderWidth: 2, borderColor: '#4b0082', areaColor:"#ece39e", } }] }); myChart.off('click'); //如果是中国地图, 进入到省的地图 if(pname=='china') { myChart.on('click',function(param){ console.log(param.name); if(!param.name) { return; } // var provinceName = seriesData.filter(function(option,index){ // return option.name == param.name // })[0].alias; var provinceName = param.data.alias; loadRelativeProvince(provinceName,function(data){ //渲染省地图 initEcharts(param.name,seriesHebeiData); }); }) } else { myChart.on('click',function(param){ initEcharts('china',seriesData); }) } } initEcharts('china',seriesData); function loadRelativeProvince(provinceVal,callback){ //思路一: 找到所有的script的src,去判断是否已经加载过 //思路二: 加一个全部局变量,每加载一个省的js,线判断是否在这个全局变量里, //在就停止加载,不在就继续后面的加载,并把加载的省追加到这个全局变量对象里 if(loadedProvince.indexOf(provinceVal)!=-1) { callback && callback(provinceVal); return; } //怎么加载js文件 var script = document.createElement('script'); script.type='text/javascript'; script.src = './js/province/'+provinceVal+'.js'; if(script.readyState){ //ie10以下有用,包括IE0 script.onreadystatechange = function(){ if (script.readyState === "loaded" || script.readyState === "complete") { script.onreadystatechange = null; loadedProvince.push(provinceVal); callback && callback(provinceVal); } } } else{ script.onload = function(){ loadedProvince.push(provinceVal); callback && callback(provinceVal); } } document.getElementsByTagName('head')[0].appendChild(script); } </script> </body> </html>

你可能感兴趣的:(前端)