Echarts如何重新渲染实例详解

 更新时间:2022年05月30日 15:31:49   作者:雪予歌  
这篇文章主要给大家介绍了关于Echarts重新渲染的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

当我点击饼图时,出现相应的内容,并重新渲染饼图展示内容 饼图点击事件

this.conechart.on('click', (params) => {
    params.name
});

获取的是点击的对应的板块名 利用获取的板块名,去接口调取对应的数据 , 调取数据是异步调用 ,所以重新渲染视图要在 异步中渲染,否则同步渲染不出数据

var options = this.conechart.getOption()
options.series[0].data = res.data
this.conechart.setOption(options)

getoption()是获取当前视图配置项 进行重新赋值 setoption()是挂载配置项 完整代码

initconechart () {
  this.conechart = this.$echarts.init(document.getElementById('conechart'));
  const option = {
    title: {
      text: '风险占比',
      // subtext: 'Fake Data',
      left: '45%',
      top: "20px",
      textStyle:{
        fontSize:30,
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: 'left',
      top:5,
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        left:"10%",
        top:"15%",
        data: this.piedata,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          alignTo: "labelLine",
          distanceToLabelLine: 10,
          edgeDistance: "15%"
        },
        labelLayout: {
          fontSize: "16"
        }
      }
    ]
  };
  this.conechart.setOption(option)
  this.conechart.on('click', (params) => {
    if ( this.isshow == 0) {
      this.getWarnInfoBySecond(params.name)
    }
  });
},

if判断是一个开关,控制只能点击一次

//  更新视图
getWarnInfoBySecond(name) {
  getWarnInfoBySecond(name).then(res => {
    var options = this.conechart.getOption()
    options.series[0].data = res.data
    this.conechart.setOption(options)
    this.isshow = 1
  })
},

总结

到此这篇关于Echarts如何重新渲染的文章就介绍到这了,更多相关Echarts重新渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解webpack的clean-webpack-plugin插件报错

    详解webpack的clean-webpack-plugin插件报错

    这篇文章主要介绍了详解webpack的clean-webpack-plugin插件报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 浅谈JavaScript的闭包函数

    浅谈JavaScript的闭包函数

    闭包是有权访问另一个函数作用域中的变量的函数。首先要明白的就是,闭包是函数。由于要求它可以访问另一个函数的作用于中的变量,所以我们往往是在一个函数的内部创建另一个函数,而“另一个函数”就是闭包。本文对其进行系统分析,需要的朋友可以看下
    2016-12-12
  • JS实现控制文本框的内容

    JS实现控制文本框的内容

    下面小编就为大家带来一篇JS实现控制文本框的内容。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 理解javascript async的用法

    理解javascript async的用法

    本篇文章主要介绍了理解javascript async的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 单击复制文字兼容各浏览器的完美解决方案

    单击复制文字兼容各浏览器的完美解决方案

    单击复制文字的js找了很久,由于之前没有接触过,完全不知道兼容ie及标准dom浏览器,不仅仅要通过js,而且需要flash的帮忙,下面与大家分享下具体的实现方法
    2013-07-07
  • js采用map取到id集合组并且实现点击一行选中一行

    js采用map取到id集合组并且实现点击一行选中一行

    本文为大家介绍下如何使用js采用map取到id集合组,并且点击一行选中一行
    2013-12-12
  • 前端qrcode生成二维码安装及使用示例详解

    前端qrcode生成二维码安装及使用示例详解

    二维码作为一种快速的信息识别工具,被广泛应用于各行各业,在互联网的时代,生成二维码已经成为了一项必需的技能,这篇文章主要给大家介绍了关于前端qrcode生成二维码安装及使用示例的相关资料,需要的朋友可以参考下
    2024-08-08
  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    这篇文章主要介绍了微信小程序首页的分类功能和搜索功能的实现思路及代码详解,微信宣布了微信小程序开发者工具新增“云开发”功能,现在无需服务器即可实现小程序的快速迭代,感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • 解决WordPress使用CDN后博文无法评论的错误

    解决WordPress使用CDN后博文无法评论的错误

    这篇文章主要介绍了解决WordPress使用CDN后博文无法评论的错误的方法,同时提醒注意WordPress使用版本的jQuery版本支持度,需要的朋友可以参考下
    2015-12-12
  • 你可能不需要在JavaScript使用switch语句

    你可能不需要在JavaScript使用switch语句

    这篇文章主要介绍了你可能不需要在JavaScript使用switch语句,对switch性能感兴趣的同学,可以参考下
    2021-04-04

最新评论