JS classic case of third-party tools package (China map)

<!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} <br/>{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>
Cpu run it
He published 191 original articles · won praise 156 · views 10000 +
Private letter concerns
JS classic case of third-party tools package (China map)

Guess you like
