master

分支 (1)

管理

管理

master

Echarts-Map-Icon
/
county.html

<!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>
    <link rel="stylesheet" href="./css/base.css">
</head>

<body>
    <section class="map-box">
        <div id="map-box" style="width:1440px; height:916px"></div>
    </section>
    <nav class="nav-box">
        <a href="/Echarts-Map-Icon/index.html">中国</a>
        <a href="/Echarts-Map-Icon/province.html">省份</a>
        <a href="/Echarts-Map-Icon/city.html">城市</a>
        <a href="/Echarts-Map-Icon/county.html">区县</a>
    </nav>

    <script src="./js/echarts.min.js"></script>
    <script src="./js/xishui2.min.js"></script>
    <script>

        //自动切换定时器， 自动切换项
        let timer = null, nows = -1;

        //初始Echarts实例对象
        const oMap = echarts.init(document.querySelector('#map-box'));

        //指定加载省、市、县、区（注：由于这里没有用模块化方式导入，所以把xishui.json文件改为xishui.js文件，并在里面用一个xishui常量来引入的）
        echarts.registerMap('xishui', xishui);

        //如果当前支持模块化导入方式的话可以直接导入xxxx.json文件，就不用向上面改成js文件后用常量来引入
        //echarts.registerMap('xishui', require('./js/xishui.json'));

        //图片相关配置信息
        oMap.setOption({
            //标题文本配置
            title: {
                text: '中国 贵州省 遵义市 习水县 地理图形',
                left: 'center',
                textStyle: {
                    color: 'white',
                    fontStyle: 'normal',
                    fontWeight: 'bold',
                    fontSize: 36,
                    lineHeight: 86,
                    textBorderColor: 'green',
                    textBorderWidth: 1,
                    textShadowColor: 'white',
                    textShadowBlur: 20,
                    textShadowOffsetX: 2,
                    textShadowOffsetY: 2
                }
            },

            //提示框组件(可以设置在多种地方)
            tooltip: {
                show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
                trigger: 'item', //触发类型。item,axis,none
                enterable: true,//鼠标是否可进入提示框浮层中，默认为false，
                showContent: true,          //是否显示提示框浮层
                triggerOn: 'mousemove',//提示框触发的条件(mousemove|click|none)
                showDelay: 0,               //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
                textStyle: {
                    color: 'white',
                    fontSize: 12
                },
                padding: [0, 8],
                hideDelay: 10,             //浮层隐藏的延迟
                formatter: (o) => (o.data) ? `<section class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}</h3></div><i></i></section>` : '',
                // backgroundColor: 'green',  //提示框浮层的背景颜色。
                // borderColor: "white",  //图形的描边颜色
                // borderWidth: 2,
                alwaysShowContent: true,
                transitionDuration: 1,      //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
            },

            //地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
            geo: {
                show: true,
                map: 'xishui',
                roam: false,
                top: 90,
                left: 306,
                zoom: 1.02,
                aspectScale: 0.9,
                itemStyle: {
                    normal: {
                        opacity: 1,              //图形透明度 0 - 1
                        borderColor: "yellow",  //图形的描边颜色
                        borderWidth: 2,          //描边线宽。为 0 时无描边。
                        borderType: 'solid',     //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                        areaColor: "yellow",   //图形的颜色 #eee
                    }
                }
            },

            //系列列表。每个系列通过 type(map, scatter, bar, line, gauge, tree.....) 决定自己的图表类型
            series: [{
                name: '贵州省遵义市习水县',
                map: 'xishui',
                type: "scatter",
                coordinateSystem: "geo",
                symbolSize: 0,
                silent: 'none',
                data: []
            },
            {
                map: 'xishui',
                type: "map",
                zoom: 1,                //当前视角的缩放比例。
                aspectScale: 0.9,       //这个参数用于 scale 地图的长宽比。geoBoundingRect.width / geoBoundingRect.height * aspectScale
                roam: false,            //是否开启鼠标缩放和平移漫游。默认不开启
                label: {
                    show: false,
                    textStyle: {
                        color: "white",
                        fontSize: 12,
                        backgroundColor: ''  //文字背景色
                    }
                },

                itemStyle: {
                    normal: {
                        borderColor: "#00ff00",     //图形的描边颜色
                        borderWidth: 2,             //描边线宽。为 0 时无描边。
                        borderType: 'solid',        //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                        areaColor: "rgba(0, 186, 0, 0.8)",   //图形的颜色 #eee
                        shadowBlur: 100,            //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                        shadowColor: '#002900',     //阴影色
                        shadowOffsetX: 20,          //X轴阴影
                        shadowOffsetY: -20,         //Y轴阴影

                        label: {
                            show: true,
                            textStyle: {
                                color: "white",
                                fontSize: 14
                            }
                        }
                    },
                    //鼠标移入时
                    emphasis: {
                        borderColor: "#005b89",
                        borderWidth: "1",
                        areaColor: "yellow",
                        label: {
                            show: false,
                            textStyle: {
                                color: "purple",
                                fontSize: 14
                            }
                        }
                    },

                    effect: {
                        show: true,
                        shadowBlur: 10,
                        loop: true
                    },
                },

                //自定义图片数组对象[{}, {}...]
            }]
        });


    </script>
</body>

</html>