echarts 无数据时提示文字

需求：要求图表没有数据时，文字提示“暂无数据”

思路：使用echarts的title做提示，通过有无数据，设置title的show属性为true / false

 

echarts 设置 title的API：

https://echarts.apache.org/zh/option.html#title

 

效果图：

①没数据时显示文字“暂无数据”

 

②有数据时：

 

代码：

HTML:





JS:

// 这里判断后端有无值，设置是否显示title
let showed = this.list.data.length ? false : true

var echarts = require('echarts')
let myCharts = echarts.init(document.getElementById('main'))
let bingOption = {
    title: {
        show: showed, // 是否显示title
        text: '暂无数据',
        left: 'center',
        top: 'center',
        textStyle: {
            color: 'pink',
            fontSize: 16,
            fontWeight: 400
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        data: this.list.example
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.list.data,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
myCharts.setOption(bingOption, true)