这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录一下在公司遇到的一些功能,以及相关实现

以上的内容我花了一周时间去实现的,自己也觉得时间很长,但主要因为很少使用ECharts,导致使用的过程中大部分的时间都在查文档。

对于上面的这些功能点,其实算是写了两遍吧,这周一开了个Code Review,因为涉及到公共组件了,所以得想办法迁移出去,导致得重新改善一下代码;另一方面的话,主要是我把每一个功能其实都拓展成一个图表了(也就是说包括主图表、内环图表、外环图表、环形文字图表),会导致渲染消耗太大,所以得进行细分,也就是加入到series里即可。

接下来我们来说说各个功能点如何实现吧

内环

效果如下

简单说就是在饼图内部实现一个圆环的旋转效果,因为长度、颜色的相关联,

所以我的思路就是再画一个饼图图表去实现它,然后删除lengend、tooltip等相关提示。

一开始想多添加一个series解决的,但是因为需要旋转效果,不好获取这个元素,所以就把它抽离出来,单独实现一个了

删除图表相关提示信息的代码

option = {
backgroundColor: 'transparent',
tooltip: {
show: false
},
legend: {
show: false
},
series: [
{
silent: true, // 禁用图标中的点击和触摸事件
left: 0,
label: {
show: false
},
itemStyle:
borderWidth: 0,
borderRadius: 0,
}
}
]
}

渐变色效果

主要就是通过线性渐变去实现的,还看了几个不错的文章,只是实现比较复杂,但效果更好一点

玩转ECharts之实现“环形渐变”

color: props.option.color.map(color => {
return {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0,180,255,.05)' // 0% 处的颜色
},
{
offset: 1,
color: color // 100% 处的颜色
}
]
}
})

最终实现效果

外环

效果如下

简单说就是在饼图外部实现一个圆环的扩展弧度

因为我们的图表可能存在多个series,即多个环形图,所以我们需要找到最外部的最大环半径,从它开始向外扩展(这个可以扩展到series上,无需再添加一个图表)

实现上和内环其实一样的,只要修改一个radius的显示位置即可,从最大环半径开始向外拓展。

最终实现效果

环形间隔

效果如下

这个网上例子其实挺多的,主要的方式就是拓展data数据,然后设置itemStylecolor为透明色即可,看起来很简单;但是在我们的项目里会有一定难度,因为我们的data处理被封装到内部公共组件去处理了,所以没办法去直接修改data

这里的思路(组长提供的),传一个方法到内部去,然后获取到其更新data后的option,并在更新前进行处理

所以我的方式是设置了一个方法 handleOptionBeforeUpdate ,接收instance、option两个参数,instace后面的轮播动画会使用到,现在只需要使用option,我们对其进行修改,再返回一个新的option回去,让它进行更新即可

插入间隙

    // 计算间隙(根据比例判断间隙需要多大)
const sum = option.series[0].data.reduce((sum, d) => sum + +d.value, 0)
const val = (sum * props.borderGap) / 10
for (const series of option.series) {
series.data = series.data.reduce(
(sum, d) => [
...sum,
d,
{ name: '', value: val, itemStyle: { color: 'transparent' } }
],
[]
)
}

最终实现效果

轮播动画

效果如下

这个看着很难,但是网上例子挺多的,随便找找就有好几个

主要就是通过定时器和 ECharts实例 去用代码触发action

dispatchAction

    instance.dispatchAction({
type: 'downplay',
seriesIndex: 0, // 系列
dataIndex: 0 // 具体index
})

type类型

  • highlight —— 高亮
  • downplay —— 取消高亮
  • showTip —— 显示Tooltip
  • hideTip —— 隐藏Tooltip
  • select —— 选中
  • unselect —— 取消选中

我们后面讨论决定选择使用highlight和downplay两种

不使用select的原因,主要是因为selct选中在项目里有问题,会存在选中多个的情况,无法取消选中,通过的方式是重新渲染图表,但是太消耗性能了,而且选中会导致居中文字偏移,所以放弃了这种方式

接下来,看一下具体的定时器方法

    const timer = useRef<NodeJS.Timer>()
const currentIndex = useRef<number>(0) const resetSelect = () => {
eChartInstance.current?.dispatchAction({
type: 'downplay',
seriesIndex: 0
})
} const selectSector = () => {
eChartInstance.current?.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex.current
})
} // 轮播动画
const rotatingAnimation = () => {
if (props.rotatingAnimation.isActive) {
clearInterval(timer.current)
timer.current = setInterval(() => {
const dataLen = eChartOption.current?.series[0].data.length ?? 0
currentIndex.current = (currentIndex.current + 2) % dataLen
resetSelect()
selectSector()
}, props.rotatingAnimation.duration * 1000)
} else {
resetSelect()
}
} useEffect(() => {
rotatingAnimation()
return () => {
clearInterval(timer.current)
}
}, [props.rotatingAnimation])

主要就是定时器这一块,其实挺简单的

最终实现效果

环形文字

效果如下

这个文字效果我找了很久也没看到完美的实现方案,目前有两种比较可行的方案,一种是根据位置旋转每一个文字(不大现实),另一种就是通过旭日图去显示了,旭日图的文字是支持这种方式的。

    const textSeries = {
type: 'sunburst',
sort: null,
silent: true, // 禁用图标中的点击和触摸事
nodeClick: false,
label: {
show: true,
position: 'outside',
rotate: 'tangential', // 实现!!!
align: 'right',
distance: 10,
padding: [0, -15] // 进行偏移
},
itemStyle: {
borderWidth: 0,
borderRadius: 0,
color: 'transparent'
}
}

