ECharts中常用的标签
ECharts中常用的标签
title标签
title是标题组件，包含主标题和副标题,在这个标签里可以设置字体的大小、颜色和格式
title:{
show: true,
id: 1,
text: '主标题',
link: 'www.baidu.com',
target: 'blank',
textStyle: {
color: 'red',
fontStyle: 'italic',
fontWeight: 'bolder',
fontFamily: 'serif',
fontSize: 18,
lineHeight:20,
width: 20
},
subtext: '副标题',
sublink: 'www.baidu.com',
subtarget: 'self',
subtextStyle:{},
textAlign: 'left',
textVerticalAlign: 'auto',
padding: 5,
itemGap:30,
top: 20,
backgroundColor:'blue',
borderColor:'black',
borderWidth:2
}
每一个标签的含义
id标签
- 组件
ID。默认不指定。指定则可用于在option或者API中引用组件
show标签
- 是否显示标题组件
text标签
- 主标题文本，支持使用
\n换行。
link标签
- 主标题文本超链接，点击即可跳转
target标签
-
指定窗口打开主标题超链接
-
'self'当前窗口打开 -
'blank'新窗口打开
subtext标签
- 副标题文本，支持使用
\n换行。
sublink
- 副标题文本超链接。
subtarget
-
指定窗口打开副标题超链接，可选：
-
'self'当前窗口打开 -
'blank'新窗口打开
textAlign标签
- 整体（包括 text 和 subtext）的水平对齐,可选值：
'auto'、'left'、'right'、'center'。
textVerticalAlign标签
- 整体（包括 text 和 subtext）的垂直对齐,可选值：
'auto'、'top'、'bottom'、'middle'。
padding标签
-
标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
-
使用示例
// 设置内边距为 5 padding: 5 // 设置上下的内边距为 5，左右的内边距为 10 padding: [5, 10] // 分别设置四个方向的内边距 padding: [ 5, // 上 10, // 右 5, // 下 10, // 左 ]
itemGap标签
- 主副标题间的间距
left、right、top、bottom标签
- title 组件离容器的距离，它的值 的值可以是像
20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比。默认自适应（’auto’）。
backgroudColor标签
- 标题背景色，默认透明。
颜色可以使用 RGB 表示，比如
'rgb(128, 128, 128)'，如果想要加上 alpha 通道，可以使用 RGBA，比如'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如'#ccc'
borderColor标签
- 标题的边框颜色。支持的颜色格式同
backgroundColor。
borderWidth标签
- 边框的线宽
textStyle和subtextStyle两个标签是大标签，也就是说，下面的子标签都需要写在这两个标签里面
color子标签
- 标题的颜色，形式如上面的背景
fontStyle子标签
- 标题文件字体的风格
- 可选：
'normal'（正常）、'italic'（斜体）、'oblique'
fontWeight子标签
- 标题字体的粗细
- 可选：
'normal'、'bold'、'bolder'、'lighter'
fontFamily子标签
- 主标题文字的字体系列。还可以是 ‘
serif’ ,'monospace','Arial','Courier New','Microsoft YaHei', …
fontSize子标签
- 主标题文字的字体大小。
lineHeight子标签
-
行高
-
rich中如果没有设置lineHeight，则会取父层级的lineHeight。例如：{ lineHeight: 56, rich: { a: { // 没有设置 `lineHeight`，则 `lineHeight` 为 56 } } }
width子标签
- 显示文本宽度
height子标签
- 显示文本高度
legend
这是图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
show:true,
type:'scroll',
right: 'auto',
width:'auto',
origin:'vertical',
align:'auto',
padding:5,
itemGap:10,
itemWidth:25,
textStyle:{}
}
很多标签的含义显而易见，就不做赘述了,下面着重简绍formatter标签
formatter用来格式化图例文本，支持字符串模板和回调函数两种形式。
// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
return 'Legend ' + name;
}
tooltip
提示框
提示框组件可以设置在多种地方：
- 可以设置在全局，即
tooltip - 可以设置在坐标系中，即
grid.tooltip、polar.tooltip、single.tooltip - 可以设置在系列中，即
series.tooltip - 可以设置在系列的每个数据项中，即
series.data.tooltip
tooltip: {
show:true,
trigger: 'item',
axisPointer:{
type: 'cross'
},
formatter:'{a} <br/>{b} : 数量:{c}'
}
trigger标签
选择触发类型。
可选：
-
'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
-
'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
-
'none'什么都不触发。
axisPointer标签
-
坐标轴指示器配置项。
axisPointer: { type: 'cross' }type是指示器类型可选
-
'line'直线指示器
-
'shadow'阴影指示器
-
'none'无指示器 -
'cross'十字准星指示器。其实是种简写，表示启用两个正交的轴的axisPointer。
-
formatter标签
提示框浮层内容格式器
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
- 折线（区域）图、柱状（条形）图、K线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） - 散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） - 地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无） - 饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
示例：
formatter:'{a} <br/>{b} : 数量:{c}'
xAxis和yAxis
直角坐标系grid中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
xAxis: {
show: true,
position:'bottom',
offset:10,
type: 'category',
name:'日期',
inverse:true,
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
type标签
坐标轴类型。
可选：
'value'数值轴，适用于连续数据。'category'类目轴，适用于离散的类目数据。为该类型时类目数据可自动从series.data或dataset.source中取，或者可通过xAxis.data设置类目数据。'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log'对数轴。适用于对数数据。
inverse标签
是否设置成反向抽
boundaryGap标签
坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：
boundaryGap: ['20%', '20%']
data标签
类目数据，在类目轴（type: 'category'）中有效。
如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如series.data为空时，就什么也获取不到。
示例：
// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
value: '周一',
// 突出周一
textStyle: {
fontSize: 20,
color: 'red'
}
}, '周二', '周三', '周四', '周五', '周六', '周日']
min和max标签
坐标轴刻度最值。
可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。
当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
min: function (value) {
return value.min - 20;
}
interval标签
强制设置坐标轴分割间隔。
不同种类图的区别
ECharts作图中Series主要有两种区别，一种是有X、Y轴的，这样的表传输的数据都是List列表，如柱状图、折线图等等……`
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
还有一种就是无序的，类似于饼图、雷达图和地图，他没有坐标轴，所以数据不能以list的方式传输
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
这个时候也不需要xAsix和yAxis
向这种我们可以使用循环输入数值，具体可看饼图数据的动态读取
扫一扫
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
