Echart 中国地图 两个不同的格式的地图合并

我用EChart上 载入两种数据
1、整个城市上的数据
图片说明

2、用经伟度座标 标上的数据,是用蓝色圈圈的
图片说明

但是要使用蓝色圈圈的话,需要用到Echart-all.js
但使用后,地图背景就变灰色了,但是我要效果要如第一张图的样子

我想要合并两个数据,背景如图1,又有蓝色的经纬座标

请各位大神帮助!谢谢

图一的代码
<!DOCTYPE html>



<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/all-province.js"></script>



<title></title>




<script>
    {



        var Province = "广东";
        var myChart = echarts.init(document.getElementById('map'));
        option = {

            title: {
                text: '省份销量额',
                subtext: '-',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            tooltip: {
                trigger: 'item'
            },

            visualMap: {
                min: 0,
                max: 1000,
                left: 'right',
                color: ['orange', 'yellow'],
                text: ['高', '低'],           // 文本,默认为数值文本
                calculable: true,

            },
            series: [

                {
                    name: 'B',
                    type: 'map',
                    mapType: Province,
                    selectedMode: 'single',
                    //left: '50%',
                    //top: '25%',
                    //width: '50%',
                    //height: '50%',
                    roam: true,

                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{ name: "深圳市", value: 426 }, { name: "中山市", value: 221 }]


                }



            ]
        };



        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });


    }


</script>

图二的代码
<!DOCTYPE html>



<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/all-province.js"></script>
<script src="js/echarts-all.js"></script>


<title></title>




<script>
    {



        var Province = "广东";
        var myChart = echarts.init(document.getElementById('map'));
        option = {

            title: {
                text: '省份销量额',
                subtext: '-',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            tooltip: {
                trigger: 'item'
            },

            visualMap: {
                min: 0,
                max: 1000,
                left: 'right',
                color: ['orange', 'yellow'],
                text: ['高', '低'],           // 文本,默认为数值文本
                calculable: true,

            },
            series: [
            {
                name: 'A',
                    type: 'map',
                    mapType: Province,

                    data: [],
                    markPoint: {
                        itemStyle : {
                normal:{
                    color:'skyblue'
                }
            },
                        data: [

                            { name: "厦门", value: 2600 },
                            { name: "汕尾", value: 2633 },
                            { name: "潮州", value: 2624 },
                            { name: "丹东", value: 273 }
                        ]
                    },
                    geoCoord: {
                        "海门": [121.15, 31.89],
                        "鄂尔多斯": [109.781327, 39.608266],
                        "招远": [120.38, 37.35],
                        "文登": [122.05, 37.2],
                        "上海": [121.48, 31.22],
                        "攀枝花": [101.718637, 26.582347],
                        "威海": [122.1, 37.5],
                        "承德": [117.93, 40.97],
                        "厦门": [118.1, 24.46],
                        "汕尾": [115.375279, 22.786211],
                        "潮州": [116.63, 23.68]

                    }
                },
                {
                    name: 'B',
                    type: 'map',
                    mapType: Province,
                    selectedMode: 'single',
                    //left: '50%',
                    //top: '25%',
                    //width: '50%',
                    //height: '50%',
                    roam: true,

                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{ name: "深圳市", value: 426 }, { name: "中山市", value: 221 }]


                }



            ]
        };



        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });


    }


</script>

0

2个回答

