echarts修改tootip样式:
应项目需求 数据的大小决定着tootip弹框的颜色
先在echarts中模拟实现:看效果: (Email 是名称 132 是实时数据)
看代码:
option = {
title: {
text: 'Stacked Line'
},
//主要代码==================================================
tooltip: {
trigger: 'axis',
backgroundColor: null,
borderRadius:30,
padding:0,
formatter: function(params) {
var result = '';
params.forEach(function (item) {
if (item.value < 120) {
result =`<div style="color:#ffffff;background:green;padding:10px;border-radius:30px">${item.seriesName} + ${item.value}</div>`;
}else if(item.value < 140) {
result =`<div style="color:#ffffff;background:red;padding:10px;border-radius:30px">${item.seriesName} + ${item.value}</div>`;
}else {
result =`<div style="color:#ffffff;background:purple;padding:10px;border-radius:30px">${item.seriesName} + ${item.value}</div>`;
}
});
return result;
}
},
//主要代码=====================================================
legend: {
data: ['Email']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
}
]
};
再送大家一套tootip:
tooltip: {
shadowColor: "rgba(0, 0, 0, 0)",
borderWidth: 0,
shadowBlur: 0,
confine: true,
trigger: "axis",
// triggerOn: "click", //点击触发tootip
// alwaysShowContent: false, //一段时间自动消失
backgroundColor: null,
borderRadius: 30,
borderColor: null,
padding: 0,
formatter: function (params) {
let result = "";
params.forEach((item) => {
if (item.value === undefined) {
result += `<div style="padding:54px 0;background:rgba(0,0,0,0)">
<div style="width:116px;text-align:center;line-height:32px;color:#ffffff;height:32px;background:green;border-radius:30px">
数值:--
</div>
</div>`;
} else {
result += `<div style="padding:54px 0;background:rgba(0,0,0,0)">
<div style="width:116px;text-align:center;line-height:32px;color:#ffffff;height:32px;background:green;border-radius:30px">
数值:${item.value}
</div>
</div>`;
}
});
return result;
},
position: function (point, params, dom, rect, size) {
return [point[0], "0%"];
// let obj = {top: "0%"};
// obj[['left', 'right'][+(point[0] < size.viewSize[0] / 2)]] = 5;
// return obj;
},
},