这篇文章主要介绍“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怎么重新渲染”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
