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']
      });//结尾

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

你可能感兴趣的:(个人,js,vue.js)