echarts 地图

最新推荐文章于 2024-03-11 13:15:00 发布
最新推荐文章于 2024-03-11 13:15:00 发布
阅读量408 收藏
点赞数
分类专栏： js 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38914900/article/details/118156289
版权 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="applicable-device" content="mobile">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="address=no;">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>地图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #china-map {
            width: 100%;
            height: 80vw;
        }
    </style>
</head>

<body>
    <div id="china-map" ></div>
    <!-- js 插件 -->
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <!-- 图表 插件 -->
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <script type="text/javascript" src="./js/china.js"></script>
    <script>
        var fonsize ;
        if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            fonsize = 5
        } else {
            fonsize = 12
        }
        var widthValue = $(window).width()-10;
        var myChart = echarts.init(document.getElementById('china-map'));

        var mapData = [
            { name: '安徽', value: 5 },
            { name: '北京', value: 3 },
            { name: '广东', value: 10 },
            { name: '广西', value: 1 },
            { name: '河北', value: 9 },
            { name: '河南', value: 2 },
            { name: '湖北', value: 5 },
            { name: '湖南', value: 7 },
            { name: '江苏', value: 3 },
            { name: '辽宁', value: 5 },
            { name: '山东', value: 8 },
            { name: '陕西', value: 4 },
            { name: '上海', value: 2 },
            { name: '四川', value: 5 },
            { name: '天津', value: 1 },
            { name: '云南', value: 6 },
            { name: '浙江', value: 1 },
            { name: '重庆', value: 2 },
            { name: '南海诸岛', value: 0 ,itemStyle:{ normal:{opacity:0}}}
        ]
        var geoCoordMap = [
            {name: '合肥', value: [117.30794, 31.79322], visualMap:false },
            {name: '北京', value: [116.23128, 40.22077], visualMap:false },
            {name: '东莞', value: [113.75179, 23.02067], visualMap:false },
            {name: '广州', value: [113.27324, 23.15792], visualMap:false },
            {name: '深圳', value: [113.88308, 22.55329], visualMap:false },
            {name: '南宁', value: [108.27331, 22.78121], visualMap:false },
            {name: '石家庄', value: [114.53952, 38.03647], visualMap:false },
            {name: '郑州', value: [113.6401, 34.72468], visualMap:false },
            {name: '武汉', value: [114.02919, 30.58203], visualMap:false },
            {name: '长沙', value: [112.98626, 28.25591], visualMap:false },
            {name: '南京', value: [118.8921, 31.32751], visualMap:false },
            {name: '苏州', value: [120.63132, 31.30227], visualMap:false },
            {name: '沈阳', value: [123.46987, 41.80515], visualMap:false },
            {name: '济南', value: [116.75199, 36.55358], visualMap:false },
            {name: '西安', value: [108.93425, 34.23053], visualMap:false },
            {name: '上海', value: [121.48941, 31.40527], visualMap:false },
            {name: '成都', value: [104.10194, 30.65984], visualMap:false },
            {name: '天津', value: [117.30983, 39.71755], visualMap:false },
            {name: '昆明', value: [102.82147, 24.88554], visualMap:false },
            {name: '杭州', value: [120.21201, 30.2084], visualMap:false },
            {name: '重庆', value: [106.54041, 29.40268], visualMap:false }
        ]

        option = {            
            visualMap: {
                show: false,
                type: 'continuous',
                min: 0,
                max: 10,
                color: ['#aa99ff','#aaeeff'],
                hoverLink: false
            },
            geo: {
                map: 'china',
                layoutCenter: ["50%", "50%"], // position位置
                layoutSize: widthValue, // 地图大小
                regions: [{
                    name: "南海诸岛",
                    itemStyle: {
                        // 隐藏地图
                        normal: {
                            opacity: 0, // 为 0 时不绘制该图形
                        }
                    },
                    label: {
                        show: false // 隐藏文字
                    }
                }],
                silent: true,
                itemStyle: {      
                    areaColor: '#f1f1f1',
                    borderColor:'#fff',
                    borderWidth:'0',						
                    label: {
                        show: false
                    }
                },
                emphasis: { 
                    itemStyle: {
                        areaColor: '#ddd'
                    },
                    label: { 
                        show: false
                    },
                },
                select: {
                    itemStyle: {
                        areaColor: ''
                    },
                    label: { 
                        show: false
                    } 
                }
            },
            series: [
                {
                    name: '省份',
                    type: 'map',
                    mapType: 'china',
                    layoutCenter: ["50%", "50%"], // position位置
                    layoutSize: widthValue, // 地图大小
                    roam: false,  
                    silent: true,
                    itemStyle: {      
                        areaColor: '#f1f1f1',
                        borderColor:'#fff',
                        borderWidth:'0',						
                        label: {
                            show: false
                        }
                    },
                    emphasis: { 
                        itemStyle: {
                            areaColor: '#ddd'
                        },
                        label: { 
                            show: false
                        },
                    },
                    select: {
                        itemStyle: {
                            areaColor: ''
                        },
                        label: { 
                            show: false
                        } 
                    },
                    data: mapData
                },                
                {
                    name: '城市',
                    type: 'effectScatter',
                    silent: true,
                    coordinateSystem: 'geo',
                    symbolSize: 2,
                    showEffectOn: 'render',
                    rippleEffect: {
                        color: '#0088ff',
                        brushType: 'stroke',
                        scale: 5
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            color: '#333',
                            fontSize: fonsize,
                            formatter: '{b}',
                            position: 'insideBottomLeft',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0057ff',
                            borderWidth: 0,
                            shadowBlur: 2,
                            shadowColor: 'rgba(0,0,0,.1)'
                        }
                    },
                    data: geoCoordMap
                },{
                    name: '灰色区域未开放',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 0,
                    silent: true,
                    label: {
                        normal: {
                            color: '#aaa',
                            fontSize: 12,
                            rotate: 25,  
                            formatter: '{b}',
                            show: true
                        }
                    },
                    data: [{name: '灰色区域未开放', value: [94, 38], visualMap:false }]
                    
                }
            ]
        };
        myChart.setOption(option);

    </script>
