基于echarts画图，实现到乡镇的模块

最新推荐文章于 2024-08-05 05:00:00 发布

离别又见离别

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量1.4k

点赞数 5

分类专栏： echarts地图文章标签： javascript html jquery

本文链接：https://blog.csdn.net/weixin_43861630/article/details/103824265

版权

echarts地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

成品图在下边，看着复杂点，其实很好理解的。“自己动手改改还是好的”

德州大屏展示
链接：https://pan.baidu.com/s/1Y1z74mCMxjFqhUJGVb44Gw 提取码：rqfp
东营大屏
链接：https://pan.baidu.com/s/1Q3lmFT0x0W0fTqoyaTcc0Q 提取码：zbld
3.德州行政边界分享(买的，分享一下)
链接：https://pan.baidu.com/s/1Y-CDNY8eGOwamgSBxZpUrA
提取码：urcg

第一种方法不改chian.js里面的geoJson；

1.先得到区的geoJson

网址:http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
在这里插入图片描述

2.复制到geoJson.io

网址: http://geojson.io/#map=11/37.9579/118.6103
然后利用工具画出相应的乡镇边界线
在这里插入图片描述

3.把得到的代码复制到项目中（自己取名字后缀未json）

在这里插入图片描述
根据自己划分的地图修改json数据，

画了几个乡镇就修改成相应的名字 adcode随便取值(乡镇的可以自己填，不填adcode应该也没关系吧，这个我到没有单独测试)，为方便参考我上传到百度云盘（河口为例），
https://pan.baidu.com/s/1Zj6kY3x0GhuquqfheBH49Q
提取码:26v5

4.修改echarts代码

代码中china.js和shandong.js是一样的只不过是在测试的时候怕改错所以备份了一个，引一个就行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script src="js/jquery.min.js" rel="script"></script>
    <script src="js/echarts.js"></script>
    <script src="js/china.js"></script>
    <script src="js/shandong.js"></script>//备份的china.js改源码改的备份以免下次不能用

    <style>
        *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        #main{
            width:600px;
            height:450px;
            margin: 150px auto;
            border:1px solid #ddd;
        }
        /*默认长宽比0.75*/
    </style>
</head>
<body>
<div id="main">

</div>
<script type="text/javascript">

     var myChart = echarts.init(document.getElementById('main'));

    $(document).ready(function() {
        var dataList= [
                {name: '新户乡', value: 3000},//randomValue()
                {name: '太平乡', value: 2000},
                {name: '湾湾沟乡', value: 4000},
                {name: '河口区', value: 5000},
                {name: '孤岛镇', value: 1000},
                {name: '仙河镇', value: 2000}
            ]
        function randomValue() {
            return Math.round(Math.random()*1000);
        }
        $.get('js/370503.Json', function (geoJson) {

            myChart.hideLoading();
            //console.log(geoJson)
            echarts.registerMap('河口', geoJson);

            myChart.setOption(option = {
                // tooltip: {
                //     trigger: 'item',
                //     formatter: '{b}<br/>{c}'
                // },
                tooltip: {
                    formatter:function(params){
                        return '纳入医养总人数统计'+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 800,
                    max: 50000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [
                    {
                        type: 'map',
                        mapType: '河口', // 自定义扩展图表类型
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}}
                        },
                        data:dataList,
                        // 自定义名称映射
                        // nameMap: {
                        //     'Central and Western': '中西区',
                        //     'Eastern': '东区',
                        //     'Islands': '离岛',
                        //     'Kowloon City': '九龙城',
                        //     'Kwai Tsing': '葵青',
                        //     'Kwun Tong': '观塘',
                        //     'North': '北区',
                        //     'Sai Kung': '西贡',
                        //     'Sha Tin': '沙田',
                        //     'Sham Shui Po': '深水埗',
                        //     'Southern': '南区',
                        //     'Tai Po': '大埔',
                        //     'Tsuen Wan': '荃湾',
                        //     'Tuen Mun': '屯门',
                        //     'Wan Chai': '湾仔',
                        //     'Wong Tai Sin': '黄大仙',
                        //     'Yau Tsim Mong': '油尖旺',
                        //     'Yuen Long': '元朗'
                        // }
                    }
                ]
            });
        })
    })
</script>
</body>
</html>

解释一下上面代码中的 echarts.registerMap(‘河口(自定义扩展图名字)’, geoJson)这个方法中相当于在js中又加了一个echarts.registerMap；如图差不多，就是这意思，而网下的servers中的 mapType: ‘河口’, 是你自定义扩展图表类型的名字
在这里插入图片描述

第二种方法修改chian.js里面的geoJson；

1.就是将获取到的goJson直接将chian.js里面的goJson替换（就是上面图片中的echarts.registerMap后面{}里面的），同样也要执行上面那一步改成‘河口’
2.就是把上面第四步里的get请求goJson那一步去掉，再去掉echarts.registerMap(‘河口’, geoJson);这一步，就ok啦。
其实就是省了单独请求goJson这一步。