vue-echarts区域缩放(datazoom)鼠标滚动报错:Unable to preventDefault inside passive event listener invocation
最新推荐文章于 2023-06-11 12:35:08 发布
IT博客技术分享
最新推荐文章于 2023-06-11 12:35:08 发布
1.先上报错的j截图:
2、解决办法:
文件:在依赖包**
node_modules
**下,找到**zrender**文件。在**zrender**文件中找到**event.js**文件。
具体路径:
**zrender/lib/core/event.js。**
找到*
*event.js
**文件下的**
addEventListener
**函数,如下修改标注红色字体部分。
`export function addEventListener(el, name, handler, opt) {
if (isDomLevel2) {
// el.addEventListener(name, handler, opt);
el.addEventListener(name, handler, { passive: false });
else {
el.attachEvent('on' + name, handler);
代码:el.addEventListener(name, handler, { passive: false });
3.**原因**
我们的事件已经默认被定义为了被动事件监听。结果我们在这个事件监听中调用了event.preventDefault(),浏览器就不高兴了,报错,告诉你:“你定义的事件不是一个被动事件监听吗?不就是告诉我为了提高响应速度不要处理event.preventDefault()吗?为啥你还要调用event.preventDefault()!”
为什么事件被默认定义为被动事件监听?为了提高浏览器的响应速度。
最后为了方便大家的沟通与交流请加QQ群:
625787746
请进QQ群交流:【IT博客技术分享群①】:
https://jq.qq.com/?_wv=1027&k=DceI0140
vue-echarts区域缩放(datazoom)鼠标滚动报错:Unable to preventDefault inside passive event listener invocation
1.先上报错的j截图:2、解决办法:文件:在依赖包**node_modules**下,找到**zrender**文件。在**zrender**文件中找到**event.js**文件。具体路径:**zrender/lib/core/event.js。**找到**event.js**文件下的**addEventListener**函数,如下修改标注红色字体部分。`export function addEventListener(el, name, handler, opt) { .
"
Unable
to
preventDefault
inside
passive
event
listener
due to target being treated as
passive
." 这个
错
误通常是由于尝试阻止已被声明为被动的事件的默认行为所引起的。要解决这个问题,可以尝试以下方法:
elem.add
Event
Listener
('touchstart', function(e) {
e.
preventDefault
();
}, {
passive
: false });
使用 { pas
前提:npm安装echarts依赖: npm install echarts--save
注意:使用npm的时候,我们直接通过require(‘echarts’)来引入,按需引入需要用到的方法,代码中都有体现;
X轴数据过多时使用
dataZoom
属性实现,如下图代码块:
1
错
误
谷歌浏览器
报
vue项目的
错
[Intervention]
Unable
to
preventDefault
inside
passive
event
listener
due to target being treated as
passive
.
一个组件代码如下,发生图中
错
误
<template>
<div class = "footerGuideStyle">
<a href="java
在做后台管理的时候,很多时候会用到数据展示,一般有饼状图,柱状图,折线图以及雷达图等(我列举的是较为常用的)
那么有时候也会出现同一个页面里会有不止一个饼图或者柱状图,这个时候,写两个组件吧,太麻烦,而且内容一模一样,也失去了写组件最初的意义。
但是一个组件调用两次,你渲染的时候会发现,他只会渲染一次,就是说另一个柱状图的位置是空白,emmmmmmmmm,这可怎么解决呢?
当然是有办法的啦,
Vue-Echarts
是一个基于 Vue.js 的 Echarts 图表组件库。Echarts 是百度开源的一个强大的数据可视化库,而
Vue-Echarts
则是对 Echarts 进行了封装,使其更易于在 Vue.js 项目中使用。
Vue-Echarts
提供了一些 Vue.js 组件,这些组件可以直接在 Vue 模板中使用,以便快速创建和配置各种类型的图表。使用
Vue-Echarts
,你可以轻松地在 Vue.js 项目中创建折线图、柱状图、饼图、雷达图等各种图表。
使用
Vue-Echarts
,你需要先安装 Echarts 和
Vue-Echarts
。然后,在你的 Vue 组件中引入
Vue-Echarts
组件并传入相关的配置数据,就可以在页面上展示相应的图表了。
下面是一个简单的示例代码,展示了如何在 Vue 组件中使用
Vue-Echarts
:
<template>
<
vue-echarts
:options="chartOptions" style="height: 400px;"></
vue-echarts
>
</template>
<script>
import VueECharts from '
vue-echarts
';
export default {
components: {
VueECharts,
data() {
return {
chartOptions: {
// 图表的配置项和数据
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
yAxis: {
type: 'value',
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar',
</script>
这个示例展示了一个简单的柱状图,x 轴表示星期几,y 轴表示某项数据的数值。你可以根据实际需求,修改配置数据来创建不同类型的图表。