echarts 4升5版本踩坑记录，优化记录，地图渲染

原文是用wolai写的，这边直接复制的，图片因为防盗无法显示，如果有需要的话，建议看原文

原文：

原文

对echart不太熟悉或不清楚图表内元素所对应的名称的话，可以在官方中找到下面的页面，点击图表内的元素可以快速访问其文档

https://echarts.apache.org/zh/cheat-sheet.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1Ewe0ZG-1641263942662)(https://secure2.wostatic.cn/static/h8fjR2WFmh5doXf3MS7hcp/image.png)]

※Echarts版本升级 v5.2.2

1. 4.x→5.x升级注意事项

main.js内

import echarts from 'echarts' 引入改为 -> import * as echarts from 'echarts'

1. 【toolTip】位置生成逻辑优化

保持tooltip始终保持在手指的上方偏右,容器右侧则放置到手指上方偏左(若toolTip内容过长，避免超出的看不到)

涉及文件：base-graph.vue、pie.vue、radar.vue

**参数：**

point

: 鼠标位置，如 [20, 40]。

params

: 同 formatter 的参数相同。

dom

: tooltip 的 dom 对象。

rect

: 只有鼠标在图形上时有效，是一个用
x
,
y
,
width
,
height
四个属性表达的图形包围盒。

size

: 包括 dom 的尺寸和 echarts 容器的当前尺寸

let tooltip = {
        position: function (pos, params, dom, rect, size) {
          // 手指在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧
              var obj = {top: 20}
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 40
              return obj
            }
          }
      
          // 保持tooltip始终保持在手指的上方偏右,容器右侧则放置到手指上方偏左
          var obj = {top: 20}
          if (pos[0] < (size.viewSize[0] / 2)) {
            obj.left = pos[0] + 15
          } else {
            obj.right = size.viewSize[0] - pos[0] + 15
          }
          return obj
          
          // 保持tooltip始终保持在手指的上方偏右,容器右侧则放置到手指上方偏左(若toolTip内容过长，避免超出的看不到)
          var obj = {top: 20}
          if (pos[0] < (size.viewSize[0] / 2)) {
            obj.left = dom.clientWidth + pos[0] + 15 > size.viewSize[0] ? size.viewSize[0] - dom.clientWidth : pos[0] + 15
          } else {
            obj.right = dom.clientWidth + 15 > pos[0] ? size.viewSize[0] - dom.clientWidth : size.viewSize[0] - pos[0] + 15
          }
          return obj

2.【图表全屏】方法根据环境自动使用所对应的全屏方法（移动端）

涉及文件：chart-list.vue、custom.vue

（本地不再需要手动修改逻辑来实现图表全屏）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2p1jj5GD-1641263942663)(https://secure2.wostatic.cn/static/94ZoyAekWerpmdxrot91BF/image.png)]

3.【重绘方法】移动端新增通过bus全局使用的图表重绘方法

涉及文件：graph.vue

通过bus的graphResize，可以全局执行对图表的重绘

通过重绘方法可解决：显示及隐藏echart图表导致图表绘制宽高渲染问题、容器宽高变更导致的图表未适应宽高的问题

bus.$emit('graphResize')

4. 【数据标签】优化饼状图展示

WEB端使用新版本新配置项，优化数据标签在外部展示的布局和排布

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JcKbvhif-1641263942664)(https://secure2.wostatic.cn/static/wHFB1dPdbpfjWadRKVCRDP/image.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eV88qVq3-1641263942664)(https://secure2.wostatic.cn/static/2QgnXa8ofv4j8e3QHyfirZ/image.png)]

APP端改为内部展示，重叠隐藏

使用5.x新的配置项，可将inside的重叠部分标签隐藏

series-pie.labelLayout. hideOverlap

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S8aGpmHv-1641263942665)(https://secure2.wostatic.cn/static/mfWNXTPYVeVHZfZ731h3jM/image.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TTOGNh0v-1641263942665)(https://secure2.wostatic.cn/static/gHJMks5HUyzYECj5Ga6fvv/image.png)]

5. 【交互体验】折线图饼状图聚焦当前高亮的数据所在的系列的所有图形

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2hISK01-1641263942666)(https://secure2.wostatic.cn/static/xBmaajRP58fLcQ1cqaAyv6/image.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DGfmYVkE-1641263942666)(https://secure2.wostatic.cn/static/fbCziQZfom9wQCGufMffpi/image.png)]

6. 【4→5地图渲染问题】地图渲染重构、规范化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gm7pexdp-1641263942667)(https://secure2.wostatic.cn/static/bCN1qyBqrXaDVon4oH8M9L/image.png)]

问题

【升级后地图注册兼容性】echarts5升级后，地图数据的引入不再支持从js引入china.js 、等地图渲染。取代的是引用chain.json使用geoJSON来注册可用的地图
1. 4内置的China.js以及各个省份的地图数据，而5中不再使用，需要使用注册的形式按需引入geoJSON来渲染地图
【规范性】地图中的省市名称不规范，升级后。如‘浙江’无法映射所注册地图上的‘浙江省’数据中（前端映射中名称不规范，导致后端还特意将规范格式做截断返回给前端使用）

解决

规范化前端枚举js 【

china-province.js

】、并与后端沟通，将其特殊截断逻辑删除，返回规范化省市名称

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JiDmfjiu-1641263942668)(https://secure2.wostatic.cn/static/4FUYwguUZYYq6ZMr9rwEkK/image.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKPxRVDq-1641263942668)(https://secure2.wostatic.cn/static/so1aZxgd218uQsBvEq6arT/image.png)]
cdn内原有地图相关js不再使用，替换成为对应的JSON文件

对应的geoJSON文件可以自己去找

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J3Or2qYq-1641263942669)(https://secure2.wostatic.cn/static/rgEvfuN5TEAm7VQTEkDD4e/image.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OCvYhWWe-1641263942669)(https://secure2.wostatic.cn/static/bpTFZEHfLX8GdYWBXgnsao/image.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TJplcZLr-1641263942670)(https://secure2.wostatic.cn/static/8Rw3rNFN16ubY9gQajyqWp/image.png)]
替换执行js渲染地体、使用geoJSON注册对应地区的来渲染地图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tHAwdBYo-1641263942670)(https://secure2.wostatic.cn/static/o6jUuQoJarqSH9NmMHANEb/image.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VAKIu40d-1641263942671)(https://secure2.wostatic.cn/static/khy6sgvUnnN1RatRoG8XQ4/image.png)]

查询条件省份变更、点击省份下穿都需要注意的问题(移动端不支持下穿)

**※****总结目前地图组件的渲染逻辑顺序是：1. 确保还未初始化echarts

→

2.注册相应地图数据

→

3. 向后端请求地图中需要展示的数据

→

4. 初始化echarts开始渲染地图 **

其中当我们变更省份或者点击下穿地图前，就需要确保echarts还未初始化，所以代码中通过v-if控制echarts重新初始化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-trl4dojC-1641263942671)(https://secure2.wostatic.cn/static/c6joaxQjm49ZzbA7isR6Se/image.png)]

原文链接：https://blog.csdn.net/weixin_44296432/article/details/122298037