Echarts如何重新渲染实例详解


Posted in Javascript onMay 30, 2022

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

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如何重新渲染的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
javascript正则表达式之search()用法实例
Jan 19 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
如何实现js拖拽效果及原理解析
May 08 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
jQuery实现全选按钮
Jan 01 jQuery
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
ant design charts 获取后端接口数据展示
May 25 #Javascript
vue3不同环境下实现配置代理
May 25 #Vue.js
Typescript类型系统FLOW静态检查基本规范
Web应用开发TypeScript使用详解
May 25 #Javascript
vue使用element-ui按需引入
May 20 #Vue.js
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
webpack配置之后端渲染详解
2017/10/26 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python抓取百度首页的方法
2015/05/19 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python正则表达式知识汇总
2017/09/22 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
大专生自荐信
2013/10/04 职场文书
原告代理词范文
2015/05/25 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS