程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

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

发布于2022-01-06 20:20     阅读(1264)     评论(0)     点赞(5)     收藏(0)


原文是用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)]

问题

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

解决

  1. 规范化前端枚举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)]

  2. 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)]

  3. 替换执行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. 查询条件省份变更、点击省份下穿都需要注意的问题(移动端不支持下穿)

**※****总结目前地图组件的渲染逻辑顺序是:1. 确保还未初始化echarts 2.注册相应地图数据 3. 向后端请求地图中需要展示的数据 4. 初始化echarts开始渲染地图 **

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

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




所属网站分类: 技术文章 > 博客

作者:听说你混的不错

链接:http://www.qianduanheidong.com/blog/article/283856/0117519fd83b2d29222d/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

5 0
收藏该文
已收藏

评论内容:(最多支持255个字符)