echarts绘制中国地图显示不正常怎么解决 求大牛帮助 5C

图片说明

代码:
var myChart = echarts.init(document.getElementById('china-map'));
var option = {
tooltip: {
// show: false //不显示提示标签
formatter: '{b}', //提示标签格式
backgroundColor:"#ff7f50",//提示标签背景颜色
textStyle:{color:"#fff"} //提示标签字体颜色
},
series: [{
type: 'map',
mapType: 'china',
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#c71585"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#009fe8',//区域边框颜色
areaColor:"#ffefd5",//区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#ffdead",
}
},
data:[
{name:'福建', selected:true}//福建为选中状态
],
geoCoord:{
"新疆":[84.9023,42.148],
"西藏":[87.8695,31.6846],
"内蒙古":[112.5977,46.3408],
"青海":[95.2402,35.4199],
"四川":[101.9199,30.1904],
"黑龙江":[126.1445,48.7156],
"甘肃":[99.7129,38.166],
"云南省":[101.0652,25.1807],
"广西":[107.7813,23.6426],
"湖南":[111.5332,27.3779],
"陕西":[109.5996,35.7396],
"广东":[113.4668,22.8076],
"吉林":[125.7746,43.5938],
"河北":[115.4004,39.4688],
"湖北":[112.2363,31.1572],
"贵州":[106.6113,26.9385],
"山东":[118.7402,36.4307],
"江西":[116.0156,27.29],
"河南":[113.0668,33.8818],
"辽宁":[122.0438,41.0889],
"山西":[112.4121,37.6611],
"安徽":[117.2461,32.0361],
"福建":[118.3008,25.9277],
"浙江":[120.498,29.0918],
"重庆":[107.7539,30.1904],
"宁夏":[105.9961,37.3096],
"海南":[109.9512,19.2041],
"台湾":[120.0254,23.5986],
"北京":[116.4551,40.2539],
"天津":[117.4219,39.4189],
"上海":[121.4648,31.2891],
"香港":[114.1178,22.3242],
"澳门":[111.5547,22.1484]
}
}],
};

myChart.setOption(option);
myChart.on('mouseover', function (params) {
    var dataIndex = params.dataIndex;
    console.log(params);
});

5个回答

你看下地点坐标是否正常,能显示出来说明显示应该没有问题

如果你根据echarts官网的demo去做的,一定要注意,官网的demo引用的js文件版本,建议你通过开发者工具将demo中的js文件全部下载到本地后,直接复制demo的代码,先将demo完全本地化后,再进行二次开发。

今天刚好也遇见这个问题了,开始怎么也搞不懂,后来感觉是普通的乱码问题,后来果然是,解决很简单,在jsp页面第一行没有设置编码 这样就好了
<%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>

这坐标对吗,发下我的,取自china.js
var geoCoordMap = {
上海: [121.472644, 31.231706],
云南: [102.712251, 25.040609],
内蒙古: [111.670801, 40.818311],
北京: [116.405285, 39.904989],
台湾: [121.509062, 25.044332],
吉林: [125.3245, 43.886841],
四川: [104.065735, 30.659462],
天津: [117.190182, 39.125596],
宁夏: [106.278179, 38.46637],
安徽: [117.283042, 31.86119],
山东: [117.000923, 36.675807],
山西: [112.549248, 37.857014],
广东: [113.280637, 23.125178],
广西: [108.320004, 22.82402],
新疆: [87.617733, 43.792818],
江苏: [118.767413, 32.041544],
江西: [115.892151, 28.676493],
河北: [114.502461, 38.045474],
河南: [113.665412, 34.757975],
浙江: [120.153576, 30.287459],
海南: [110.33119, 20.031971],
湖北: [114.298572, 30.584355],
湖南: [112.982279, 28.19409],
澳门: [113.54909, 22.198951],
甘肃: [103.823557, 36.058039],
福建: [119.306239, 26.075302],
西藏: [91.132212, 29.660361],
贵州: [106.713478, 26.578343],
辽宁: [123.429096, 41.796767],
重庆: [106.504962, 29.533155],
陕西: [108.948024, 34.263161],
青海: [101.778916, 36.623178],
香港: [114.173355, 22.320048],
黑龙江: [126.642464, 45.756967]
};

