1 字符串模板
模板变量有 {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:'{b0}: {c0}<br />{b1}: {c1}'
2 回调函数
回调函数格式：
(params:Object|Array,ticket: string,callback:(ticket: string, html: string)) =>string | HTMLElement | HTMLElement[]
支持返回 HTML 字符串或者创建的 DOM 实例。
第一个参数 params 是 formatter 需要的数据集。格式如下：
{
componentType:'series',
// 系列类型
seriesType: string,
// 系列在传入的 optionseries 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data:Object,
// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
value: number|Array|Object,
// 坐标轴 encode 映射信息，
// key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
// value 必然为数组，不会为 null/undefied，表示 dimension index 。
// 其内容如：
// {
// x: [2] // dimension index 为 2 的数据映射到 x 轴
// y: [0]
// dimension index 为 0 的数据映射到 y 轴
// }
encode:Object,
// 维度名列表
dimensionNames:Array,
// 数据的维度
index，如 0 或 1 或 2
// 仅在雷达图中使用。
dimensionIndex: number,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}
详情见 (echarts------tool--formatter)对各部分内容的认知
title--}}图标的标题内容
text--》主标题文字
subtext--》副标题文字
left-------》主标题文字的对其方式：left，center，right
x---------》主标题文字的水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y---------》主标题文字垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
textStyle--}}主标题文本样式
fontSize------》主标题文字大小（单位px）
color---------》 主标题文字的颜色
fontWeight--》文字字体的自重（粗细）
series---}}所用图表的系列
type-----》图表类型
---》type=line ——-折线图
---》type=bar ——-折线图
---》type=pie ——-饼图
radius--》圆的半径
---》['60%','50%']（第一项为圆环内半径，第二项是外半径）
---》'50%' 由空心圆变为实心圆
center--》圆在画布的位置
---》['50%','50%']（第一项为圆在画布中左右的距离，数值由小到大，方向是由左至右）
（第二项为圆在画布中上下的位置，数值由小到大，方向是由上至下）
clockWise : false, //默认逆时针（标题文字显示的角度）
minAngle: 5,//最小扇区角度（0 ~ 360）
startAngle:150, //起始角度（0-360）
emphasis---}} 鼠标移入动态的时候显示的默认样式
avoidLabelOverlap: false,//是否启用防止标签重叠策略，默认默认开启
hoverAnimation---》点击放大（开启为true，关闭为false）
labelLine---}}指示线
show---》指示线显示隐藏（显示为true，隐藏为false）
length---》线段的长度
lineStyle---}}指示线的样式
width---》线条的宽度
color---》线条的颜色
opacity---》线条的透明度（范围0-1，0为完全透明）
label---}}副文本
formatter---》格式化图例文本（ '{b}\n {d}%'）这里是数据项名称+换行+百分比显示
其中{b}{d}为字符串模板
在不同的图表类型下，含义也不一样
折线（区域）图、柱状（条形）图、K线图 :{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无）
散点图（气泡）图 :{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无）
地图 :{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
饼图、仪表盘、漏斗图:{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
data---》数组对象
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）