? ? ? ? ? ?1:字符串模板
?模板变量有?{a} ,?{b} ,{c} ,{
目录
formatter:格式化提示框,两种形式。
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} (百分比)
? ? ? ? 2:回调函数(可以参考最新文档,这里搬运文档)
{ ? ? componentType: 'series', ? ? // 系列类型 ? ? seriesType: string, ? ? // 系列在传入的 option.series 中的 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<String>, ? ? // 数据的维度 index,如 0 或 1 或 2 ... ? ? // 仅在雷达图中使用。 ? ? dimensionIndex: number, ? ? // 数据图形的颜色 ? ? color: string, ? ? // 饼图的百分比 ? ? percent: number, }
????????
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
},
},
/*
a 是legend中对应的data数据
b xAxis(x轴)对应的data数据
c series对应的data数据
d 当饼图、仪表盘、漏斗图才有d 为百分比
*/
// 方式一:字符串拼接
// formatter:'{a0}:{b0}:{c0}:{d0}</br>{a1}:{b1}:{c1}</br>{a2}:{b2}:{c2}'
// 方式二:回调函数
formatter:(params)=>{
let str = ''
params.forEach((item,index)=>{
str +=params[index]['seriesName']+':'+params[index].value+"$"
})
return str
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['蒸发量', '降水量', '平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
position:'right',
axisLabel: {
formatter: '{value} °C'
}
},
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
// yAxisIndex: 1,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
?
?
|