echarts设置暂无数据方法实例及遇到的问题

 更新时间:2022年12月12日 10:57:56   作者:我的div丢了肿么办  
Echarts是百度旗下的一款开源的商业级数据可视化产品,具有丰富的图表类型,下面这篇文章主要给大家介绍了关于echarts设置暂无数据方法及遇到的问题的相关资料,需要的朋友可以参考下

场景描述

我们在项目中,很多时候都会使用echarts进行数据展示。

当没有数据的时候,echarts的展示就会特别的难看。

这个时候我们就会优化界面的显示,在echarts中展示暂无数据。

有很多中方法:

1.只设置echarts中的title选项,其他选择都不进行设置

2.在页面中使用v-show或者v-if。有数据的时候展示echarts,没有数据的时候使用其他作为提示

现在我们使用第1种方式来看下,会出现什么样的情况?

使用echarts中的title选项来处理暂无数据

代码功能描述:

最初的时候是有数据的,点击按钮后会显示暂无数据。

然后再次点击,会有数据。以此循环

<template>
  <div>
    <el-button @click="showEcharts">切换</el-button>
    <div id="myChart1"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      backData: {
        dataX: ['卿卿日常', '琅琊榜', '仙剑奇侠传三', '射雕英雄传', '伪装者', '聊斋志异', '县委大院'],
        dataY:[820, 932, 901, 934, 1290, 1330, 1320]
      },
      indexOrder:1,   
    }
  },
  mounted() {
    this.showEcharts()
  },
  methods: {
    showEcharts() {
      this.indexOrder++
      let myChart1 = echarts.init(document.getElementById('myChart1'))
      let option = {}
      //通过控制 indexOrder 来实现是否展示数据
      if (this.indexOrder % 2 ==0) {
        option = {
          xAxis: {
            type: 'category',
            data: this.backData.dataX
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.backData.dataY,
              type: 'line',
              smooth: true
            }
          ]
        }
      } else {
        option = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 16,
              fontWeight: 'normal',
            }
          }
        }
      }
      myChart1.setOption(option)
    },
  }
}
</script>

实际上遇见的情况

当我们第2次点击按钮的时候。虽然视图上显示了"暂无数据"。

但是仍然有图表展示的信息。与我们最初的想法是相违背的。

它出现了数据和"暂无数据"同时出现了。我们只希望出现一种。

怎么会出现这样的情况呢?不是应该只展示其中一种情况吗?

解决问题的三种办法

代码中的 myChart1.setOption(option)

默认情况ECharts 会合并新的参数和数据,然后刷新图表。

当它合并之后,就会出现数据和"暂无数据"同时显示在界面中。

如何解决这样的情况呢?

1.使用 echarts中setOption(option,notMerge)的第二个参数来解决

chart.setOption(option, notMerge:boolean, lazyUpdate:boolean);

option 图表的配置项和数据

notMerge 可选,是否不跟之前设置的 option 进行合并,默认为 false (即合并)。

lazyUpdate 可选,在设置完 option 后是否不立即更新图表,默认为 false(即立即更新)。

2.echarts.clear() 清空当前实例,会移除实例中所有的组件和图表。

我们可以在渲染图标前,先清空一下实例.

let myChart1 = echarts.init(document.getElementById('myChart1'))
myChart1.clear()

3.echarts.dispose()销毁实例,销毁后实例无法再被使用。

let myChart1 = echarts.init(document.getElementById('myChart1'))
myChart1.dispose()

echarts.clear() 与 echarts.dispose()的区别

echarts.clear()是清空实例,实例任然是存在的,类似于v-show
echarts.dispose()是销毁,销毁后实例不存在,类似于v-if

使用 echarts 中setOption(option,notMerge)的第二个参数来解决

showEcharts() {
  this.indexOrder++
  let myChart1 = echarts.init(document.getElementById('myChart1'))
  let option = {}
  if (this.indexOrder % 2 ==0) {
    option = {
      xAxis: {
        type: 'category',
        data: this.backData.dataX
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.backData.dataY,
          type: 'line',
          smooth: true
        }
      ]
    }
  } else {
    option = {
      title: {
        text: '暂无数据',
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'normal',
        }
      }
    }
  }
  //不进行合并
  myChart1.setOption(option,true)
},

总结

到此这篇关于echarts设置暂无数据方法及遇到的问题的文章就介绍到这了,更多相关echarts设置暂无数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js改变文章字体大小的实例代码

    js改变文章字体大小的实例代码

    这篇文章主要介绍了js改变文章字体大小的实例代码,有需要的朋友可以参考一下
    2013-11-11
  • TypeScript中交叉类型和联合类型的区别详解

    TypeScript中交叉类型和联合类型的区别详解

    联合类型(Union Types)和交叉类型(Intersection Types)是 TypeScript 中的两种高级类型,它们都用于组合多个类型并生成新的类型,但它们两者之间的用法不一样,本文小编就给大家讲讲TypeScript中交叉类型和联合类型的区别,需要的朋友可以参考下
    2023-09-09
  • 详解js中构造流程图的核心技术JsPlumb

    详解js中构造流程图的核心技术JsPlumb

    这篇文章主要介绍了js中构造流程图的核心技术JsPlumb,jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等,需要的朋友可以参考下
    2015-12-12
  • JavaScript调用C语言的几种方式

    JavaScript调用C语言的几种方式

    本文主要介绍了JavaScript调用C语言的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • location.href 在IE6中不跳转的解决方法与推荐使用代码

    location.href 在IE6中不跳转的解决方法与推荐使用代码

    在js中,我们经常使用location.href来实现页面的跳转,为了方便我们写成函数。下面就分别说明下,下面的一些代码的实现问题。
    2010-07-07
  • js左侧多级菜单动态的解决方案

    js左侧多级菜单动态的解决方案

    实现的效果很简单,就是点一下显示,再点一下就隐藏,只不过是多了几级的问题。好,现在来说说我的设计思路,首先从第一级别开始,添加如下代码
    2010-02-02
  • javascript获取flash版本号的方法

    javascript获取flash版本号的方法

    这篇文章主要介绍了javascript获取flash版本号的方法,以实例形式分析了javascript判断用户是否安装了Flash及获取Flash版本号的方法,具有一定的实用价值,需要的朋友可以参考下
    2014-11-11
  • js中class的点击事件没有效果的解决方法

    js中class的点击事件没有效果的解决方法

    下面小编就为大家带来一篇js中class的点击事件没有效果的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • js实现简单秒表走动的时钟特效

    js实现简单秒表走动的时钟特效

    这篇文章主要为大家详细介绍了js实现简单秒表走动的时钟特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    ES6(ECMAScript 6)新特性之模板字符串用法分析

    这篇文章主要介绍了ES6(ECMAScript 6)新特性之模板字符串用法,简单介绍了ES6模板字符串的概念、功能并结合实例形式分析了ES6模板字符串的用法,需要的朋友可以参考下
    2017-04-04

最新评论