早睡早起,方能养生
Sleep early rise early, way to keep healthy

echarts河南省地图json文字居中,鼠标悬浮显示

super
2023-12-05 15:28
views 1157

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="map" style="width: 100%;height: 500px">

</div>

<script src="jquery.min.js"></script>
<script src="echarts5.4.1.min.js"></script>
<script>

    var mapOption = {
        tooltip: {
            show: true  //鼠标经过提示

        },
        visualMap: {
            show: false,
            min:10,
            max: 50, //控制根据返回值  控制数量
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['#0062cd', '#093EE5', '#0B33A9']  //显示颜色
            }
        },
        bmap: {},
        series: [{
            name: '数量',
            layoutCenter: ['50%', '50%'],
            layoutSize: '80%',
            aspectScale: 1,
            type: 'map',
            mapType: 'henan', // 自定义扩展图表类型
            zoom: 1.4,
            label: {
                show: true,
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'normal',
                        color: '#fff',
                        fontFamily: 'Microsoft YaHei',
                    }
                },
                emphasis: {
                    show: true,
                    color: '#fff',
                },
            },

            itemStyle: {
                normal: {
                    areaColor: "#0062CD", //改变地图里面的颜色
                    borderColor: '#91CCF0',//边框颜色
                    borderWidth: 1.5,//边框宽度
                    shadowColor: '#093493',
                    shadowBlur: 2,
                    opacity: 1,
                    label: {
                        show: true,
                    }
                },
            },

            data: [{
                name: '郑州',
                value: 150,
            }, {
                name: '洛阳',
                value: 117
            }, {
                name: '开封',
                value: 53
            }, {
                name: '信阳',
                value: 123
            }, {
                name: '驻马店',
                value: 135
            }, {
                name: '南阳',
                value: 128
            }, {
                name: '周口',
                value: 151
            }, {
                name: '许昌',
                value: 17
            }, {
                name: '平顶山',
                value: 33
            }, {
                name: '新乡',
                value: 0
            }, {
                name: '漯河',
                value: 63
            }, {
                name: '商丘',
                value: 21
            }, {
                name: '三门峡',
                value: 22
            }, {
                name: '济源',
                value: 49
            }, {
                name: '焦作',
                value: 27
            }, {
                name: '安阳',
                value: 2
            }, {
                name: '鹤壁',
                value: 0
            }, {
                name: '濮阳',
                value: 35
            }, {
                name: '开封',
                value: 53
            }],
        },
            // {
            //     name: 'Top 5',
            //     type: 'effectScatter',
            //     coordinateSystem: 'bmap',
            //     data: convertData(data.sort(function(a, b) {
            //         return b.value - a.value;
            //     }).slice(0, 6)),
            //     data: pointData,
            //     symbolSize: function(val) {
            //         return val[2] / 10;
            //     },
            //     showEffectOn: 'emphasis',
            //     rippleEffect: {
            //         brushType: 'stroke'
            //     },
            //     hoverAnimation: true,
            //     label: {
            //         formatter: '{b}',
            //         position: 'right',
            //         show: true
            //     },
            //     itemStyle: {
            //         color: '#f4e925',
            //         shadowBlur: 10,
            //         shadowColor: 'red'
            //     },
            //     zlevel: 1
            // },
        ],
    };
    $.getJSON('./henan.json', function(csJson) { //引入你需要绘画的地图json表
        echarts.registerMap('henan', csJson);
        var myEcharts = echarts.init(document.getElementById("map"))
        myEcharts.setOption(mapOption)
    });

</script>
</body>
</html>

 

 

需要json文件,联系微信 feimao7210, 5元/份,另有各省json数据,欢迎咨询



分享
0 条讨论
top