Echarts实现“暂无数据”的几种方案
生活随笔
收集整理的這篇文章主要介紹了
Echarts实现“暂无数据”的几种方案
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
如題，本文用于記錄 Echarts 實(shí)現(xiàn) 暫無數(shù)據(jù) 的幾種方式。
以下幾種實(shí)現(xiàn)方式的 HTML 代碼均如下：
<div id="noData" style="width: 100%;height:400px;"></div>通過 title 配置項(xiàng)來實(shí)現(xiàn)
const init = (data) => {const myChart = echarts.init(document.getElementById('noData'))const option = {title: {show: !data.length, // 無數(shù)據(jù)時(shí)展示 titletextStyle: {color: 'black',fontSize: 26},text: '暫無數(shù)據(jù)',left: 'center',top: 'center'},xAxis: {show: data.length, // 無數(shù)據(jù)時(shí)不展示 x 軸type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data,type: 'line'}]}myChart.setOption(option) } // const data = [150, 230, 224, 218, 135, 147, 260] const data = [] init(data)通過 showLoading API 來實(shí)現(xiàn)
const init = (data) => {const myChart = echarts.init(document.getElementById('noData'))const option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data,type: 'line'}]}myChart.setOption(option)if (!data.length) {myChart.showLoading({text: '暫無數(shù)據(jù)',showSpinner: false,textColor: 'black',maskColor: 'rgba(255, 255, 255, 1)',fontSize: '26px',fontWeight: 'bold'})} else {myChart.hideLoading()} } // const data = [150, 230, 224, 218, 135, 147, 260] const data = [] init(data)有數(shù)據(jù)時(shí)記得調(diào)用 hideLoading() 否則圖表將無法展示。
附：showLoading API
通過 graphic 配置項(xiàng)來實(shí)現(xiàn)
const init = (data) => {const myChart = echarts.init(document.getElementById('noData'))const option = {xAxis: {show: data.length, // 無數(shù)據(jù)時(shí)不展示 x 軸type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data,type: 'line'}],graphic: {type: 'text',left: 'center',top: 'middle',silent: true,invisible: data.length,style: {fill: 'black',fontWeight: 'bold',text: '暫無數(shù)據(jù)',fontSize: '26px'}}}myChart.setOption(option) } // const data = [150, 230, 224, 218, 135, 147, 260] const data = [] init(data)這種方式的實(shí)現(xiàn)原理是在圖表上再增加一個(gè)圖層，圖層上寫著暫無數(shù)據(jù)的提示，如果想要展示圖片的話也是可以的，比較靈活，所以個(gè)人認(rèn)為這種方式是最佳的解決方案。
附：graphic 配置項(xiàng)手冊
總結(jié)
以上是生活随笔為你收集整理的Echarts实现“暂无数据”的几种方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php 微信怎么清除缓存,前端清除缓存方
- 下一篇： 绿点 | 区块链介入下的绿色经济 x