本人想用echarts地图区域合并把区级的具体地图详情显示出来,怎

请登录查看
geo.regions[i].label& &| & Object图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label 选项在 ECharts 2.x 中放置于 itemStyle.normal 下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label&被拿出来跟&itemStyle&平级,并且跟&itemStyle&一样拥有&normal,emphasis&两个状态。geo.regions[i].label.normal& &| & Object通过 normal 状态设置 ECharts 特定地图区域的文本标签。geo.regions[i].label.normal.show& &| & boolean[ default: false ]是否显示标签。geo.regions[i].label.normal.position& &| & string, Array标签的位置。可选:[x, y]通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例:
// 绝对的像素值
position: [10, 10],
// 相对的百分比
position: ['50%', '50%']'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'参见:。geo.regions[i].label.normal.distance& &| & number[ default: 5 ]距离图形元素的距离。当 position 为字符描述值(如&'top'、'insideRight')时候有效。参见:。geo.regions[i].label.normal.rotate& &| & number标签旋转。从 -90 度到 90 度。正值是逆时针。参见:。geo.regions[i].label.normal.offset& &| & Array是否对文字进行偏移。默认不偏移。例如:[30, 40]&表示文字在横向上偏移&30,纵向上偏移&40。geo.regions[i].label.normal.formatter& &| & string, Function标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用&\n&换行。字符串模板模板变量有&{a}、{b}、{c},分别表示系列名,数据名,数据值。示例:formatter: '{b}: {c}'回调函数回调函数格式:(params: Object|Array) =& string参数&params&是 formatter 需要的单个数据集。格式如下:{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
}。geo.regions[i].label.normal.color& &| & Color[ default: "#fff" ]文字的颜色。如果设置为&'auto',则为视觉映射得到的颜色,如系列色。geo.regions[i].label.normal.fontStyle& &| & string[ default: 'normal' ]文字字体的风格可选:'normal''italic''oblique'geo.regions[i].label.normal.fontWeight& &| & string[ default: normal ]文字字体的粗细可选:'normal''bold''bolder''lighter'100 | 200 | 300 | 400...geo.regions[i].label.normal.fontFamily& &| & string[ default: 'sans-serif' ]文字的字体系列还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...geo.regions[i].label.normal.fontSize& &| & number[ default: 12 ]文字的字体大小geo.regions[i].label.normal.align& &| & string文字水平对齐方式,默认自动。可选:'left''center''right'rich&中如果没有设置&align,则会取父层级的&align。例如:{
align: right,
// 没有设置 `align`,则 `align` 为 right
}geo.regions[i].label.normal.verticalAlign& &| & string文字垂直对齐方式,默认自动。可选:'top''middle''bottom'rich&中如果没有设置&verticalAlign,则会取父层级的&verticalAlign。例如:{
verticalAlign: bottom,
// 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
}geo.regions[i].label.normal.lineHeight& &| & number文本标签的行高。rich&中如果没有设置&lineHeight,则会取父层级的&lineHeight。例如:{
lineHeight: 56,
// 没有设置 `lineHeight`,则 `lineHeight` 为 56
}geo.regions[i].label.normal.backgroundColor& &| & string, Object[ default: 'transparent' ]文字块背景色。可以是直接的颜色值,例如:'#;,&'red',&rgba(0,23,11,0.3)'。可以支持使用图片,例如:backgroundColor: {
image: 'xxx/xxx.png'
// 这里可以是图片的 URL,
// 或者图片的 dataURI,
// 或者 HTMLImageElement 对象,
// 或者 HTMLCanvasElement 对象。
}当使用图片的时候,可以使用&width&或&height&指定高宽,也可以不指定自适应。如果设置为&'auto',则为视觉映射得到的颜色,如系列色。geo.regions[i].label.normal.borderColor& &| & string[ default: 'transparent' ]文字块边框颜色。如果设置为&'auto',则为视觉映射得到的颜色,如系列色。geo.regions[i].label.normal.borderWidth& &| & number[ default: 0 ]文字块边框宽度。geo.regions[i].label.normal.borderRadius& &| & number, Array[ default: 0 ]文字块的圆角。geo.regions[i].label.normal.padding& &| & number, Array[ default: 0 ]文字块的内边距。例如:padding: [3, 4, 5, 6]:表示&[上, 右, 下, 左]&的边距。padding: 4:表示&padding: [4, 4, 4, 4]。padding: [3, 4]:表示&padding: [3, 4, 3, 4]。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。geo.regions[i].label.normal.shadowColor& &| & string[ default: 'transparent' ]文字块的背景阴影颜色。geo.regions[i].label.normal.shadowBlur& &| & number[ default: 0 ]文字块的背景阴影长度。geo.regions[i].label.normal.shadowOffsetX& &| & number[ default: 0 ]文字块的背景阴影 X 偏移。geo.regions[i].label.normal.shadowOffsetY& &| & number[ default: 0 ]文字块的背景阴影 Y 偏移。geo.regions[i].label.normal.width& &| & number, string文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见&backgroundColor)时,可能会使用它。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。width&也可以是百分比字符串,如&'100%'。表示的是所在文本块的&contentWidth(即不包含文本块的&padding)的百分之多少。之所以以&contentWidth&做基数,因为每个文本片段只能基于&content box&布局。如果以&outerWidth&做基数,则百分比的计算在实用中不具有意义,可能会超出。注意,如果不定义 rich 属性,则不能指定 width 和 height。geo.regions[i].label.normal.height& &| & number, string文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见&backgroundColor)时,可能会使用它。注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding;如果不定义 rich 属性,则不能指定 width 和 height。geo.regions[i].label.normal.textBorderColor& &| & string[ default: 'transparent' ]文字本身的描边颜色。如果设置为&'auto',则为视觉映射得到的颜色,如系列色。geo.regions[i].label.normal.textBorderWidth& &| & number[ default: 0 ]文字本身的描边宽度。geo.regions[i].label.normal.textShadowColor& &| & string[ default: 'transparent' ]文字本身的阴影颜色。geo.regions[i].label.normal.textShadowBlur& &| & number[ default: 0 ]文字本身的阴影长度。geo.regions[i].label.normal.textShadowOffsetX& &| & number[ default: 0 ]文字本身的阴影 X 偏移。geo.regions[i].label.normal.textShadowOffsetY& &| & number[ default: 0 ]文字本身的阴影 Y 偏移。geo.regions[i].label.normal.rich& &| & Object在&rich&里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。例如:label: {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// `{styleName|text content text content}` 标记样式名。
// 注意,换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
color: 'red',
lineHeight: 10
backgroundColor: {
image: 'xxx/xxx.jpg'
height: 40
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#;,
borderRadius: 4
}详情参见教程:既然 label 与 itemStyle&一样拥有&normal,emphasis&两个状态,那么,我们自然也可以通过 emphasis 状态来设置 ECharts 特定地图区域中的文本标签,其设置的方法可以参考本文内容,不再做过多的赘述。
意见反馈:
联系方式:
广告等垃圾信息
不友善内容
违反法律法规的内容
不宜公开讨论的政治内容2017年2月 总版技术专家分月排行榜第三
2017年5月 .NET技术大版内专家分月排行榜第一2017年4月 .NET技术大版内专家分月排行榜第一2017年3月 .NET技术大版内专家分月排行榜第一2017年2月 .NET技术大版内专家分月排行榜第一2016年10月 .NET技术大版内专家分月排行榜第一2016年8月 .NET技术大版内专家分月排行榜第一2016年7月 .NET技术大版内专家分月排行榜第一
2017年2月 总版技术专家分月排行榜第三
2017年5月 .NET技术大版内专家分月排行榜第一2017年4月 .NET技术大版内专家分月排行榜第一2017年3月 .NET技术大版内专家分月排行榜第一2017年2月 .NET技术大版内专家分月排行榜第一2016年10月 .NET技术大版内专家分月排行榜第一2016年8月 .NET技术大版内专家分月排行榜第一2016年7月 .NET技术大版内专家分月排行榜第一
匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。14:54 提问
echarts map中怎么显示省名称
我采用的是echrts官网的地图实例,现在需要地图上显示省名称,一直改不出来,请各位大神帮忙看一下。
var option = {
backgroundColor: '#1b1b1b',
color: ['gold','aqua','lime'],
tooltip : {
trigger: 'item',
formatter: '{b}'
dataRange: {
max : 2000,
calculable : true,
color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
textStyle:{
color:'#fff'
series : [
name: '全国',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itemStyle:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#1b1b1b'
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
[{name:'总部'},{name:'广东'}],#}
geoCoord: {
'上海': [121.1],
'新疆': [87.3],
'甘肃': [103.3],
'总部': [70.9],
'北京': [116.9],
'江苏': [118.8],
'广西': [108.479,23.1152],
'江西': [116.3],
'安徽': [117.29,32.0581],
'内蒙古': [111.1],
'黑龙江': [127.],
'天津': [117.9],
'山西': [112.3],
'广东': [113.6],
'四川': [103.7],
'西藏': [91.5],
'云南': [102.3],
'浙江': [119.3],
'湖北': [114.8],
'辽宁': [123.6],
'山东': [117.1],
'海南': [110.6],
'河北': [114.6],
'福建': [119.2],
'青海': [101.7],
'陕西': [109.4],
'贵州': [106.2],
'河南': [113.4],
'重庆': [107.4],
'宁夏': [106.5],
'吉林': [125.4],
'湖南': [113.8]
name: '总部 Top10',
type: 'map',
mapType: 'china',
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
itemStyle : {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/100
effect : {
show: true,
shadowBlur : 0
itemStyle:{
label:{show:true}
emphasis: {
label:{position:'top'}
按赞数排序
series: [{
type: 'map',
map: 'henan',
show: true
emphasis: {
show: true
在series中加上
show: true
emphasis: {
show: true
按照你的方法修改,没有解决这个省份名称显示的问题
其他相关推荐问题:ECharts 地图缩放级别问题
描述: @Kener-林峰 你好,想跟你请教个问题:
我想在echarts地图中让world类型的地图通过鼠标滚轮缩放到市级别,只有中国地图能显示到市级别,其他国家显示到省级就可以。
我看了下地图的代码,里面有rawData的geoJson,和编码后的geoJson js文件。如果我要是实现上面的需求是不是需要把中国地图里所有省份和市的geoJson合并到world_geo.js文件就可以了?合并后的rawData geoJson怎么编码成geo.js?&
非常感谢! 解决方案1:
你好,想跟你请教个问题:我这边有个需求和你的类似,我想问下你这个需求是怎么实现的?或者你那边的demo能否给我发一份参考下?其他国家的省级geojson数据能共享下么?这个数据我找了结果没找到下载的地方...谢谢解决方案2:引用来自“Kener-林峰”的评论响应缩放事件,重新驱动生成新的图表类型。解决方案3:引用来自“Kener-林峰”的评论响应缩放事件,重新驱动生成新的图表类型。解决方案4:响应缩放事件,重新驱动生成新的图表类型。解决方案5: 补充:按照文档里自定义扩展的方式已经可以显示上面的级别了,我把文件都合并都一起了。直接用的json文件。但是地图上显示的文字都重叠到一起了,能有什么办法让一些城市的名称在缩放到一定级别的时候才显示吗?谢谢&
以上介绍了“ECharts 地图缩放级别问题”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:/itwd/1526469.html
上一篇: 下一篇:

我要回帖

更多关于 echarts华中地区地图 的文章

 

随机推荐