当前位置:网站首页>echart简单组件封装
echart简单组件封装
2022-07-06 10:24:00 【bug丸】
echart简单组件封装
<template>
<div class="chartBox" ref="echartBox"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
props: {
barData: {
type: Array,
default: () => []
}
},
watch: {
barData: {
handler: function() {
this.initChart()
},
deep: true
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
const dom = this.$refs.echartBox
const myChart = echarts.init(dom)
myChart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: this.barData,
type: 'bar'
}
]
})
}
}
}
</script>
<style scoped>
.chartBox {
width: 400px;
height: 300px;
}
</style>
遇到的问题:
封装的echart组件复用时,会警告:
上述代码如果我将this.$ref 改为 document.querySelector;那么浏览器会出来一条警告,而且只会渲染出一个图
警告内容: There is a chart instance already initialized on the dom.
// const dom = this.$refs.echartBox
const dom = document.querySelector('.chartBox')
解决方式:
方式1:this.$refs
如同开始部分的代码
方式2:传入一个唯一的className或id,用来区分
<div class="chartBox" :id="eID"></div>
props: {
eID: {
type: String,
default: ''
}
},
const dom = document.querySelector('#' + this.eID)
边栏推荐
- 面试突击62:group by 有哪些注意事项?
- Declval of template in generic programming
- Maixll dock camera usage
- Introduction to the usage of model view delegate principal-agent mechanism in QT
- Jerry is the custom background specified by the currently used dial enable [chapter]
- OpenEuler 会长久吗
- Principle and usage of extern
- FMT open source self driving instrument | FMT middleware: a high real-time distributed log module Mlog
- Excel usage record
- Grafana 9.0 is officially released! It's the strongest!
猜你喜欢
Stealing others' vulnerability reports and selling them into sidelines, and the vulnerability reward platform gives rise to "insiders"
Rb157-asemi rectifier bridge RB157
C语言通过指针交换两个数
Jerry's access to additional information on the dial [article]
STM32 key state machine 2 - state simplification and long press function addition
I want to say more about this communication failure
FMT开源自驾仪 | FMT中间件:一种高实时的分布式日志模块Mlog
第三季百度网盘AI大赛盛夏来袭,寻找热爱AI的你!
C language exchanges two numbers through pointers
Four processes of program operation
随机推荐
MS-TCT:Inria&SBU提出用于动作检测的多尺度时间Transformer,效果SOTA!已开源!(CVPR2022)...
面向程序员的精品开源字体
30 minutes to understand PCA principal component analysis
Jerry's access to additional information on the dial [article]
High precision operation
虚拟机VirtualBox和Vagrant安装
从交互模型中蒸馏知识!中科大&美团提出VIRT,兼具双塔模型的效率和交互模型的性能,在文本匹配上实现性能和效率的平衡!...
std::true_ Type and std:: false_ type
SAP Fiori 应用索引大全工具和 SAP Fiori Tools 的使用介绍
编译原理——自上而下分析与递归下降分析构造(笔记)
重磅硬核 | 一文聊透对象在 JVM 中的内存布局,以及内存对齐和压缩指针的原理及应用
node の SQLite
【Android】Kotlin代码编写规范化文档
Insert dial file of Jerry's watch [chapter]
Five data structures of redis
Why does wechat use SQLite to save chat records?
78 year old professor Huake has been chasing dreams for 40 years, and the domestic database reaches dreams to sprint for IPO
J'aimerais dire quelques mots de plus sur ce problème de communication...
STM32+ESP8266+MQTT协议连接OneNet物联网平台
[.Net core] solution to error reporting due to too long request length