地点坐标、地图js文件的版本都可能带来某些异常,可以找比较靠谱的城市经纬度,另外,保证你使用的代码和版本是对应的。之前做过地图是没有出现这个问题,不过出现的问题是坐标点显示不出来(后来发现是经度和纬度位置写反了),但是你这个是可以显示出来的,可以看下是不是版本的问题。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
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绘制中国地图
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...
echarts中国地图
&amp;lt;div id=&quot;china-map&quot;&amp;gt;&amp;lt;/div&amp;gt; #china-map {width:1000px; height: 1000px;margin: auto;} &amp;lt;script type=&quot;text/javascript&quot; src=&quot;http://echarts.baidu.com/gallery/vendors/echarts/echarts.min....
echarts的中国地图
echarts的中国地图,echarts现在不提供地图的下载,下载就可以用了
echarts 中国地图
下载虽是乱码,但可以使用,亲测可以使用,echarts 加载 中国地图
echarts绘制中国地图省市地区代码
echarts绘制中国地图省市地区代码
echarts绘制中国地图 tooltip悬浮显示多数据且自动播放
echarts---中国地图 html文件 &amp;lt;div id=&quot;chinaMap&quot;&amp;gt; 引入echarts-map-china.js和echarts-auto-toopltip.js文件 (function(){ chinaMapAnalysis(); })(); var timers = setInterval(&quot;chinaMapAnalysis()&quot;,2000*34); ...
绘制中国地图
#绘制中国地图 install.packages('XML') install.packages('rjson') install.packages("httr") devtools::install_github("lchiffon/REmap") devtools::install_github("lchiffon/baidumap") library(devtools) library(...
求大牛帮助
2个语句rnrnselect cInvCode , CinvName , cComUnitName , Sum(iQuantity) as 四层数量合计 , rncast(Sum(iNatMoney) as decimal(18,2)) as 四层金额合计 from (rnselect a.cInvCode,A.iQuantity,C.CinvName , D.cComUnitName,A.iNatMoney from (rnselect * from saleBillVouchs where CinvCode like '3%') a left join rnrn(select * from saleBillVouch where IsNull(cChecker,'')<>'' and dDate>='2014-6-1' and dDate<='2014-6-30' rnand (cDepCode <>'10' ) or (cDepCode ='10' and cCusCode not like '12%' and cCusCode not like '22%' ) ) brnon A.SBVID=B.SBVIDrnleft join Inventory C on A.cInvCode =C.CinvCode rnleft join ComputationUnit D on C.cComunitCode = D.cComunitCode rnwhere C.cInvCCode ='3102' rn) xrngroup By cInvCode , CinvName ,cComUnitName rnrn条件都是一样,为什么查出来的结果不一样,求帮助rnrnrnrnrnrnrn select A.cInvCode , C.CinvName , D.cComUnitName , Sum(A.iQuantity) as 四层数量合计 , rncast(Sum(A.iNatMoney) as decimal(18,2)) as 四层金额合计 from saleBillVouchs A rn left join (select * from SaleBillVouch where ( 1=1 )) B rnon A.SBVID=B.SBVID left join Inventory C on A.cInvCode =C.CinvCode rn left join ComputationUnit D on C.cComunitCode = D.cComunitCode rn where C.cInvCCode ='3102' and B.dDate>='2014-6-1' and B.dDate<='2014-6-30' rnand (b.cDepCode <>'10' ) or ( b.cDepCode ='10' and b.cCusCode not like '12%' and b.cCusCode not like '22%' )rnand A.CinvCode like '3%' and IsNull(B.cChecker,'')<>'' rn group By A.cInvCode , C.CinvName ,D.cComUnitName rn
急求大牛帮助!!!
在linux环境下使用codeblock编写opencl程序,编译时一直提示/usr/bin/ld: cannot find /home/sean/AMDAPPSDK-2.9-1/lib/x86_64: File format not recognized,求大神解答怎样解决
大牛们求帮助
如下: rn主表User 有 id name 列rn rn外表Order 有 id userid(引用USER表id) goods_name 列rnrn如何查询出一条记录里面包含 name和它对应的多个goods_name 如下:张三的多个商品rnrnname goods_name1 goods_name2 goods_name3 ....... rn张三 笔记本电脑 华为手机 宝马汽车 .......rnrn谢谢!
出现bug,求大牛帮助解决
linux安装mysql和rabbitmq的过程当中,系统弹出对话框,然后我写入yes linux系统就开始在屏幕上无限的出现y,一直到我按ctrl+c,才停止,请问有人经历过这个bug么,要怎么解决? ...
求Echarts大神帮助。。。。。
[img=https://img-bbs.csdn.net/upload/201404/30/1398828465_569424.png][/img]rnrn想让俩个数据不共用一个Y轴 有没有什么属性 设置一下呢,???急。。。。
Echarts中国地图修改
前言 在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下。 Echarts中国地图 地图样式修改 标题修改 数值功能删除,但保留数据计算 按钮功能去除 地图字体大小设置 目前没有办法解决更改区域颜色 // 中国地图扫码数量 // var num = document.getElementById(&quot;...
echarts的中国地图去掉南海诸岛
geo: { map: "china", roam: true, zoom:1, //默认显示级别 scaleLimit:{min:0,max:3}, // 缩放级别 regions: [ { name: "南海诸岛", ...
echarts中国地图js
<!DOCTYPE html> &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=EDGE"&gt; &lt;title&gt;ECharts&lt;/title&gt; &lt;!--&lt;link rel="stylesheet" type="text/css" href="css/main.css"/&gt;--&gt; [removed][removed] [removed][removed] [removed][removed] &lt;style&gt;#china-map { width: 1000px; height: 1000px; margin: auto; }&lt;/style&gt; &lt;/head&gt; &lt;body&gt; <div id="china-map"></div> [removed] var myChart = echarts.init(document.getElementById('china-map')); var option = { title: { text: '用户分布', subtext: '测试阶段', x: 'left' }, legend: { orient: 'vertical',//图例的排列方向 x: 'right',//图例的位置 data: [] }, tooltip: {//提示框组件。 trigger: 'item',//数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 formatter: '{b}<br/>{c} (人)' }, visualMap: {//颜色的设置 dataRange x: 'left', y: 'center', min: 0, max: 2500, calculable: true,//颜色呈条状 text: ['高', '低'],// 文本,默认为数值文本 color: ['#006EDD', '#70B7EE', '#E0FFFF'] }, series: [ { name: '订单量', type: 'map', mapType: 'china', roam: false,//是否开启鼠标缩放和平移漫游 itemStyle: {//地图区域的多边形 图形样式 normal: {//是图形在默认状态下的样式 label: { show: true,//是否显示标签 textStyle: { color: "rgb(249, 249, 249)" } } }, emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时 label: {show: true} } }, top: "3%",//组件距离容器的距离 data: [ {name: '北京', value: Math.round(Math.random() * 2000)}, {name: '天津', value: Math.round(Math.random() * 2000)}, {name: '上海', value: Math.round(Math.random() * 2000)}, {name: '重庆', value: Math.round(Math.random() * 2000)}, {name: '河北', value: Math.round(Math.random() * 2000)}, {name: '河南', value: Math.round(Math.random() * 2000)}, {name: '云南', value: Math.round(Math.random() * 2000)}, {name: '辽宁', value: Math.round(Math.random() * 2000)}, {name: '黑龙江', value: Math.round(Math.random() * 2000)}, {name: '湖南', value: Math.round(Math.random() * 2000)}, {name: '安徽', value: Math.round(Math.random() * 2000)}, {name: '山东', value: Math.round(Math.random() * 2000)}, {name: '新疆', value: Math.round(Math.random() * 2000)}, {name: '江苏', value: Math.round(Math.random() * 2000)}, {name: '浙江', value: Math.round(Math.random() * 2000)}, {name: '江西', value: Math.round(Math.random() * 2000)}, {name: '湖北', value: Math.round(Math.random() * 2000)}, {name: '广西', value: Math.round(Math.random() * 2000)}, {name: '甘肃', value: Math.round(Math.random() * 2000)}, {name: '山西', value: Math.round(Math.random() * 2000)}, {name: '内蒙古', value: Math.round(Math.random() * 2000)}, {name: '陕西', value: Math.round(Math.random() * 2000)}, {name: '吉林', value: Math.round(Math.random() * 2000)}, {name: '福建', value: Math.round(Math.random() * 2000)}, {name: '贵州', value: Math.round(Math.random() * 2000)}, {name: '广东', value: Math.round(Math.random() * 2000)}, {name: '青海', value: Math.round(Math.random() * 2000)}, {name: '西藏', value: Math.round(Math.random() * 2000)}, {name: '四川', value: Math.round(Math.random() * 2000)}, {name: '宁夏', value: Math.round(Math.random() * 2000)}, {name: '海南', value: Math.round(Math.random() * 2000)}, {name: '台湾', value: Math.round(Math.random() * 2000)}, {name: '香港', value: Math.round(Math.random() * 2000)}, {name: '澳门', value: Math.round(Math.random() * 2000)}, {name: '南海诸岛', value: Math.round(Math.random() * 2000)} ] } ] }; myChart.setOption(option); [removed] &lt;/body&gt; &lt;/html&gt;
echarts实现中国地图demo
echarts实现中国地图,点击省打开对应的省地图,点击返回按钮显示中国地图,可在线编辑数据,下载图片等。
echarts中国地图线性动画特效
用echarts绘制的中国地图,显示有来某个城市旅游TOP10的路线图。
ECharts(中国地图篇)的使用
ECharts(中国地图篇)的使用 代码html &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;meta http-equiv=&quot;X-UA-Compatible&quot; content=
ECharts中国地图--省份文字居中
这是我修改过的和在官网下载的不一样
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门)。地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现。visualMap 是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。 ✦ 与 ECharts2 中 dataRange 的关系 ✦ visualMap 是由 EChar...
echarts中国地图json文件
echarts中国地图json文件 echarts中国地图json文件 echarts中国地图json文件
Echarts中国地图三级钻取
版权声明:本文由董可伦首发于https://dongkelun.com,非商业转载请注明作者及原创出处。商业转载请联系作者本人。 https://blog.csdn.net/dkl12/article/details/84571332 我的...
echarts中国地图js文件
echarts中国地图js文件,echarts中国地图js文件,echarts中国地图js文件
echarts中国地图china.js下载
上次想写一个中国地图,发现需要一个china.js 然后百度搜了搜,发现都是收费或者需要积分的 后来找朋友要了一个,今天给大家分享一下,china.js、echarts-gl 链接: https://pan.baidu.com/s/1rLF0IpZRAZlEwRhPrA4yCg 密码: 5qef...
实用echarts中国地图demo
发现官网中的关于地图这一块撤掉了,所以网上寻找了一番,整理了一下实用echarts中国地图demo分享..........
echarts中国地图光点闪烁
echarts中国地图光点闪烁的案例,代码简单易懂,注释清晰,下载后直接可以点击运行
使用Echarts实现中国地图
#1引入Echarts及地图文件 *1)下载Echarts JS库文件及地图文件         Echarts库下载地址 http://echarts.baidu.com/download.html         Echarts中国地图下载地址 http://echarts.baidu.com/download-map.html *2)添加Echarts引用及中国地
echarts中国地图JS文件
echarts中国地图JS文件,亲测可用,我自己在项目中就在使用。
Echarts中国地图下钻Demo
一个简单的地图显示Demo项目,包含地图的GeoJSON资源文件
echarts的中国地图js
echarts的中国地图js,直接引入js就可以使用echarts的迁徙图的背景中国地图
echarts中国地图 - JS
echarts 中国地图 - JS, ECharts(中国地图篇)的使用
ECharts中国地图-- 省份文字居中
如图中国地图文字居中显示 下载地址: ( 资源审核中。。。)
echarts 中国地图自动播放
敲黑板,特别恶心的就是  版本问题, 坑了我一天,一般的版本没有 dispatchAction 这个方法,  要去https://www.bootcdn.cn/echarts/   下载3.5.2版本的代码 (找到的当时一万个cnm在心里飘过, 希望可以警醒后来人)   这是数据 {&quot;enrollProfessions&quot;:[{&quot;year&quot;:2015,&quot;data&quot;:[{&quot;year&quot;:20...
中国地图js echarts
中国地图json文件。可用于echarts地图绘制中国地图区域
ECharts中国地图选择器
插件描述:Ets中国地图选择器demo. 参考示例:http://www.jq22.com/jquery-info4901
echarts中国地图china.js
亲测可以用,里面坐标乱码不过不影响使用已经集成进项目。
echarts 中国地图和世界地图 源文件
百度开源技术可视化echars的相关js资源文件,可用于绘制中国地图和世界地图,利于开发
Echarts中引入中国地图
思考:1、迁徙图实现的第一步是引入中国地图,那如何引入中国地图呢?            2、地图引入后在实现迁徙图的相关动效(这个会在接下来的文章中总结,今天先总结下如何在Echarts中引入中国地图) 一、下载echarts.min.js以及china.js文件 1、echarts.min.js文件下载地址:(下载 4X版本的Echarts文件) 2、china.js文件下载地址:百度...
相关热词 c# stream 复制 android c# c#监测窗口句柄 c# md5 引用 c# 判断tabtip 自己写个浏览器程序c# c# 字符串变成整数数组 c#语言编程写出一个方法 c# 转盘抽奖 c#选中treeview