echarts 实现环形渐变

前言

最近产品在ecahrts官网上找到一个饼图想要实现这种从头到尾的渐变交互效果，一开始以为非常简单，echarts应该是提供了类似的配置项，知道做起来才发现，这其中没那么简单。

官网案例分析

官网例子中的渐变并不是echarts提供的配置项实现的，而是通过一张图片作为背景实现的渐变，所以一开始想着是先来实现一个渐变的饼图，然后通过多个饼图进行拼接来实现类似指针一样的效果，这样就能够实现自定义这个渐变的颜色，并且也很快就写出来一个demo

认识 Echarts 渐变色

在 echarts 的渐变色中，提供了三种类型，包括线性渐变(linear gradient)、径向渐变(radial gradient)和纹理填充(pattern)。

主要了解了一下线性渐变以及径向渐变的实现效果，在这之后，也意识到了一个严重的问题：通过echarts提供的颜色填充，貌似没办法实现案例里面这种从头到尾的渐变效果，通过线性渐变能够实现下面这种效果

这种固定方向的渐变，但是并不符合我们的要求，

并且我也上网找了一些饼图渐变的案例，发现都是通过这种线性渐变来实现的，只不过会去计算这个渐变的角度，来实现类似从头到尾的渐变，但是一旦进度的幅度较大，就马上露馅了。

例子

可以看到一旦我调大某一个区域的比例，就会发现最后的实现原理还是线性渐变，只不过动态的计算了角度，这种适合多个比例差不多的饼图，但是一旦有某个块比例过大，就还是会出现样式不够美观

奇思妙想

突然意识到，我们最终的目的是自定义这个圆环的起点和终点的颜色，这并不是非得用echarts提供的渐变功能，图片本身并没有问题，图片最大的限制就在于颜色是定好的，但是我们是不是可以让图片的颜色变成动态生成的？

当然可以！

与似乎，就有了下面的方案，通过 canvas 动态生成渐变背景，在讲这张背景图作为圆环的背景图，这样我们就能够实现自定义圆环的起点颜色和终点颜色了

canvas 生成渐变背景

canvas生成背景这个并不是什么难事，百度一下就能够找到类似的案例，然后丢给ai进行美化一下，修改参数变成自己想要的一个函数，我定义的是能够通过传入起点角度，起点颜色，终点颜色图片大小四个参数生成一张 base64 的图片

ts 复制代码

/**
 * 创建圆形渐变图片
 * @param startAngle 起始角度
 * @param startColor 起始颜色
 * @param endColor 结束颜色
 * @param size 大小
 * @returns
 */
export function createCircularGradientImage(startAngle = 0, startColor = '#fff', endColor = 'blue', size = 200) {
  // 创建一个canvas元素
  const canvas = document.createElement('canvas')
  // 设置canvas的宽度
  canvas.width = size
  // 设置canvas的高度
  canvas.height = size
  // 获取2D绘图上下文
  const ctx = canvas.getContext('2d')
  // 检查是否成功获取上下文
  if (!ctx) {
    throw new Error('ctx is null')
  }
  // 创建圆锥渐变
  // 参数：起始角度，圆心x坐标，圆心y坐标
  const gradient = ctx.createConicGradient(startAngle, size / 2, size / 2)
  // 添加渐变的起始颜色
  gradient.addColorStop(0, startColor)
  // 添加渐变的结束颜色
  gradient.addColorStop(1, endColor)
  // 设置填充样式并绘制矩形
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, size, size)
  // 将canvas转换为base64格式的图片数据
  const res = canvas.toDataURL('image/png')
  // 从DOM中移除canvas元素
  canvas.remove()
  // 返回生成的图片数据
  return res
}

最终我们能够得到一张类似这样的图片

结果

接下来的步骤就简单了，参考官网的案例，我们只不过是替换了图片的来源，这样就能够通过传参获得一个自定义颜色的结果。

js 复制代码

const _panelImageURL = createCircularGradientImage(0, '#E5E5FF', 'red')

最后的效果：

至于文字颜色和阴影颜色，这些都有着很明显的配置项，这里就不做过多的赘述了，本文主要是分享一下通过canvas构造图片来实现渐变的这种思路

如果有大佬有更好的实现渐变的思路欢迎评论区留言！