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 相关文章推荐
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
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
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
vue-router单页面路由
2017/06/17 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python flask实现分页的示例代码
2018/08/02 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
一套PHP的笔试题
2013/05/31 面试题
Java中实现多态的机制是什么?
2014/12/07 面试题
四风问题班子对照检查材料
2014/09/27 职场文书
2014年协会工作总结
2014/11/22 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
详解CSS3浏览器兼容
2022/12/24 HTML / CSS