发布于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)]
main.js内
import echarts from 'echarts' 引入改为 -> import * as echarts from 'echarts'
保持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
涉及文件:chart-list.vue、custom.vue
(本地不再需要手动修改逻辑来实现图表全屏)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2p1jj5GD-1641263942663)(https://secure2.wostatic.cn/static/94ZoyAekWerpmdxrot91BF/image.png)]
涉及文件:graph.vue
通过bus的graphResize,可以全局执行对图表的重绘
通过重绘方法可解决: 显示及隐藏echart图表导致图表绘制宽高渲染问题、容器宽高变更导致的图表未适应宽高的问题
bus.$emit('graphResize')
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)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2hISK01-1641263942666)(https://secure2.wostatic.cn/static/xBmaajRP58fLcQ1cqaAyv6/image.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DGfmYVkE-1641263942666)(https://secure2.wostatic.cn/static/fbCziQZfom9wQCGufMffpi/image.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gm7pexdp-1641263942667)(https://secure2.wostatic.cn/static/bCN1qyBqrXaDVon4oH8M9L/image.png)]
规范化前端枚举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)]
作者:听说你混的不错
链接:http://www.qianduanheidong.com/blog/article/283856/0117519fd83b2d29222d/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!