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,

rich: {

a: {

// 没有设置 `align`,则 `align` 为 right

}

}

}

geo.regions[i].label.normal.verticalAlign   |   string

文字垂直对齐方式,默认自动。

可选:'top'

'middle'

'bottom'

rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。例如:{

verticalAlign: bottom,

rich: {

a: {

// 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom

}

}

}

geo.regions[i].label.normal.lineHeight   |   number

文本标签的行高。

rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:{

lineHeight: 56,

rich: {

a: {

// 没有设置 `lineHeight`,则 `lineHeight` 为 56

}

}

}

geo.regions[i].label.normal.backgroundColor   |   string, Object

[ default: 'transparent' ]

文字块背景色。

可以是直接的颜色值,例如:'#123234', '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: {

normal: {

// 在文本中,可以对部分文本采用 rich 中定义样式。

// 这里需要在文本中使用标记符号:

// `{styleName|text content text content}` 标记样式名。

// 注意,换行仍是使用 '\n'。

formatter: [

'{a|这段文本采用样式a}',

'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'

].join('\n'),

rich: {

a: {

color: 'red',

lineHeight: 10

},

b: {

backgroundColor: {

image: 'xxx/xxx.jpg'

},

height: 40

},

x: {

fontSize: 18,

fontFamily: 'Microsoft YaHei',

borderColor: '#449933',

borderRadius: 4

},

...

}

}

}

详情参见教程:富文本标签

既然 label 与 itemStyle 一样拥有 normal,emphasis 两个状态,那么,我们自然也可以通过 emphasis 状态来设置 ECharts 特定地图区域中的文本标签,其设置的方法可以参考本文内容,不再做过多的赘述。

echarts地图地名显示_ECharts特定地图区域的文本标签相关推荐

  1. echarts地图地名显示_echarts地图 省份名称自定义位置和居中解决办法

    Echarts 中国地图热力图 开发过程中发现省会名字堆在一起毫无美感 便集众家之所长review一下 首先呢,地图上显示名称的位置为其省会的坐标位置.所以在调整的时候修改其坐标位置来调整省会名称显示 ...

  2. echarts legend不显示_ECharts地图系列一(定制区域水波纹显示,以及其他区域圆点颜色不统一)...

    Echarts水波纹地点显示,以及颜色点随机系列篇 在现今的前端开发中,图表的展示是不可或缺的,也会接触到一些地图区域的展示,例如,现实场景下,需求需要现实当今公司在全国乃至世界的分部分布情况,这时就 ...

  3. echarts label固定位置_ECharts+百度地图网络拓扑应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  4. 谷歌地图地名显示繁体字_阴阳师犬夜叉铁碎牙隐藏机制 犬夜叉铁碎牙隐藏技能介绍...

    在阴阳师手游中,犬夜叉作为SSR式神一直被玩家吐糟,求夜叉的输出实在是太慢热了,而且技能相比其他SSR式神输出式神技能效果也非常一般,那么大家知道犬夜叉还有铁碎牙隐藏机制吗?下面小灯就给大家详细介绍一 ...

  5. 高德地图开发手册 php,地图控件-参考手册-地图 JS API | 高德地图API

    在线插件是在基础地图服务上增加的额外功能,您可以根据自己的需要选择添加.插件分为两类:一类是地图控件,它们是用户与地图交互的UI元素,例如缩放控制条(ToolBar)等:一类是功能型插件,用来完成某些 ...

  6. html 调高德地图 导航,地图控件-参考手册-地图 JS API | 高德地图API

    在线插件是在基础地图服务上增加的额外功能,您可以根据自己的需要选择添加.插件分为两类:一类是地图控件,它们是用户与地图交互的UI元素,例如缩放控制条(ToolBar)等:一类是功能型插件,用来完成某些 ...

  7. echart 地图 某个地区_ECharts设置特定的地图区域

    geo.regions[i]   |   Object 在地图中对特定的区域配置样式. 例如:regions: [{ name: '广东', itemStyle: { normal: { areaCo ...

  8. echarts中在地图上显示label时的阴影问题

    先来贴一张最终效果图: 对应的option是这样的 option = {backgroundColor: 'rgb(55, 105, 0, .2)',title: [{text: '测试',left: ...

  9. 关于echarts实现地图并显示各省份名称及不同块显示不同原因,最后循环播放tooltip信息

    最近接到这个需求,要把一些数据展示在地图上,并且能够自动播放,毕竟这是个大屏数据的项目,话不多少,直接上代码 首先是要实现一个地图,显示每个省份的名字,首先准备要渲染的数据,根据你自己要求,接口返回的 ...

最新文章

  1. windows 7作为微软对抗Google的秘密武器
  2. linux pidof 进程名称查进程id
  3. docker latest标签问题
  4. LeetCode Palindrome Linked List
  5. SQL 进阶技巧(下)
  6. codeforces229 D. Towers(dp+贪心)
  7. ZDB5202烧成控制器方法
  8. cygwin开发环境搭建与apt-cyg的应用
  9. XP系统访问win7共享文件夹教程和提示没有权限的解决办法
  10. 2020,我的年终总结(附优惠券)
  11. 百度手机输入法中的五笔9键盘有问题?
  12. 推荐PDG阅读器UnicornViewer
  13. qemu-nbd挂载虚拟机镜像文件系统
  14. 3.汇编指令:【寻址方式】立即数寻址、寄存器寻址、存储器寻址
  15. 1013: 【顺序结构】数字各位分割
  16. Oracle VirtualBox 6.1.18 安装扩展包
  17. 虾皮入驻后怎么经营才能:快速出单?
  18. Presenting view controllers on detached view controllers is discouraged的解决方案
  19. 如何利用微信活码快速裂变100个微信群?
  20. matlab迭代实现矩阵运算,用matlab实现Rayleigh迭代计算矩阵特征值的程序

热门文章

  1. python调用第三方库需要联网吗_离线环境安装python第三方库
  2. 18周过后~(学期总结)
  3. 梦回江南 烟雨朦胧中 相思泪 不常有
  4. mysql首字母大写函数_string - 首字母大写。MySQL的
  5. Java笨狗的C/C++
  6. 使用ansible统一管理修改Linux和Windows管理员密码
  7. c 管理信息系统mysql,输入数据并输出信息的系统都称为()。A、信息系统B、数据库系统C、事务处理系统D、管理信息系统...
  8. php八字喜用神实现博客,八字喜用神测算方法
  9. Linux OS: Write Barriers
  10. Java中的所有关键