Echarts怎么重新渲染

Echarts怎么重新渲染

这篇文章主要介绍“Echarts怎么重新渲染”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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怎么重新渲染”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注高防服务器网行业资讯频道，小编每天都会为大家更新不同的知识点。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[