</body>

</html>

鱼与雨于语
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echars 省市地图
07-20
包含各个省市地图json数据，echars官网已经不让下载。
Echarts地图
xiaozhang9的博客
03-21 1622
var provinceNameList = [ "韩国", "山东省", "江苏省", "上海市", "浙江省", "福建省", "广东省" ]; var provinceValueList = [ { name: "韩国", gdp: "11亿元", rk: "654万人", mj: "105万平方公里" }, { na...
地理数据可视化：使用echarts实现地图可视化功能
最新发布
Shids_的博客
03-11 2668
地理数据可视化：使用echarts实现地图可视化功能
ECharts 实现地图功能
weixin_48163734的博客
12-15 8895
Vue进阶（幺玖幺）：ECharts 实现地图功能 No Silver Bullet 2021-06-22 16:17:28 ...
Echars 地图展示
芒果哥的专栏
07-18 2381
一个 地图的 小例子  ：   1、创建文件夹  导入
echarts社区地图、echart地图
m0_67402026的博客
03-03 1425
文章目录 地图时间轴多样 3D地图+拖拽+扫描特效+自转+4.9.0及以下版本才能用 气泡地图+圆点会动 地图上+柱图 地图上+气泡 地图+图例 地图时间轴多样 var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; var geoGpsMap = { '1': [127.9688, 45.368], '2': [116.4551, 40.2539], '3': [
ECharts 地图
06-14
ECharts 地图，几种样式的地图DEMO
下载Echarts地图资源包
07-20
Echarts全国各省市区地图JS/JSON文件下载
Echarts 地图图表示例
11-10
包含Baidu地图和JS地图的示例。
echarts 地图上如何打点
05-13
除了 scatter (散点图) 在地图上标记的方式之外,我们也可以使用 markPoint 图表标注的方式在地图上标记.
Echars地图完整版
03-19
Echars地图完整版，下载后出现问题，评论就行 我看到重新给你
echars地图数据（全国+省，包括港澳台）
02-26
echars之前官方地图数据（全国+省，包括港澳台），现在echars已不可以下载（因为不准确），建议使用百度地图
Echars世界地图、全国地图、全省地图JSON和JS下载
12-21
Echars世界地图、全国地图、全省地图JSON和JS下载Echars世界地图、全国地图、全省地图JSON和JS下载
echarts4地图数据文件(含全国和省js文件)
10-08
echarts4目前已经不支持下载地图数据，此附件中包含了js数据。 js格式，直接调用简单直接，但是数据只有全国概览和各省的数据，也就是只能看到地市级城市的地图。
echarts4地图数据文件(含全国和省json以及全国、省、地市json文件)
10-08
echarts4地图数据文件(含全国和省js以及全国、省、地市json文件)
echarts 地图大全
10-31
echats 2.2.7所有地图大全，包括html5，js，及地图坐标等
5分钟 数字时间倒计时 js
sinat_38914900的博客
03-13 2057
vartimer=0; $.fn.countDown=function(options){ var$myBar=$(this); vardefaultOpts={ dataTime:'', downEnd:function(){} } varopts=$.extend({},defaultOpts,options); ...
比较数组值大小
sinat_38914900的博客
09-09 982
//返回最大值 function ( array ){ return Math.max.apply( Math, array ); }; //返回最小值 function ( array ){ return Math.min.apply( Math, array ); };
JS监听浏览器的返回、后退、上一页按钮的事件方法
sinat_38914900的博客
04-10 801
在实际的应用中，我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的需求，那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。 我相信很多朋友像我一样，在百度、搜狗里面搜索很久都没找到方法。 下面就来告诉大家怎样监听的方法： 首先我们要了解浏览器的history。 大家知道在页面中我们可以使用javascript window history，后退到前面页面，但是由于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值