如何在环形图上添加渐变色？

在AUI环形图中，添加渐变色通常涉及到在`series`对象内部设置`fillStyle`属性。AntV G2Plot允许使用各种颜色模式，包括线性渐变。下面是一个示例，展示如何创建一个带渐变色的环形图：

<template>
  <g2-ring :chart-data="ringData" :options="ringOptions" />
</template>

<script>
import { G2Ring } from '@antv/vue-g2plot';

export default {
  components: {
    G2Ring,
  },
  data() {
    return {
      ringData: {
        type: 'pie',
        data: [
          { name: '类别1', value: 30 },
          { name: '类别2', value: 45 },
          { name: '类别3', value: 25 },
        ],
      },
      ringOptions: {
        series: [
          { // 第一个扇区使用线性渐变
            type: 'ring',
            id: 'gradient-sector',
            fillStyle: {
              gradient: {
                type: 'linear', // 渐变类型
                x1: 0,       // 初始点x坐标
                y1: 0,       // 初始点y坐标
                x2: 0,       // 结束点x坐标
                y2: 1,       // 结束点y坐标
                stops: [
                  { offset: 0, color: 'red' }, // 点1
                  { offset: 1, color: 'yellow' }, // 点2
                ],
              },
            },
          },
          // 其他扇区保持默认颜色
          // ...
        ],
      },
    };
  },
};
</script>

在这个例子中，`stops`数组定义了渐变的颜色停止点，第一个颜色停靠点（offset: 0）从红色开始，第二个颜色停靠点（offset: 1）从黄色结束。