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

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

  1. 德州大屏展示
    链接:https://pan.baidu.com/s/1Y1z74mCMxjFqhUJGVb44Gw 提取码:rqfp
  2. 东营大屏
    链接: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这一步。

成品图

在这里插入图片描述
另外如果想只实现到区县,那画图那一步就省掉了,以德州为例,成品图如下
在这里插入图片描述

function getGzMap(_data) { if (_chinaMap == undefined) { var dom = document.getElementById("container"); _chinaMap = echarts.init(dom); _chinaMap.on('click', function(params) { console.log(params); var _type = params.seriesType; if (_type == "map") { //window.parent.aaa('aa') //调用父页面方法 } else if (_type == "effectScatter") { window.parent.showMap(); } }) } var option = { backgroundColor: 'rgba(0,0,0,0)', visualMap: { type: 'piecewise', show: false, min: 0, max: 300, splitNumber: 3, itemWidth: 10, itemHeight: 10, itemGap: 5, seriesIndex: [1], pieces: [ { min: 0, max: 100, label: '优' }, { min: 101, max: 200, label: '良' }, { min: 201, max: 300, label: '高风险' } ], //color: ['#FA4D08', '#4BD94F', '#FBD32B'], //红、绿、黄 color: ['#F8DAE6', '#FEF9B5', '#B0D8B3'], //红、黄、绿 textStyle: { color: '#9EA8B1', fontSize: 10 } }, tooltip: { formatter: '{b}' }, geo: { map: 'guangdong', roam: true, aspectScale: 1, zoom: 1.5, layoutCenter: ['55%', '40%'], layoutSize: 500, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111', borderColor: '#3BB4DF', shadowColor: '#25A3FC', shadowBlur: 10 }, emphasis: { areaColor: '#ddb926' } } }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', data: unitData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/fire.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, { name: '', type: 'map', geoIndex: 0, mapType: 'guangdong', // 自定义扩展图表类型 label: { normal: { show: true, } }, itemStyle: { normal: { label: { show: true, fontSize: 10, color: '#111' }, shadowColor: '#ddb926', shadowBlur: 5, }, emphasis: { label: { show: true }, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 } }, data: _data }, { type: 'effectScatter', coordinateSystem: 'geo', data: windData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/wind.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, ] }; $.getJSON('../../MapCN/guangdong.json', function(chinaJson) { echarts.registerMap('guangdong', chinaJson); _chinaMap.setOption(option, true); }); }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值