echarts无数据的展示内容,用graphic属性配置
当echarts无数据的时候,图表展示的是个空白部分,感觉会有点丑,影响页面美观,这时候翻阅了echarts的官网,让我找到个配置项,试试发现还可以,:需要的可以直接复制修改,代码如下:
option = {
legend: {
data: []
},
tooltip: {
trigger: 'axis',
formatter: '{value} C'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
show: false,
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
yAxis: {
show: false,
type: 'category',
axisLine: { onZero: false },
axisLabel: {
formatter: '{value} km'
},
boundaryGap: true,
data: []
},
graphic: [
{
type: 'text', // 类型:文本
left: 'center',
bottom: '150px',
silent: true, // 不响应事件
invisible: 0, // 有数据就隐藏 注:只需要判断这里的值为0 还是为1
style: {
fill: '#9d9d9d',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '24px'
}
},
{
type: 'image', // 类型:文本
left: 'center',
bottom: '200px',
invisible: 0, // 有数据就隐藏 注:只需要判断这里的值为0 还是为1
style: {
width: 150,
height: 150,
image:
'http://img.mp.itc.cn/upload/20170724/cf678e09eb384401aa616ba134126357_th.jpg'
}
}
],
series: []
};
有无数据的时候 ,只需要判断 graphic的invisible的值即可 ,比如判断数据的为空的时候invisible = 0,有数据的时候 invisible = 1。
无数据展示的效果如下图