问题
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就绪函数。可以确保文档先加载完成。
参考文献
无
原创不易
转载请标明出处
如果对你有所帮助 别忘啦点赞支持哈
