echart 没有数据的时候,完美展示暂无数据

echart 没有数据的时候,展示暂无数据

data(){
	return {
	show:null,
	}
}
在你掉接口拿数据去渲染chart图标的时候,渲染数据的时候判断一下
if(allLastValue.tzList.length===0 && allLastValue.bMIList.length===0){
    show=true;
   }
var myCharts = echarts.init(document.getElementById('myCharts'+item.nursederId));
      console.log(myCharts);
      // 绘制图表
      myCharts.setOption({
          tooltip: {
            trigger: 'axis'
          },
          //运用echart中的title
          title:{
            show:show,//show 可以在上面顶一个一个 let show = null;
            textStyle: {
              color:"#fff",
              fontSize: 12,
              fontWeight:100
            },
            text: this.noting,//这个你可以定义一个变量,也可以直接写死'暂无数据'
            left: "center",
            top: "center"
          },
          legend: {
            // orient: 'vertical',
            // x: 'right',
            textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: 12,
            },
            data:legendValue
          },
          grid: {
              top:'15%',
              left: '3.5%',
              right: '3%',
              bottom: '1%',
              containLabel: true,
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  textStyle: {
                      color: '#fff'
                  },
              },
              data: timeList.map(function (str) {
                    return str.replace(' ', '\n')
                })
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                  textStyle: {
                      color: '#fff'
                  }
              },
          },
          series: seriesValue,
          color: ['#EE3847','#0CC456','#DA01EE','#F8C420']
      });//结尾

以上,有什么不明白的小伙伴可以给我留言,当然有更好的可以分享哦!

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值