Echarts如何重新渲染實(shí)例詳解
更新時(shí)間：2022年05月30日 15:31:49 作者：雪予歌
這篇文章主要給大家介紹了關(guān)于Echarts重新渲染的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
當(dāng)我點(diǎn)擊餅圖時(shí)，出現(xiàn)相應(yīng)的內(nèi)容，并重新渲染餅圖展示內(nèi)容 餅圖點(diǎn)擊事件
this.conechart.on('click', (params) => {
params.name
});獲取的是點(diǎn)擊的對(duì)應(yīng)的板塊名 利用獲取的板塊名，去接口調(diào)取對(duì)應(yīng)的數(shù)據(jù) ， 調(diào)取數(shù)據(jù)是異步調(diào)用 ，所以重新渲染視圖要在 異步中渲染，否則同步渲染不出數(shù)據(jù)
var options = this.conechart.getOption() options.series[0].data = res.data this.conechart.setOption(options)
getoption()是獲取當(dāng)前視圖配置項(xiàng) 進(jìn)行重新賦值 setoption()是掛載配置項(xiàng) 完整代碼
initconechart () {
this.conechart = this.$echarts.init(document.getElementById('conechart'));
const option = {
title: {
text: '風(fēng)險(xiǎn)占比',
// 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判斷是一個(gè)開關(guān)，控制只能點(diǎn)擊一次
// 更新視圖
getWarnInfoBySecond(name) {
getWarnInfoBySecond(name).then(res => {
var options = this.conechart.getOption()
options.series[0].data = res.data
this.conechart.setOption(options)
this.isshow = 1
})
},總結(jié)
到此這篇關(guān)于Echarts如何重新渲染的文章就介紹到這了,更多相關(guān)Echarts重新渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解webpack的clean-webpack-plugin插件報(bào)錯(cuò)
這篇文章主要介紹了詳解webpack的clean-webpack-plugin插件報(bào)錯(cuò)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
閉包是有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問另一個(gè)函數(shù)的作用于中的變量，所以我們往往是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù)，而“另一個(gè)函數(shù)”就是閉包。本文對(duì)其進(jìn)行系統(tǒng)分析，需要的朋友可以看下2016-12-12
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)控制文本框的內(nèi)容。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
本篇文章主要介紹了理解javascript async的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
單擊復(fù)制文字的js找了很久，由于之前沒有接觸過，完全不知道兼容ie及標(biāo)準(zhǔn)dom瀏覽器，不僅僅要通過js，而且需要flash的幫忙，下面與大家分享下具體的實(shí)現(xiàn)方法2013-07-07
js采用map取到id集合組并且實(shí)現(xiàn)點(diǎn)擊一行選中一行
本文為大家介紹下如何使用js采用map取到id集合組,并且點(diǎn)擊一行選中一行2013-12-12
二維碼作為一種快速的信息識(shí)別工具,被廣泛應(yīng)用于各行各業(yè),在互聯(lián)網(wǎng)的時(shí)代,生成二維碼已經(jīng)成為了一項(xiàng)必需的技能,這篇文章主要給大家介紹了關(guān)于前端qrcode生成二維碼安裝及使用示例的相關(guān)資料,需要的朋友可以參考下2024-08-08
微信小程序首頁的分類功能和搜索功能的實(shí)現(xiàn)思路及代碼詳解
這篇文章主要介紹了微信小程序首頁的分類功能和搜索功能的實(shí)現(xiàn)思路及代碼詳解,微信宣布了微信小程序開發(fā)者工具新增“云開發(fā)”功能，現(xiàn)在無需服務(wù)器即可實(shí)現(xiàn)小程序的快速迭代，感興趣的朋友跟隨小編一起看看吧2018-09-09
解決WordPress使用CDN后博文無法評(píng)論的錯(cuò)誤
這篇文章主要介紹了解決WordPress使用CDN后博文無法評(píng)論的錯(cuò)誤的方法,同時(shí)提醒注意WordPress使用版本的jQuery版本支持度,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了你可能不需要在JavaScript使用switch語句，對(duì)switch性能感興趣的同學(xué)，可以參考下2021-04-04