1.tooltip数据过多悬浮框被遮挡,以及数据显示不全的解决办法
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
//把将 tooltip 的 DOM 节点添加为 HTML 的 的子节点
appendToBody: true,
//可以进入tooltip
enterable: true,
//设置tooltip样式
formatter: function (params) {
let str = '';
for (let i = 0; i < params.length; i++) {
str += '<p>' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>';
}
const tooltipHtml =
'<div style="width:fit-content;padding-right:20px;max-height:200px;overflow-y:auto">' +
params[0].axisValue +
str +
'</div>';
return tooltipHtml;
},
},
2.无数据时置灰占位
lengend:{
inactiveColor:'#8e8e8e' //未点击label时的颜色
}
series:[{
emptyCircleStyle:{
color:'#8e8e8e' //数据为空时饼图颜色
}
}]
3.后端给予数据格式为[],但是需要将lenged全部显示且禁止点击,将数据补全[{name:"',value:0}]后在配置项中添加以下代码:
const selected = {};
const isEmpty = data.every((it) => !it.value);
if (isEmpty) {
for (const it of data) {
selected[it.name] = false;
}
}
legend: {
selected,
selectedMode: !isEmpty
}
4.一个页面内切换饼图时需要重绘,可以在setOption中加上第二个参数true
chart.setOption(initOption, true); //chart是元素画布ref