首页 > 其他分享 >vue2和vue3使用echarts时无数据,怎么显示暂无数据图片或文字

vue2和vue3使用echarts时无数据,怎么显示暂无数据图片或文字

时间:2023-09-18 13:23:15浏览次数:51  
标签:style const averageChart pBlock mainImg vue2 vue3 echarts

一开始也经历了用v-if和v-show,v-show的话echarts还会留出暂无数据图片的位置,导致echarts变形,v-if在加载和不加载切换时,dom会获取不到;后来也是在网上找的方法,时间有点长,原文地址就不贴了。

对了,在网上查方法的时候还找到了echarts  noDataLoading这个方法,按照网上的写完,但是并没有起作用,不知道是方法移除了还是其他问题,后面实现了也没管它

 

vue2

echarts版本:4.9.0

默认你的echarts已经注册在全局,可以在组件中用this.$echarts()访问到(注册比较简单不细说)

html代码

<div id="mychart"  style="width: 100%;height: 100%"></div>

script代码

import noData from '@/assets/nodata.png'

 

//ajax获取数据,判断数据为不为空,为空展示暂无数据,不为空则展示echarts

    if(res.data.length){
      this.initEcharts(res.data);
    }else{
      this.showNoData('mychart')
    }

 

//暂无数据的方法

showNoData(id){
  const noDataImg = noData // 暂无数据图片路径
  const averageChart = document.getElementById(id)
  averageChart.style.display = 'flex'
  averageChart.style.flexDirection = 'column'
  averageChart.style.justifyContent = 'center'
  averageChart.style.alignItems = 'center'
  if(averageChart.firstChild){
    averageChart.innerHTML=''
  }// 移除
  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 = '#2c3e50';
  averageChart.removeAttribute('_echarts_instance_')
},

//渲染echarts

initEcharts(data){
  let dom = document.getElementById("mychart");
  let mychart = this.$echarts.getInstanceByDom(dom)

  //注意一下这里,我的项目里可以选择时间,暂无数据图片和echarts来回切换,所以这里就要判断有没有echarts,因为在showNoData方法里有清除元素,不加的话会报错
  if(mychart == null){
    mychart = this.$echarts.init(dom)
  }

  //数据处理就不写了 最后把组好的option set进去就行了
  mychart.setOption(你的option);
},

vue3

vue3我的使用场景跟vue2不太一样,3中没有时间选择框不需要切换echarts和图片(如有需要可以参考上面vue2的方法),echarts的数据是从父组件传过来的,所以要监听数组的变化(watch)并且dom也得存在(nextTick )

html代码

<div ref="bar" style="width: 100%; height: 100%"></div>

script setup代码

import noData from '../../../assets/nodata.png'

import { ref, watch, nextTick } from 'vue'

import * as echarts from 'echarts';

 

const props = defineProps({
  data:{ type:Array, default:[]},
})

 

const bar = ref()

const initCharts = ()=>{

  let barCharts = echarts.init(bar.value);
  if(props.data.length){
    barCharts.setOption(option)//用自己的option
  }else{
    showNoData(bar.value)
  }

 

}

const showNoData = (ele) => {
  const noDataImg = noData // 暂无数据图片路径
  const averageChart = ele
  averageChart.style.display = 'flex'
  averageChart.style.flexDirection = 'column'
  averageChart.style.justifyContent = 'center'
  averageChart.style.alignItems = 'center'
  if(averageChart.firstChild){
    averageChart.innerHTML=''
  }// 移除
  const mainImg = document.createElement('img') // 添加要显示的图片
  averageChart.appendChild(mainImg)
  mainImg.style.width = '60px'
  mainImg.style.height = '55px'
  mainImg.src = noDataImg
  const pBlock = document.createElement('p')//添加p标签
  averageChart.appendChild(pBlock)
  pBlock.innerHTML = ''
  pBlock.style.color = '#2c3e50';
  averageChart.removeAttribute('_echarts_instance_')
}

watch(

  ()=>props.data,
  async(newValue)=>{
    await nextTick()
    initCharts()
  },
  {immediate:true,deep:true}

)

ok,到这里问题已解决

 

标签:style,const,averageChart,pBlock,mainImg,vue2,vue3,echarts
From: https://www.cnblogs.com/feng-1212/p/17711631.html

