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 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
chrome调试javascript详解
Oct 21 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
javascript新手语法小结
2008/06/15 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
致全体运动员广播稿
2014/02/01 职场文书
师范生自荐信模板
2014/05/28 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
工程安全生产协议书
2014/11/21 职场文书
2015年检验科工作总结
2015/04/27 职场文书
运动会运动员赞词
2015/07/22 职场文书