vue^2.6.14、 vuex^3.6.2、 vuerouter^3.5.1 、 elementui^2.15.13环境下报echartsechartsglechartsliquidfill版本兼容问题

echarts与echarts-gl版本兼容问题
echarts与echarts-liquidfill版本兼容问题
原因:只引入echarts扩展包未引入引入不成功

解决方案

  1. 使用npm命令引入对应的echartsechartsglechartsliquidfill组件包,例如:
    npm install echarts-liquidfill@1.0.5
    @1.0.5是指定安装版本,若没有安装最高版本
    若存在依赖冲突命令后加上–legacy-peerdeps,以此来忽略冲突进行安装
    卸载组件npm命令npm uninstall echarts-liquidfill --legacy-peer-deps

服务器端三个组件用的版本分别是echarts^5.4.0、 echartsgl^1.1.2、 echartsliquidfill^ 3.1.0运行正常

小插曲:
js不能读取null的属性

服务端获取dom元素可能会为空,报TypeError: Cannot read properties of null (reading ‘getAttribute’),建议加上如下代码判断

let a = document.getElementById('a')
if(a == null) return

本地环境下的版本是echarts^4.7.0、 echartsgl^1.1.2、 echartsliquidfill^ 1.1.0,但水球图背景颜色没办法改变,代码是写了,但不兼容这种写法

  1. import 引入组件方式
import * as echarts from 'echarts';
import 'echarts-liquidfill' // 水球插件
import "echarts-gl" //3D地图插件
  1. 全局引入echartsliquidfill组件后若还是不行在echarts.init()前加上这一句进行局部的动态引入
    let echarts = require("echarts/lib/echarts");

  2. 采用script CDN方式引入,可能会造成请求时间过长,且也要指定对应的版本

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

—————————————————————————-分割线————————————————————————————-

服务端vue响应变量赋值页面没有更新

找不到图片
报错原因:require找不到对应的图片路径报错
页面更新可能的原因:

  1. require路径找不到报错
  2. 赋值数据类型不对;
  3. js顺序执行,中间代码出现逻辑错误

链接: Vue数据更新,页面却没有更新的几种情况及解决方法

原文地址:https://blog.csdn.net/gather_info/article/details/131181684

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_8757.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注