echarts にデータがない場合は、データが表示されないか、代わりに画像が使用されます。

1. まだデータを表示していません

参考(メッセージ 26 件) ECharts の新バージョンは「まだデー​​タがない」場合の完璧なソリューションです_Harryfin のブログ - CSDN ブログ_echarts にデータがない場合の表示方法

graphic: {
    type: 'text',     // 类型：文本
    left: 'center',
    top: 'middle',
    silent: true,     // 不响应事件
    invisible: data.length > 0,   // 有数据就隐藏
    style: {
        fill: '#9d9d9d',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '25px'
    }
}

2. 画像の差し替え

//首先引入图片 
import noData from '../../../../assets/images/dataMissed.png'
//配置
if (this.Arr.length == 0) {//无数据
                        const noDataImg = noData // 暂无数据图片路径
                        const averageChart = document.getElementById('average-chart')
                        averageChart.style.display = 'flex'
                        averageChart.style.flexDirection = 'column'
                        averageChart.style.justifyContent = 'center'
                        averageChart.style.alignItems = 'center'
                        averageChart.removeChild(averageChart.firstChild) // 移除
                        const mainImg = document.createElement('img') // 添加要显示的图片
                        averageChart.appendChild(mainImg)
                        mainImg.style.width = 'auto'
                        mainImg.style.height = 'auto'
                        mainImg.src = noDataImg
                        const pBlock = document.createElement('p')//添加p标签
                        averageChart.appendChild(pBlock)
                        pBlock.innerHTML = '暂无数据'
                        pBlock.style.color = '#999999'
                    } else {
                        let aveShow = false//小于8条数据不显示滚轮
                        if (this.subNameArr.length > 8) {
                            aveShow = true
                        }
                        averageChart.setOption({
                                ....
                        })//开始配置
                    }

3. 効果を実感する

データがある場合：

データがない場合：