echarts没有数据时显示暂无数据
if(resp.data && resp.data.length > 0){
... 初始图表
}else{
this.$nextTick(()=>{
this.$refs.electricityTrendAndPredictBar.innerHTML = "暂无数据";
this.$refs.electricityTrendAndPredictBar.style.textAlign = "center";
this.$refs.electricityTrendAndPredictBar.style.lineHeight = "350px";
this.$refs.electricityTrendAndPredictBar.removeAttribute('_echarts_instance_');
})
}
参考博客:https://www.jianshu.com/p/ea7909f7b65c
echarts标题(legend)过多时分页显示
//图例--折线提示提示
legend: {
x: 'center',
y: '20',
type: 'scroll', //分页类型
orient: "horizontal", // horizontal 横向排列 vertical 纵向排列
borderColor: '#6699FF', //边框颜色
textStyle: {
color: '#1e90ff' // 图例文字颜色
},
data: []
},
echarts自定义tooltip显示
tooltip: {
trigger: "axis",
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter : function(params){
let tip = params[0].name ;
for(let i = 0;i < params.length; i++) {
if(i === params.length - 1){
tip += '<br>' + params[i].marker + " " + params[i].seriesName+': ' + params[i].value + '%';
}else{
tip += '<br>' + params[i].marker + " " + params[i].seriesName+': ' + params[i].value;
}
}
return tip;
}
},
.end