0
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });


}这个地方采用的是java调用了接口
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Echart 中国地图 两个不同的格式的地图合并
我用EChart上 载入两种数据n1、整个城市上的数据n![图片说明](https://img-ask.csdn.net/upload/201805/19/1526703848_745279.png)nnn2、用经伟度座标 标上的数据,是用蓝色圈圈的n![图片说明](https://img-ask.csdn.net/upload/201805/19/1526703833_912874.png)nn但是要使用蓝色圈圈的话,需要用到Echart-all.jsn但使用后,地图背景就变灰色了,但是我要效果要如第一张图的样子nn我想要合并两个数据,背景如图1,又有蓝色的经纬座标nn请各位大神帮助!谢谢nn图一的代码nnnnn n nn n n n nnnn nnnn n n nn nnnnnnnnn图二的代码nnnnn n nn n n n n nnn nnnn n n nn nnnnnnn
echarts各省份地图合并成一个JS文件
echarts各省份地图合并成一个JS文件,只需引入一个就可以用所有省份的地图,文件还兼容了echarts4.0
【可视化】Echarts3 在世界地图中绘制中国各省份的轮廓
要在世界地图展现出来的情况下绘制中国省份的轮廓,根据现有的echarts-api是不可行的。 但好在echarts也提供了自定义地图的方式,使用echarts.registerMap();来实现  第一步 查阅官方文档你会知道这是echarts在使用geojson绘制svg图像,geojson的开发规范是固定的,参考http://geojson.org/ ,这应该是开发地理svg图像的官方网站
echart中国地图,多地图案例
1.多地图案例 2.中国地图
中国地图json资源
中国各省市json地图,国家电网,将内蒙分为蒙东和蒙西;并将河北拆分为冀北和河北,符合国家电网划分的管理,便于用作大屏展示等。
Echarts中国地图各省份区域设置不同的颜色
摘要:          接着《Echarts引入中国地图》续写,我们的项目需求是要求地图的背景颜色要各省份不同。看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要。 实现: 1、在series中添加data[ ]数据 data: [ { name: '北京', selected: false, value: 1 }, ...
ECharts合并地图上的区域
对于某些特定需求,官方下载的地图数据可能并不能完全满足。例如,要求显示中国地图,但需要将山东江苏和浙江这3个省合并起来,显示“东部区域”。其他省份不变。 于是就需要对官方提供的地图数据进行修改。 一个思路是借助第三方工具,生成新区域的轮廓点,然后删除原来的3个区域。例如http://geojson.io/就提供了这样一种方式。但这样费时费力,且精度无法保证。 实际上,直接将这三个省的轮廓点合...
echart之全国地图切换省级地图
做完之后的效果如下: 这是在基础地图地图的基础上结合echarts2的改进版本,echarts2中的版本只有左上角的全国地图的比较简单的实例代码。现在的比较完善(点击全国地图上的省显示对应省内各市的热力分布,对应的全国地图和省级地图的位置大小都会相应的变化,然后再点击右上角的返回全国按钮的时候,隐藏省级地图,全国地图回复原来的大小的位置。) 首先定义几个数据变量: province_da
echart实现中国地图
1.渲染地图的基础配置 chinaMap () { // 地图 const obj = { title: { text: '' }, backgroundColor: '', tooltip: { trigger: 'item', formatter: '{b}...
基于EChart的地图选择器
图1    基于Echart的地图选择器 ECharts,缩写来自EnterpriseCharts,商业级数据图表,是百度的一个开源的纯JavaScript图表库,业界给予了很多赞誉,这里不多说,需要了解详情的同学参见官网。其最贴切的地方在于本地化支持,使用时只需引入一个echarts.js文件,非常方便。 本系统的授权模块中关于经销商的授权都涉及到ECharts插件制作的一个中国地图选择
echarts实现中国地图-地图板块颜色修改
` ECharts地图选择器 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctrl + G 提升标题 Ctrl + H 有序列表 Ctrl + O 无序列...
vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm ...
Echarts中引入中国地图
思考:1、迁徙图实现的第一步是引入中国地图,那如何引入中国地图呢?            2、地图引入后在实现迁徙图的相关动效(这个会在接下来的文章中总结,今天先总结下如何在Echarts中引入中国地图) 一、下载echarts.min.js以及china.js文件 1、echarts.min.js文件下载地址:(下载 4X版本的Echarts文件) 2、china.js文件下载地址:百度...
Echarts中国地图的显示
话不多说,直接上代码 很多人都说china.js文件不好找 ; 直接奉上地址,自行下载 http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js 以下是完整示例代码: &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;met...
vue + echart +map中国地图,省市地图,区县地图
第一步:安装依赖包 npm install echarts --save 在main.js 中全局引入import echarts from 'echarts' Vue.prototype.$echarts = echarts 第二步:引入地图文件(此处路径可以参照node_modules 文件夹里的,echarts依赖包中具体路径写) 1.中国地图 import &amp;amp;amp;amp;amp;amp;amp;quot;echarts/map...
为了修改文字在地图上位置而修改中国地图json
自己辛辛苦苦弄的json,坐标都已经修改好了,直接拿过来替换就可以用了,省市名称都是合理的位置
echarts3 实现中国地图
echarts3 实现中国地图 直接贴代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;Title&amp
echart3-中国所有地市级别地图 json方式
echart3-中国所有地市级别地图 json方式,官方已经不能下载了啊。。。。。
echart中国地图跟省地图整合
中国地图跟省市地图的整合    var stackChart = echarts.init(document.getElementById('ditu')); option = {     tooltip : {         trigger
使用Echarts实现中国地图
#1引入Echarts及地图文件 *1)下载Echarts JS库文件及地图文件         Echarts库下载地址 http://echarts.baidu.com/download.html         Echarts中国地图下载地址 http://echarts.baidu.com/download-map.html *2)添加Echarts引用及中国地
echart3 全国及各省地图数据
echart3.X 全国及各省份地图数据,稀有资源及时下载。
echarts中国地图数据(包含js及json数据)
百度因为政策原因停止下载,为各位提供方便,欢迎下载
echarts地图扩展中国分区域geoJSON地图数据
包括东北、华北、华东、华南、华中、西南、西北七大区,并包括各个区域的省等8个json文件。可用于echarts地图扩展中国分区域
echarts 中国地图,根据省份数值高低改变省份颜色深浅
function randomValue() { return Math.round(Math.random()*1000); } option = { tooltip: {}, visualMap: { min: 0, max: 2000, text:['High','Low'], realtime: fa...
ECharts中国地图篇-名称经纬度调整
一、 网址: http://echarts.baidu.com/download.html 点击: 完整 下载文件: echarts.min.js网址: http://echarts.baidu.com/download-map.html 点击: 中国地图 - JS 下载文件:
echarts中国地图光点闪烁
echarts中国地图光点闪烁的案例,代码简单易懂,注释清晰,下载后直接可以点击运行
react+echarts 实现中国地图
共需要四个类index.js(react基础类),App.js(基础逻辑类),App.css(样式类),geo.js(json文件类) 下面来看代码: index.js import React from ‘react’; import ReactDOM from ‘react-dom’; //中国地图 import App from ‘./App’; ReactDOM.render(, doc...
echarts地图中城市与省份之间的切换
echarts地图中城市与省份之间的切换
【eCharts】eCharts实现中国地图热力地图分布
1.导包 2.实现热力地图分布实现 &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;echarts.js中国地图省份悬浮提示&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;http://code.jquery.c
Echarts使用二:全国地图与各省市地图联动
上篇博客中写到了echarts中如何将城市高亮显示,这篇介绍一下二级地图联动。即点击中国地图中的一个省份,则显示该省份的详细地图。这里的地图使用本地文件引入的方式,网上很多文章介绍的都有问题,根本就无法正确引入地图的js文件。希望这里可以给大家一个正确的示例。 代码有个不足的地方:这里使用两个div分别放置中国地图和点击的省份地图。其实echarts里面提供了内部的布局方法,不过我没有详细去研究,
直接运行echarts中国地图示例以及china.js
这个示例点击html可以直接运行,显示echart的中国地图。
echarts中国地图china.js下载
上次想写一个中国地图,发现需要一个china.js 然后百度搜了搜,发现都是收费或者需要积分的 后来找朋友要了一个,今天给大家分享一下,china.js、echarts-gl 链接: https://pan.baidu.com/s/1rLF0IpZRAZlEwRhPrA4yCg 密码: 5qef...
echarts柱状图与中国地图联动,鼠标移入柱状图,地图响应地显示数据
echarts显示柱状图的时候,旁边放一张中国地图,当鼠标移入柱状图,旁边中国地图对应的区域亮起来。先放效果图~~这是原始页面这是鼠标移上去的样子这是鼠标离开之后的样子总之呢,就是给他俩弄一个联动的效果,移入柱状图,地图跟着动起来,并且数据跟着变。柱状图后台数据库:地图后台数据库:思路大概是这样的:当鼠标移入柱状图的时候,获取当前移入的索引,先让柱状图的图标显示出来;然后根据日期进行判断,看当天有...
echarts中国省份地图
echarts中国地图页面效果: jsp页面代码:ajax请求返回json数据 &amp;lt;div class=&quot;col-lg-7&quot;&amp;gt; &amp;lt;div id=&quot;main8&quot; style=&quot;width: 100%;height:500px&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; $.ajax({ type : 'POST', url
使用EChats制作中国地图,点击省份跳转到相应链接
html中: js文件 其中map.js var container = document.getElementById('main'); //初始化容器高度 container.style.height = $('.container').innerWidth()*2/3+"px" var myChart = echarts.ini
Echarts3——绘制世界地图中其他地方到中国城市
Echart3绘制世界地图航线做完的最终效果如图所示(使用了三种效果叠加而成):第一种效果 第二种效果 第三种效果准备工作 echarts.js 下载链接 world.js/world.json 下载链接 城市经纬度 获取方法 1. 引入相关文件&amp;lt;!-- 引入echart.js, 3.0的版本 --&amp;gt; &amp;lt;script src=&amp;quot;js/echarts.js&amp;quot; type=&amp;quot;text/javas
Echarts绘制中国地图
最近项目中需要出现中国地图 ,因为总是使用echarts写柱状图和饼图,头一次写地图,所以就给记录下来 先把整个代码贴上 ,下次用到的时候可以直接拿过来 ,然后在这个基础上做修改就ok了, 因为是中国地图所以要引入China.js,这个js好像不好找, &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &
Echarts地图相关功能整合
Echarts是一款开源、功能强大的数据可视化产品。之前做图表一直都是使用Highcharts来做的,Echarts与Highcharts大致用法差不多,最近用到了Echarts的地图功能,把官网上的两个例子整合了一下终于达到了要求。贴出来跟大家分享一下。另附上新疆各市县经纬度js文件一份(xjGeoCoord.js) 先来晒一个效果图吧 下面就来看一下代码如果实现 一、...
Echarts地图详解(地图样式、合并地图、增加地图)
概述         地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色。 地图实现 下面我们就来实现一个基本的地图,并为之添加一些好看的样式。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;g...
vue中引入ECharts的中国地图
本篇讲述在vue中引入ECharts的中国地图 首先确保项目中安装了echarts 在项目中引入 import echarts from ‘echarts’ //引入中国地图依赖 import ‘echarts/map/js/china’ Vue.prototype.$echarts = echarts 页面代码如下: &lt;template&gt; &lt;div class="chi...