当前位置:网站首页>Echart simple component packaging
Echart simple component packaging
2022-07-06 18:20:00 【Bug pill】
echart Simple component encapsulation
<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>
Problems encountered :
Packaged echart When components are reused , Warning :
The above code if I will this.$ref Change it to document.querySelector; Then the browser will issue a warning , And only one picture will be rendered
Warning content : There is a chart instance already initialized on the dom.
// const dom = this.$refs.echartBox
const dom = document.querySelector('.chartBox')
Solution :
The way 1:this.$refs
Like the code at the beginning
The way 2: Pass in a unique className or id, Used to distinguish
<div class="chartBox" :id="eID"></div>
props: {
eID: {
type: String,
default: ''
}
},
const dom = document.querySelector('#' + this.eID)
边栏推荐
- Jerry is the custom background specified by the currently used dial enable [chapter]
- Heavy! Ant open source trusted privacy computing framework "argot", flexible assembly of mainstream technologies, developer friendly layered design
- 【Swoole系列2.1】先把Swoole跑起来
- Cobra 快速入门 - 专为命令行程序而生
- TOP命令详解
- 面向程序员的精品开源字体
- 文档编辑之markdown语法(typora)
- Self-supervised Heterogeneous Graph Neural Network with Co-contrastive Learning 论文阅读
- 二分(整数二分、实数二分)
- Codeforces Round #803 (Div. 2)
猜你喜欢
随机推荐
STM32+HC05串口蓝牙设计简易的蓝牙音箱
Easy to use PDF to SVG program
Cobra 快速入门 - 专为命令行程序而生
Kill -9 system call used by PID to kill process
Introduction to the usage of model view delegate principal-agent mechanism in QT
带你穿越古罗马,元宇宙巴士来啦 #Invisible Cities
【剑指 Offer】 60. n个骰子的点数
Grafana 9.0 正式发布!堪称最强!
Interview shock 62: what are the precautions for group by?
2022 Summer Project Training (III)
UDP协议:因性善而简单,难免碰到“城会玩”
Coco2017 dataset usage (brief introduction)
关于这次通信故障,我想多说几句…
[sword finger offer] 60 Points of N dice
Maixll-Dock 摄像头使用
【中山大学】考研初试复试资料分享
Automatic reservation of air tickets in C language
第三季百度网盘AI大赛盛夏来袭,寻找热爱AI的你!
使用block实现两个页面之间的传统价值观
Jerry's watch deletes the existing dial file [chapter]