Echarts实现环形渐变

已于 2023-08-10 15:15:23 修改
阅读量1.4k 收藏 2
点赞数 2
分类专栏： Echarts 文章标签： echarts 前端
于 2023-07-25 20:40:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L001231/article/details/131925674
版权

因为需项目需求，要实现一个环形渐变的效果，如下图：

因为环形图中各项数据的不同，所以我们不能通过常规的方式去设置各项的渐变方向 

这种方式设置的渐变色方向是一致的，实现不了我们想要的效果，我们需要通过环形图中各项数据的值动态计算各项的渐变色方向。大致步骤如下：

1.计算环形图中各项数值所占的区间

2.封装根据开始弧度和结束弧度来计算坐标值，使用拿到的坐标值去计算我们在定义线性渐变时所需要的（x、x2、y、y2） 

最后遍历环形图数据，把拿到的渐变方向放入即可 

喜欢邓紫棋
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【解决方案】ECharts实现饼图径向渐变、线性渐变坐标计算
朝拜者
01-11 525
ECharts实现饼图径向渐变、线性渐变坐标计算
一个渐变旋转的圆环
08-09
一个渐变旋转的圆环
echarts 实现环形渐变
热门推荐
Jovan的博客
06-22 1万+
需求：                        环形图是 echarts 中 pie 图的一个变种，echarts 官方对于 pie 图的颜色渐变只支持两种：linear 线性渐变与 css 3 的 Linear Gradients 相似，即向下/向上/向左/向右/角度方向渐变，类似与射线radial 镜像渐变与 css 3 的 Radial Gradients 相似，即从圆心向外一圈圈渐变...
使用echarts生成颜色渐变曲线图
最新发布
湾流~ 的博客
03-04 547
附: 计算显示日期的工具文件。1、安装echarts。
纯CSS实现颜色渐变效果（包含环形渐变、线性渐变、彩虹效果等）
09-25
通过CSS border-radius，我向大家展示了如何实现方形元素的圆角效果，这解决了以前美工画出这种效果而开发人员无法实现的问题。CSS渐变色(Gradients)也是一个类似的技术。现在火狐，谷歌浏览器，Safari，IE8+都支持这种技术，我们可以安全的在网站上使用它
Echarts实现环形图的渐变颜色效果
mingY的博客
09-13 4111
已经封装好的环形图组件 直接在要用的vue文件中引用： <circleChart :id="chart4.id" :width="chart4.width" :height="chart4.height" :bgColor="chart4.bgColor" :circleData="chart4.cir...
使用echart画出渐变色饼图（圆环图环形渐变）
Dean_shiyi的博客
01-17 1万+
使用echart画出渐变色饼图（圆环图环形渐变） 说明 常用的渐变有径向渐变和线性渐变， 环形图是 echarts 中 pie 图的一个变种，echarts 官方对于 pie 图的颜色渐变只支持两种： linear 线性渐变 与 css 3 的 Linear Gradients 相似，即向下/向上/向左/向右/角度方向渐变 radial 镜像渐变 与 css 3 的 Radial Gradient...
echarts图表设置多环形图、渐变色及背景图添加
每一个想要学习的念头，都是未来的你在呼救。
06-26 2497
echarts图表中多环形图、渐变色、背景图设置。
echarts 圆环图渐变
qq_36437172的博客
05-15 4285
效果图如下： 主要属性说明： { name: '状态', type: 'pie', radius: ['25%', '36%'], avoidLabelOverlap: false, // 不启用防止标签重叠策略 data: [ { value: 330, name: '正常', itemStyle: { color: { type: 'linea
echarts实现环形图，有圆角，环形颜色渐变
weixin_40856652的博客
06-27 4999
最近大屏遇到要用 echarts 实现环形图，带有圆角的环形图，环形颜色渐变
echarts图表，利用仪表盘类型变换成环形渐变图
sinat_37885331的博客
04-06 2375
使用echarts 仪表盘 调整成可以根据角度不同，对环形进行线性渐变的环形图
iOS快速实现环形渐变进度条
01-04
前言 进度条相信我们大家都不陌生，往往我们很多时候需要使用到圆形进度条。这篇文章给大家分享了利用iOS如何快速实现环形进度条，下面来一起看看。 一：先制作一个不带颜色渐变的进度条 自定义一个cycleView，在.m 中实现drawRect方法 - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext();//获取上下文 CGPoint center = CGPointMake(100, 100); //设置圆心位置 CGFloat radius = 90; //设置半径 CG
Echarts饼图4.0（3D环形图、包含透明效果）
06-09
Echarts饼图4.0（3D环形图、包含透明效果）
echarts实现地图以及半圆图表
04-15
echarts实现地图以及半圆图表
Echarts环形图、饼图径向渐变示例
大剑师兰特的GIS世界
02-02 857
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
eCharts实现颜色渐变效果环形图
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
08-05 5014
之前我尝试了Element-ui的环形进度条实现颜色渐变效果 这个对eCharts来说简直就是小case。 完成之后的效果图如下： 对应的页面源代码如下： <template> <div class="panel-content"> <div style="width: 300px;height: 300px;background-color: #0E1824;" ref="chartContent"> </di
Echarts多个环形图，颜色渐变
Runce_的博客
06-03 601
radius:环形图的半径，数组的第一项是内半径，第二项是外半径。
Echarts饼图3.0（渐变双层圆环）
努力的nana
01-24 3171
代码： const item = { value: 0.75, status: '这是我的标签', name: '这是我的名称' } option = { angleAxis: { max: 100, clockwise: false, axisLine: { show: false }, axisTick: { show: false }, axisLabe
echarts 饼图 环形渐变
06-02
要在 ECharts 的饼图中实现环形渐变，可以使用 ECharts 的 `color` 属性来实现。以下是一个简单的示例代码： ```javascript option = { title: { text: '环形渐变饼图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 435, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], color: [ new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#fbb962'}, {offset: 0.5, color: '#f37b1d'}, {offset: 1, color: '#f37b1d'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#00c2ff'}, {offset: 0.5, color: '#008cff'}, {offset: 1, color: '#008cff'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#6fde6f'}, {offset: 0.5, color: '#00c633'}, {offset: 1, color: '#00c633'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#f5d114'}, {offset: 0.5, color: '#e8b027'}, {offset: 1, color: '#e8b027'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#3bafff'}, {offset: 0.5, color: '#0072ff'}, {offset: 1, color: '#0072ff'} ]) ] } ] }; ``` 在这个示例中，我们的饼图有 5 个扇形，每个扇形都有一个渐变颜色。我们使用 `new echarts.graphic.LinearGradient` 方法创建了一个线性渐变，然后将其分配给每个扇形。线性渐变的参数分别为 `0, 0, 0, 1`，表示从上到下的垂直渐变。在 `color` 属性中，我们将每个扇形的颜色设置为线性渐变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值