echarts数据可视化模板相互影响

问题

echarts数据可视化模板相互影响

详细问题

echarts数据可视化模板相互影响,笔者使用由CSS+JavaScript+HTML实现的echarts数据可视化模板，对于其中的子图(图A，位于boxA.js下与图B位于boxB.js下)进行数据下钻，更改option配置后，点击图A进行数据下钻，但是图B也进行数据下钻

解决方案

1、找到数据可视化模板的html文件，增加如下代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

当然，echarts数据可视化模板大概率是存在jquery文件，直接在html文件引入也是可以的

<script src="path/to/jquery.min.js"></script>

注意将 path/to/ 替换为 jquery.js 文件在项目中的实际路径。
除此之外，也可以通过访问 jQuery 的官方网站并下载所需版本的 jQuery 库。然后，将下载的 jquery.min.js 文件放置在项目中，并使用以下方式引入：

<script src="path/to/jquery.min.js"></script>

注意将 path/to/ 替换为 jquery.min.js 文件在项目中的实际路径。
2 对于相互影响的子图配置js文件，使用jQuery函数进行封装

$(function () {
// 原JS内容
}

对于笔者而言，对于boxA.js与boxB.js

$(function () {
// 原boxA.js
}

$(function () {
// 原boxB.js
}

错误原因

数据污染，图A与图B共享一个配置信息，因此对于图A的操作会对图B造成影响

解决原因

数据污染是由于数据信息共享造成的，如何使数据之间无法共享呢，使用函数封装即可，因为JS函数是闭包的，所谓闭包，是指函数内的信息函数外无法直接访问，实际上，使用函数封装就可以解决该问题，但是笔者在此处使用的是jQuery函数进行封装，而不是其他函数（譬如JS函数），之所以使用jQuery函数，取决于上述jQuery函数具有文档加载完成后执行该函数。这种方式也被称为文档就绪函数或DOM就绪函数。可以确保文档先加载完成。