網站首頁 編程語言 正文
報錯場景:頁面切換路由時報錯
報錯原因:使用 Vue + echarts,因為 頁面中使用了 echarts 圖表,在初始化圖表后,dom 元素還未被初始化加載出來,導致 echarts 在渲染時候報錯
示例代碼:
drawPie(){ // 總體告警數 餅圖
// 基于準備好的dom,初始化echarts實例
let ref = this.$refs.pie
if (ref && ref !== undefined) {
let myChart = this.$echarts.init(ref)
// 繪制圖表
myChart.setOption({
color: ['#04befe'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}'
},
series: [
{
type: 'pie',
radius: ['50%', '65%'],
avoidLabelOverlap: true,
label: {
show: true,
formatter: ' {c}\n\n{b}',
fontSize: '16',
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '16',
}
},
labelLine: {
show: false
},
data: [
{value: this.total_num, name: '總體告警數'},
],
hoverOffset: 2
}
]
})
}
},
函數中直接調用 echarts 方法即可
原文鏈接:https://blog.csdn.net/qq_38157825/article/details/109319812
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2023-04-20 npm ERR! 400 Bad Request - PUT xxx - Cannot publis
- 2022-06-12 C#實現基于任務的異步編程模式_C#教程
- 2022-04-28 C#圖形編程GDI+基礎介紹_C#教程
- 2022-06-10 ASP.NET?Core為Ocelot網關配置Swagger_實用技巧
- 2022-12-14 Android?liveData與viewBinding使用教程_Android
- 2022-08-21 深入了解C語言中常見的文件操作方法_C 語言
- 2022-11-14 python?numpy查詢定位賦值數值所在行列_python
- 2022-06-04 Python?os和os.path模塊詳情_python
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支