其他图表的文字也能实现tangential,但是无法进行偏移

最终实现效果

本文转载于:

https://juejin.cn/post/7299346799210397708

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--ECharts — 饼图相关功能点(内环、外环、环形间隔、环形文字、轮播动画)的更多相关文章

  1. AdPlayBanner:功能丰富、一键式使用的图片轮播插件

    AdPlayBanner:功能丰富.一键式使用的图片轮播插件 AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresc ...

  2. 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

  3. 前台主页功能-前台轮播图功能完成-git介绍和安装-git使用流程-git常用命令-git忽略文件

    目录 前台主页功能-前台轮播图功能完成-git介绍和安装-git使用流程-git常用命令-git忽略文件 昨日内容回顾 今日内容概要 今日内容详细 0 导出项目依赖 0 学长问题解析 1 前台主页功能 ...

  4. 定时器图片轮播淡入淡出基本功能已实现,正在修改BUG中。。(附图效果和源代码)

    用JQ写的源码如下: 实现功能: 1,图片自动按顺序轮播,轮播选中的图片透明度为1,其他为0.1: 2,鼠标停在的图片上透明度为1,其他为0.1: 3,鼠标离开,继续轮播,起始位置为鼠标停在的图片的下 ...

  5. 接上一篇中记录Echarts进度环使用【不同状态不同进度环颜色及圈内文字】--采用单实例业务进行说明

    接上一篇中记录Echarts进度环使用 此处处理不同状态下不同进度环颜色及圈内文字等的相关处理,采用实际案例源码说明 -----------------偶是华丽丽分割线---------------- ...

  6. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

  7. echarts饼图配置

    js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...

  8. SQL数据同步到ELK(四)- 利用SQL SERVER Track Data相关功能同步数据(上)

    一.相关文档 老规矩,为了避免我的解释误导大家,请大家务必通过官网了解一波SQL SERVER的相关功能. 文档地址: 整体介绍文档:https://docs.microsoft.com/en-us/ ...

  9. nginx之rewrite相关功能

    Nginx Rewrite相关功能 Nginx服务器利用ngx_http_rewrite_module 模块解析和处理rewrite请求,此功能依靠 PCRE(perl compatible regu ...

  10. iOS开发中WiFi相关功能总结

    http://www.cocoachina.com/ios/20160715/17022.html 投稿文章,作者:Haley_Wong(简书) 查漏补缺集是自己曾经做过相关的功能,但是重做相关功能或 ...

随机推荐

  1. Google三驾马车之二:MapReduce

    第一次接触mr还是在入门mit6.824的lab1,最近重新读了一遍原始论文,又有了一些新的想法,简单做一些记录. 作为Google分布式系统的重要组成,本篇文章核心在于map/reduce操作带来的 ...

  2. JS LeetCode 566. 重塑矩阵题解分析,数组降维的几种方式

    壹 ❀ 引 今天是过完年到公司的第二天,年前因为封版,到今天我们小组是第一个发版的组,然后就各种踩坑,到现在还在公司等运维解决jenkins问题,闲着也是闲着,做一道算法题,简单记录下解题思路,本题来 ...

  3. Sora文生视频模型深度剖析:全网独家指南,洞悉98%关键信息,纯干货

    Sora文生视频模型深度剖析:全网独家指南,洞悉98%关键信息,纯干货 Sora是一个以视频生成为核心的多能力模型,具备以下能力: 文/图生成视频 视频生成视频 1分钟超长高质量视频生成 视频裂变多视 ...

  4. centos7搭建postgresql主从(主备)架构

    本篇介绍如何在centos7系统搭建一个postgresql主备集群实现最近的HA(高可用)架构.后续更高级的HA模式都是基于这个最基本的主备搭建. 节点规划 ip 主机名 用途 192.168.18 ...

  5. [Android 逆向]Xposed 破解 切水果大战原版.apk

    代码 public class Main implements IXposedHookLoadPackage { boolean flag = false; @Override public void ...

  6. 解决Linux平台Selenium截图中文乱码问题

    通常情况下,像CentOS这样的Linux发行版默认是缺少中文字体的,所以在执行Selenium截图时,如果目标网页中有中文,则截图后中文将会显示为方块一样的乱码. 解决办法:手动安装中文字体即可. ...

  7. 【Azure Redis 缓存】Redis导出数据文件变小 / 在新的Redis复原后数据大小压缩近一倍问题分析

    问题描述 使用 Azure Cache for Redis 服务,在两个Redis服务之间进行数据导入和导出测试.在Redis中原本有7G的数据值,但是导出时候发现文件大小仅仅只有30MB左右,这个压 ...

  8. 2024年,提升Windows开发和使用体验实践 - 小工具篇

    前言 本来是一篇文章的,不知不觉写成了系列. 其实开工那几天就已经写好了长文,这几天一忙就没连着发了. 本文介绍一些 Windows 上用的小工具. 美化/折腾/小工具 虽然这是在用 Windows ...

  9. STL-priority_queue模拟实现

    #include<deque> //测试用 #include<vector>//测试用 #include"9Date.h"//测试用 #include< ...

  10. mysql-批量修改表的主键id,修改成联合主键

    1.sql脚本 一. 通过sql脚本,查出所有表的功能,并编写插入修改的联合主键,sql select concat('ALTER table ', TABLE_NAME, ' DROP PRIMAR ...