当前位置:网站首页>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)
边栏推荐
- Implementation of queue
- On time and parameter selection of asemi rectifier bridge db207
- Cocos2d Lua 越来越小样本 内存游戏
- Is it meaningful for 8-bit MCU to run RTOS?
- MarkDown语法——更好地写博客
- ADB common commands
- Release of the sample chapter of "uncover the secrets of asp.net core 6 framework" [200 pages /5 chapters]
- 虚拟机VirtualBox和Vagrant安装
- J'aimerais dire quelques mots de plus sur ce problème de communication...
- Windows连接Linux上安装的Redis
猜你喜欢
趣-关于undefined的问题
Grafana 9.0 正式发布!堪称最强!
Why should Li Shufu personally take charge of building mobile phones?
Interesting - questions about undefined
Transport layer congestion control - slow start and congestion avoidance, fast retransmission, fast recovery
[.Net core] solution to error reporting due to too long request length
Recursive way
std::true_type和std::false_type
F200——搭载基于模型设计的国产开源飞控系统无人机
QT中Model-View-Delegate委托代理机制用法介绍
随机推荐
使用block实现两个页面之间的传统价值观
趣-关于undefined的问题
Cobra 快速入门 - 专为命令行程序而生
2022 Summer Project Training (III)
UDP protocol: simple because of good nature, it is inevitable to encounter "city can play"
D binding function
小程序在产业互联网中的作用
IP, subnet mask, gateway, default gateway
從交互模型中蒸餾知識!中科大&美團提出VIRT,兼具雙塔模型的效率和交互模型的性能,在文本匹配上實現性能和效率的平衡!...
高精度运算
Distiller les connaissances du modèle interactif! L'Université de technologie de Chine & meituan propose Virt, qui a à la fois l'efficacité du modèle à deux tours et la performance du modèle interacti
Open source and safe "song of ice and fire"
Transport layer congestion control - slow start and congestion avoidance, fast retransmission, fast recovery
Why does wechat use SQLite to save chat records?
STM32 key state machine 2 - state simplification and long press function addition
Fleet tutorial 13 basic introduction to listview's most commonly used scroll controls (tutorial includes source code)
Insert dial file of Jerry's watch [chapter]
MSF horizontal MSF port forwarding + routing table +socks5+proxychains
【.NET CORE】 请求长度过长报错解决方案
win10系统下插入U盘有声音提示却不显示盘符