tooltip 提示框组件
tooltip的content部分默认是用html去绘制的,所以要使用div作为echarts的容器。
要使用canvas绘制,要必须使用canvas模式。
tooltip后如果渲染的元素是canvans,tooltip不能显示出来。
let options = {
tooltip: {},
xAxis: {
data: [1, 2, 3, 4, 5, 6],
},
yAxis: {},
series: [
{
id: 0,
name: "d1",
type: "line",
data: data.d1,
},
{
id: 1,
name: "d2",
type: "line",
data: data.d2,
},
],
};
<div id="canvas"></div>
renderMode 浮层的渲染模式
默认以 'html 即额外的 DOM 节点展示 tooltip;此外还可以设置为 ‘richText’ 表示以富文本的形式渲染。
使用富文本渲染模式, renderMode: “richText”,
let options = {
// html要用div做容器
tooltip: {
renderMode: "richText",
},
xAxis: {
data: [1, 2, 3, 4, 5, 6],
},
yAxis: {},
series: [
{
id: 0,
name: "d1",
type: "line",
data: data.d1,
},
{
id: 1,
name: "d2",
type: "line",
data: data.d2,
},
],
};
<div id="canvas"></div>
tooltip触发方式
trigger 触发位置
可选值:
1.item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
2. axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
3. none:什么都不触发。
triggerOn 触发方式
‘mousemove’,‘click’,‘mousemove|click’,‘none’
let options = {
// html要用div做容器
tooltip: {
renderMode: "richText",
triggerOn: "mousemove|click",
trigger: "axis",
},
xAxis: {
data: [1, 2, 3, 4, 5, 6],
},
yAxis: {},
series: [
{
id: 0,
name: "d1",
type: "line",
data: data.d1,
},
{
id: 1,
name: "d2",
type: "line",
data: data.d2,
},
],
};
tooltip样式和位置的修改
样式的调节
在html模式下可以使用className来调节,使用canvas模式就必须用富文本来调节。
使用className调节,有些样式在配置项里有,因此**要修改样式的优先级,**有些样式css里无法配置,要通过tooltip的配置项配置。
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle:{
color:"#fff"
}
},
<style>
//这里不要使用局部样式使用局部样式 就会变成 .content [xxxxxx],不好修改。
.content {
background-color: red !important;
}
</style>
位置的调节
可以通过position来调节位置,position设置的位置是固定的。
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle: {
color: "#fff",
},
position: [0, 0],
},
postion可以配合css来调整位置。
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle: {
color: "#fff",
},
position: [0, 0],
},
<style>
.content {
background-color: red !important;
left: 50% !important;
top: 50% !important;
}
</style>
postion 的函数形式
函数的形参
position: function () {
console.log(arguments);
},
第一个参数存放着当前鼠标所在的位置poiner,
第二个参数是data,
第三个参数是tooltip 的 dom 对象,
第四格式rect,只有鼠标在图形上时有效,是一个用x, y, width, height四个属性表达的图形包围盒。
第五个是size,包括 dom 的尺寸和 echarts 容器的当前尺寸
例子:设置tooltip的位置为鼠标所在的位置
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle: {
color: "#fff",
},
position: function (pointer, data, dom, rect, size) {
return [pointer[0], pointer[1]];
},
}
数值的调节
数值包括标题部分、前面的标题和后面的值。
formatter调节整个文字
valueFormatter可以单独调节value
formatter调节整个文字
字符串模板形式
模板变量有 {a}, {b},{c},{d},{e}
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle: {
color: "#fff",
},
position: function (pointer, data, dom, rect, size) {
return [pointer[0], pointer[1]];
},
formatter: "{a},{b},{c},{d}",
},
函数形式
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle: {
color: "#fff",
},
position: function (pointer, data, dom, rect, size) {
return [pointer[0], pointer[1]];
},
formatter: (params, callback) => {
console.log(params);
},
},
params:
使用valueFormatter要注释掉formatter
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle: {
color: "#fff",
},
position: function (pointer, data, dom, rect, size) {
return [pointer[0], pointer[1]];
},
/* formatter: (params, callback) => {
console.log(params);
},*/
valueFormatter: (value) => {
return value + "个";
},
},
formatter例子:给数据排序,tooltip的第一项展示当前销量的最大值
const data = {
d1: [11, 21, 3, 15, 22, 11],
d2: [14, 15, 16, 25, 12, 22],
};
let options = {
// html要用div做容器
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle: {
color: "#fff",
},
position: function (pointer, data, dom, rect, size) {
return [pointer[0], pointer[1]];
},
formatter: (params, callback) => {
console.log(params);
const myParams = params.sort((pre, now) => {
return now.data - pre.data;
});
return `<div>
<div>日期${myParams[0].axisValue}</div>
<div style="color:${myParams[0].color}">
<img src="./miaosha.png">
<span>${myParams[0].seriesName}</span>
<span>${myParams[0].data}</span>
</div>
<div style="color:${myParams[1].color}">
<img src="./daifukuan.png">
<span>${myParams[1].seriesName}</span>
<span>${myParams[1].data}</span>
</div>
</div>`;
},
},
xAxis: {
data: [1, 2, 3, 4, 5, 6],
},
yAxis: {},
series: [
{
id: 0,
name: "d1",
type: "line",
data: data.d1,
},
{
id: 1,
name: "d2",
type: "line",
data: data.d2,
},
],
};
指示器axiosPoiner
坐标轴指示器 axiosPoiner
坐标轴指示器是指示坐标轴当前刻度的工具。
tooltip: {
renderMode: "html",
triggerOn: "mousemove|click",
trigger: "axis",
className: "content",
textStyle: {
color: "#fff",
},
position: function (pointer, data, dom, rect, size) {
return [pointer[0], pointer[1]];
},
formatter: (params, callback) => {
console.log(params);
const myParams = params.sort((pre, now) => {
return now.data - pre.data;
});
return `<div>
<div>日期${myParams[0].axisValue}</div>
<div style="color:${myParams[0].color}">
<img src="./miaosha.png">
<span>${myParams[0].seriesName}</span>
<span>${myParams[0].data}</span>
</div>
<div style="color:${myParams[1].color}">
<img src="./daifukuan.png">
<span>${myParams[1].seriesName}</span>
<span>${myParams[1].data}</span>
</div>
</div>`;
},
axisPointer: {
show: true,
type:'shadow'
},
},
series里的数据也可以配置tooltip
series里的数据也可以配置tooltip,但是触发的时候只有一个,只能通过修改触发方式,来使两个都触发。如果同时触发的话图标自己的优先级大于tooltip公共设置的,
let options = {
// html要用div做容器
tooltip: {
renderMode: "html",
triggerOn: "mousemove",
trigger: "item",
className: "content",
textStyle: {
color: "#fff",
},
position: function (pointer, data, dom, rect, size) {
return [pointer[0], pointer[1]];
},
axisPointer: {
show: true,
type: "shadow",
},
},
xAxis: {
data: [1, 2, 3, 4, 5, 6],
},
yAxis: {},
series: [
{
tooltip: {
renderMode: "html",
triggerOn: "click",
trigger: "item",
formatter: "{a},{b},{c}",
},
id: 0,
name: "d1",
type: "line",
data: data.d1,
},
{
id: 1,
name: "d2",
type: "line",
data: data.d2,
},
],
};