相关文章

  • 从零开始使用vue2+element搭建后台管理系统(动态表单实现(含富文本框))[待完善]
    在后台项目的实际开发过程中,涉及到表单的部分通常会使用动态渲染的方案进行实现,由后端接口返回表单配置,前端进行遍历渲染。考虑到通用后台需要具备的功能,除了基础的表单项如输入、下拉、多选、开关、时间、日期等,还需要具备上传、富文本框等功能。首先导入一个百度来的富文本框插......
  • vue3项目rem自适应大小如何实现
    ❝rem自适应方案只是页面自适应的解决方案之一,本文主要讲解一下实现过程!本文演示的是Vue3语法!❞rem自适应随着现在互联网设备的日益更新,各大尺寸的屏幕参差不穷导致我们的布局在某些小屏或者大屏上与UI的表现并不一致所以,很多人寻求各种解决方案,我们现在的很多移动端框架都是支持......
  • 关于vue2的模块级总结
    前阵子在赶一个项目的进度,一直没时间做总结,今日闲来无事,消化一下。背景vue2的项目,面向受众为g端内容1.项目原因,单路由下包含详情&列表两页面。根据v-if跳转,笔者这里用的是动态组件的方式2.同样由于项目原因,使用的模块级vuex,因而在使用时,也有了许多盲点:(如图:)使用createNa......
  • vue3中验证手机号的正则表达式
    在Vue3中,你可以使用正则表达式来验证手机号。以下是一个基本的手机号验证正则表达式示例,可以用于检查中国大陆地区的手机号码:constphoneNumberRegex=/^1[3456789]\d{9}$/;//示例用法constphoneNumber="13812345678";if(phoneNumberRegex.test(phoneNumber)){cons......
  • vue2 使用tinymce编辑器实现上传图片及粘贴word文本保留格式并粘贴图片自动上传
    下载对应的版本 npminstall@tinymce/[email protected]@5.8.2-S然后在node_modules中找到tinymce把整个文件复制下来粘到public中 在组件页面使用根据自己需求进行注释或添加功能<template><divclass="tinymce-editor"><Editor:......
  • vue3探索——pinia高阶使用
    以下是一些Pinia的其他高阶功能:storeToRefs():响应式解构仓库,保证解构出来的数据是响应式的数据。状态持久化:Pinia并没有内置的状态持久化功能,但你可以使用第三方库或自定义插件来实现状态的持久化。例如,你可以使用 localStorage 或 sessionStorage 来将状态保存在客户端......
  • vue3-路由遇到的问题
    在Vue3中,使用VueRouter来管理应用程序的导航和路由。下面是VueRouter的一些常见使用方法:通过npm或yarn安装VueRouter:npminstallvue-router或yarnaddvue-router在主文件(通常是main.js)中导入VueRouter并创建一个实例:import{createApp}from'vue'importrouterfrom'......
  • 不再困惑:一文读懂Vue2与Vue3的主要差异
    Vue3相对于Vue2有很多改进和新特性。以下是一些主要的区别:性能更好:Vue3的性能比Vue2更好,因为它使用了更少的代码和更高效的算法。例如,Vue3使用Proxy代替了Object.defineProperty来监听数据变化,这使得Vue3的性能更高。组合式API:Vue3引入了组合式API,这是一种新的编写组件逻辑的方式。......
  • Vue3开发环境搭建全攻略:Vite的详细介绍
    Vite简介Vite这个单词是一个法语单词,意思就是轻快的意思。它和我们以前使用Vue-cli的作用基本相同,都是项目初始化构建工具,相当于Vue项目构建的第二代产品,当然它也包含了项目的编译功能。需要注意一下Vite的生产环境下打包是通过Rollup来完成的。Vite特性介绍Vite主打特点就是轻快冷......
  • vue3.3.x setup 新实验性特性 defineModel 定义多个属性
    由于有些业务组件需要定义多个响应式props,类似这种(比较懒,没上ts),在vue3.3.x以前,如果不用三方库,代码会变得很繁琐<scriptsetup> constprops=defineProps({ modelValue:{ type:Object, default:()=>({}) }, fields:{ type:Object, default:()=>(......