项目遇到了要做这个的需求，百度了半天发现，大家好像都说从ehcarts3.0开始就不支持在option里面设置 noDataLoadingOption 这个属性来显示nodata了，只好自己写一个。

html:

      <el-popover
          placement="right"
          width="600"
          trigger="click">
          <!-- echarts部分 -->
          <div :id="['painter'+idx]" :style="{width: '600px', height: '500px'}" v-if="isNoData"></div>
          <!--nodata弹窗-->
          <div v-if="!isNoData">
              No Data
          </div>
          <el-button slot="reference" @click="matchMore(itemName,idx)">More Info</el-button>
      </el-popover>
  

	简单说一下，我是把echarts放在了elementUI的弹窗组件el-popover里，也就是点击底下的el-button，
来获取后台的信息，并画在画布上并且弹出来。
 	因为遍历了很多信息，每个button获取到的后台信息也不一样，所以给要画的画布的ID去拼接了idx来做区分，
然后根据后台返回的是否有结果来自己取一个data去判断，我这边取的isNoData,如果有数据就渲染echarts部分，
如果没数据，就走下面的nodata弹窗，这个No Data弹窗的文案和样式根据项目自行调整。
	emmm感觉还挺方便的，就这样！
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue