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如何重新渲染的文章就介绍到这了,更多相关Echarts重新渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！