用CSS来打造绚丽多彩的渐变饼图

前端

2023-03-17 21:02:07

焕新你的数据展示：探索迷人的渐变饼图

数据可视化的秘密武器

饼图作为数据可视化的中流砥柱，在展现数据比例和分布方面独树一帜。但如果饼图局限于单调的实心色块，岂不是太乏味了？没错，渐变饼图横空出世，为你的数据展示注入一丝生机与活力。

CSS赋予饼图缤纷色彩

借助CSS的渐变色属性，我们能够轻松赋予饼图绚丽的渐变效果。它让你的饼图不再是乏味的色块，而是宛若画布上的彩虹，瞬间抓住用户的眼球。

打造渐变饼图的步骤

HTML结构：

<div class="pie-chart">
  <div class="pie-slice" data-value="20"></div>
  <div class="pie-slice" data-value="30"></div>
  <div class="pie-slice" data-value="40"></div>
  <div class="pie-slice" data-value="10"></div>
</div>

CSS样式：

.pie-chart {
  width: 200px;
  height: 200px;
  position: relative;
}

.pie-slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  transform-origin: center;
  transform: rotate(0deg);
}

.pie-slice:nth-child(1) {
  background: linear-gradient(to right, #ff0000, #ff8c00);
}

.pie-slice:nth-child(2) {
  background: linear-gradient(to right, #ffff00, #ff8c00);
}

.pie-slice:nth-child(3) {
  background: linear-gradient(to right, #00ff00, #008c00);
}

.pie-slice:nth-child(4) {
  background: linear-gradient(to right, #0000ff, #00008c);
}

计算饼图角度：

const pieSlices = document.querySelectorAll(".pie-slice");
const totalValue = Array.from(pieSlices).reduce((acc, curr) => acc + Number(curr.dataset.value), 0);

pieSlices.forEach((pieSlice, index) => {
  const value = Number(pieSlice.dataset.value);
  const angle = (value / totalValue) * 360;

  pieSlice.style.transform = `rotate(${angle}deg)`;
});

微信小程序中的渐变饼图

如果你想让渐变饼图在微信小程序中大显身手，不妨借助Taro+React框架。它让你用React语法同时开发小程序、H5和RN应用。

安装 Taro：

npm install -g @tarojs/cli

创建 Taro 项目：

taro init my-pie-chart

在 Taro 项目中使用渐变饼图：

import React, { useState } from "react";
import "./index.css";

const App = () => {
  const data = [
    { value: 20, color: "linear-gradient(to right, #ff0000, #ff8c00)" },
    { value: 30, color: "linear-gradient(to right, #ffff00, #ff8c00)" },
    { value: 40, color: "linear-gradient(to right, #00ff00, #008c00)" },
    { value: 10, color: "linear-gradient(to right, #0000ff, #00008c)" },
  ];

  const [angles, setAngles] = useState([]);

  React.useEffect(() => {
    const totalValue = data.reduce((acc, curr) => acc + curr.value, 0);

    const newAngles = data.map((d) => {
      return (d.value / totalValue) * 360;
    });

    setAngles(newAngles);
  }, []);

  return (
    <div className="pie-chart">
      {data.map((d, index) => (
        <div
          className="pie-slice"
          style={{
            transform: `rotate(${angles[index]}deg)`,
            background: d.color,
          }}
        ></div>
      ))}
    </div>
  );
};

export default App;