当前位置:网站首页>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)
边栏推荐
- Windows connects redis installed on Linux
- 2022 Summer Project Training (I)
- 第三季百度网盘AI大赛盛夏来袭,寻找热爱AI的你!
- Jerry's access to additional information on the dial [article]
- 微信为什么使用 SQLite 保存聊天记录?
- Why should Li Shufu personally take charge of building mobile phones?
- Codeforces Round #803 (Div. 2)
- std::true_ Type and std:: false_ type
- 简单易用的PDF转SVG程序
- 1700C - Helping the Nature
猜你喜欢
J'aimerais dire quelques mots de plus sur ce problème de communication...
面向程序员的精品开源字体
關於這次通信故障,我想多說幾句…
Maixll dock camera usage
Why does wechat use SQLite to save chat records?
Why should Li Shufu personally take charge of building mobile phones?
QT中Model-View-Delegate委托代理机制用法介绍
Declval (example of return value of guidance function)
F200——搭载基于模型设计的国产开源飞控系统无人机
Take you through ancient Rome, the meta universe bus is coming # Invisible Cities
随机推荐
Four processes of program operation
图片缩放中心
Recommend easy-to-use backstage management scaffolding, everyone open source
TOP命令详解
2019阿里集群数据集使用总结
CRMEB 商城系统如何助力营销?
Heavy! Ant open source trusted privacy computing framework "argot", flexible assembly of mainstream technologies, developer friendly layered design
Principle and usage of extern
Stealing others' vulnerability reports and selling them into sidelines, and the vulnerability reward platform gives rise to "insiders"
78 year old professor Huake has been chasing dreams for 40 years, and the domestic database reaches dreams to sprint for IPO
重磅硬核 | 一文聊透对象在 JVM 中的内存布局,以及内存对齐和压缩指针的原理及应用
2022暑期项目实训(三)
Release of the sample chapter of "uncover the secrets of asp.net core 6 framework" [200 pages /5 chapters]
MarkDown语法——更好地写博客
《ASP.NET Core 6框架揭秘》样章发布[200页/5章]
2022暑期项目实训(一)
Transfer data to event object in wechat applet
High precision operation
win10系统下插入U盘有声音提示却不显示盘符
Today in history: the mother of Google was born; Two Turing Award pioneers born on the same day