利用 CSS conic-gradient 制作饼图和色盘

在 css 里面设置渐变常用的有两种方式，一个是 linear-gradient 线性渐变，还有一个 radial-gradient 辐射渐变。线性渐变是从一条直线方向上，把一个颜色过渡到另一个颜色，辐射渐变是从一个区域的中心开始，向外扩散，从一个颜色过渡到另一个颜色。CSS 里边还有一个不太常用的渐变： conic-gradient，圆锥渐变。

简单的例子

conic-gradient 的过渡方式与 radial-gradient 辐射渐变类似，也是从一个区域的中心开始，但是过渡方式为围绕中心一周，从一个颜色过渡到另一个颜色。比如说有这么一个例子，在 html 里边定义了一个 div，class 为 conic，然后给它设置一下样式，宽高都是 300 像素，border-radius 设置为 50%，把它改成圆形，背景使用 conic-gradient，生成圆锥渐变，这个函数它接受了两个颜色参数，一个是 yellow 黄色，一个 green 绿色，然后它生成的效果就是这样的：

conic-gradient

右边是黄色，然后左边是绿色，这样从黄到绿，顺时针转一圈。看到这个两个颜色结合的地方，是一个比较硬的过渡，也就是一个明确的分界线：

<style>
  .conic {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: conic-gradient(yellow, green);
  }
</style>
<body>
  <div class="conic"></div>
</body>

画饼图

利用这种明确的分界线，我们可以用 conic-gradient() 画一个饼图：在同一个位置设置两个不同的颜色，这样两个颜色间就没有了过渡。把上边的例子改一下：

<style>
  .pieChart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
      hsl(250, 50%, 70%) 0deg 50deg,
      hsl(250, 50%, 60%) 50deg,
      100deg,
      hsl(250, 50%, 50%) 100deg,
      250deg,
      hsl(250, 50%, 40%) 250deg,
      270deg,
      hsl(250, 50%, 30%) 270deg
    );
  }
</style>
<body>
  <div class="pieChart"></div>
</body>

这里假设饼图有五个部分，用相近的五个颜色来表示，那么每种颜色按照一定比例占据饼图的一部分。使用 conic-gradient() 的时候，除了直接指定颜色，还能指定颜色所占的区域，用角度来表示。因为使用的是相近的颜色，那么我们这里使用 hsl() 颜色表示法，使用同一个颜色色相，每部分使用不同的亮度，颜色后边的两个参数一个是开始角度，一个是结束角度，比如说第 1 个颜色用的是 hsl(250, 50%, 70%) 0deg 50deg，他的起始角度是 0 度，结束角度是 50 度，第 2 个颜色起始角度是 50 度，跟第 1 个颜色的结束角度是一样，这样的话它们就有一个明确的分界，没有过渡了，后面的颜色也都是这样设置，最后就可以画出来这样一个紫色的饼图：

pie-chart

这里我们也可以利用 CSS 变量生成一组不同颜色的饼图：

<style>
  body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .pieChart {
    --hue: 250;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
      hsl(var(--hue), 50%, 70%) 0deg 50deg,
      hsl(var(--hue), 50%, 60%) 50deg 100deg,
      hsl(var(--hue), 50%, 50%) 100deg 250deg,
      hsl(var(--hue), 50%, 40%) 250deg 270deg,
      hsl(var(--hue), 50%, 30%) 270deg
    );
  }

  .pieChart1 {
    --hue: 240;
  }
  .pieChart2 {
    --hue: 230;
  }
  .pieChart3 {
    --hue: 220;
  }
  .pieChart4 {
    --hue: 0;
  }
  .pieChart5 {
    --hue: 10;
  }
  .pieChart6 {
    --hue: 20;
  }
  .pieChart7 {
    --hue: 80;
  }
  .pieChart8 {
    --hue: 90;
  }
</style>
<body>
  <div class="pieChart pieChart1"></div>
  <div class="pieChart pieChart2"></div>
  <div class="pieChart pieChart3"></div>
  <div class="pieChart pieChart4"></div>
  <div class="pieChart pieChart5"></div>
  <div class="pieChart pieChart6"></div>
  <div class="pieChart pieChart7"></div>
  <div class="pieChart pieChart8"></div>
</body>

我们在 html 中编写 8 个饼图结构，然后在基础样式的基础上再加上自己单独的样式，pieChart 1 到 8，分别用于调整变量的值。在 CSS 中，我们把色相单独拿出来，在 .pieChart 的样式中定义为 --hue，值为 250，把 conic-gradient() 中 hsl 的第一个参数改为使用这个变量。接着，在每个饼图单独的样式中，随机修改一下 --hue 的数值，这样就可以生成一组不同颜色的饼图，可以作为一些装饰性的元素或背景，这种不太适合制作真实的饼图，因为作为背景的图片对于外部的可访问性不好。

制作色盘

我们还可以利用 conic-gradient() 画一个色盘，因为色盘也是从 0~~360 度，均匀的分布了所有的颜色。我们可以把之前饼图的例子简单的改一下，把颜色按照 45 度一级，给它排列开，从 0~~360 度，这样的话，它就能变成一个色盘了：

<style>
  .colorwheel {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
      hsl(0deg, 100%, 50%),
      hsl(45deg, 100%, 50%),
      hsl(90deg, 100%, 50%),
      hsl(135deg, 100%, 50%),
      hsl(180deg, 100%, 50%),
      hsl(225deg, 100%, 50%),
      hsl(270deg, 100%, 50%),
      hsl(315deg, 100%, 50%),
      hsl(360deg, 100%, 50%)
    );
  }
</style>
<body>
  <div class="colorwheel"></div>
</body>

这个就是使用 css 制作饼图和色盘的过程，利用了一个比较小众的 conic-gradient 圆锥渐变，它是围绕区域中心对颜色进行过渡的方式，利用它我们可以制作很多有创意的图形和装饰元素。你学会了吗？如果有帮助三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑，示例全部都为工作项目简化而来，学完即可直接上手开发！

即使你已经是高级前端工程师，在课程里也可能会发现新的知识点和技巧，让你的工作更加轻松！

《React 完全指南》课程，包含 React、React Router 和 Redux 详细介绍，所有示例改编自真实工作代码。点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程，包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解，让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程，利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书，包含 JavaScript 全面的语法知识和新特性，可在京东、当当、淘宝等各大电商购买

简单的例子​

画饼图​

制作色盘​

简单的例子

画饼图

制作色盘