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使用手册之二 DOM操作
Mar 24 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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
PHP中list方法用法示例
2016/12/01 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Python列表推导式的使用方法
2013/11/21 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
客房主管岗位职责
2013/12/09 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
项目投资合作意向书
2014/07/29 职场文书
优秀高中学生评语
2014/12/30 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
刘胡兰观后感
2015/06/16 职场文书
2016中秋节问候语
2015/11/11 职场文书
自考生自我评价
2019/06/21 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
python基础之类方法和静态方法
2021/10/24 Python