網站首頁 編程語言 正文
報錯場景:頁面切換路由時報錯
報錯原因:使用 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
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2022-07-03 C語言詳解strcmp函數的分析及實現_C 語言
- 2021-12-09 Linux環境下安裝JDK1.8_Linux
- 2022-09-01 Oracle?數據庫層級遍歷查詢功能的實現_oracle
- 2022-09-15 如何使用注解方式實現?Redis?分布式鎖_Redis
- 2022-05-19 C++線程之thread詳解_C 語言
- 2023-07-14 react 利用antd-mobile實現樓層效果
- 2022-10-12 Nginx?504?Gateway?Time-out的兩種最新解決方案_nginx
- 2023-05-29 React優雅的封裝SvgIcon組件示例_React
- 欄目分類
-
- 最近更新
-
- 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同步修改后的遠程分支