echarts实现饼图渐变颜色

<template>
  <div>
    <Echart
      :options="options"
      id="centreLeft1Chart"
      height="193px"
      width="380px"
      style="
        border: solid rgb(83, 146, 199) 1px;
        margin: 5px;
        border-radius: 5px;
      "
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/components/echart";

import * as echarts from "echarts";
export default {
  data() {
    return {
      options: {},
      data: [
        { value: 52, name: "成功" },
        { value: 28, name: "中断" },
        { value: 24, name: "失败" },
        { value: 20, name: "超时" },
      ],
    };
  },
  components: {
    Echart,
  },
  created() {
    let that = this;
    this.options = {
      tooltip: {
        //鼠标上移显示
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      toolbox: {
        show: true,
      },
      calculable: true,
      legend: {
        itemHeight: 12,
        itemWidth: 12,
        orient: "horizontal",
        itemGap: 20,
        x: "57%",
        y: "center", //可设定图例在上、下、居中
        textStyle: {
          color: "#000000",
          fontSize: 12,
          rich: {
            name: {
              fontSize: 12,
              color: "#adaab0",
              padding: [30, 0, 20, 1], //上，右，下，左
            },
            num: {
              fontSize: 12,
              padding: [-30, 0, 0, -40],
            },
            nums: {
              fontSize: 12,
              padding: [-30, 0, 0, 5],
              color: "#adaab0",
            },
            unit: {
              fontSize: 12,
              padding: [-30, 0, 0, 5],
              color: "#0048FF",
            },
          },
        },
        formatter: function (labelName) {
          const count = that.arrCount(that.data);
          const val = that.data.filter((item) => {
            return item.name === labelName;
          });

          return [
            `{name|${labelName}}\n`,
            `{num|${(val[0].value / count).toFixed(2) * 100}%}{nums||}{unit|${
              val[0].value
            }}`,
          ].join("\t\t");
        },
      },

      graphic: [
        //饼图中间数字和文字显示
        {
          type: "text",
          left: "20%",
          top: "70px",
          z: 2,
          zlevel: 100,
          style: {
            text: "已完成数",
            fill: "#bbbbbb", //颜色
            font: "bold 10px Microsoft YaHei", //字体
          },
        },
        {
          type: "text",
          left: "21%",
          top: "90px",
          z: 2,
          zlevel: 100,
          style: {
            text: this.data.reduce((n, i) => {
              //循环数据得到总数
              return (n += i.value);
            }, 0),
            fill: "#000000",
            font: "bold 15px Microsoft YaHei",
          },
        },
      ],
      series: [
        {
          //外圈数据
          name: "完成数",
          type: "pie",
          radius: [55, 80],
          roseType: "area",
          center: ["25%", "45%"],
          itemStyle: {
            normal: {
              color: (list) => {
                // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                var colorList = [
                  {
                    colorStart: "#488BFF",
                    colorEnd: "#9abffd",
                  },
                  {
                    colorStart: "#e2def9",
                    colorEnd: "#9889e6",
                  },
                  {
                    colorStart: "#FFC069",
                    colorEnd: "#df7d66",
                  },
                  {
                    colorStart: " #d1dcf8",
                    colorEnd: "#f2f0fe",
                  },
                ];
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    //左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]["colorStart"],
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]["colorEnd"],
                  },
                ]);
              },
            },
          },

          label: {
            normal: {
              position: "inner", //不显示指示线文字
              show: false, //不显示指示线文字
            },
          },
          data: that.data,
        },
        {
          //内圈数据
          name: "完成数",
          type: "pie",
          radius: [55, 65],
          roseType: "area",
          center: ["25%", "45%"],
          itemStyle: {
            normal: {
              color: (list) => {
                // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                var colorList = [
                  {
                    colorStart: "#9abffd",
                    colorEnd: "#d0d9f6",
                  },
                  {
                    colorStart: "#f8f5fd",
                    colorEnd: "#bdb4eb",
                  },
                  {
                    colorStart: "#faf0ef",
                    colorEnd: "#ebb1a5",
                  },
                  {
                    colorStart: " #f8f5fd",
                    colorEnd: "#f2f3f8",
                  },
                ];
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    //左、下、右、上
                    offset: 0,
                    color: colorList[list.dataIndex]["colorStart"],
                  },
                  {
                    offset: 1,
                    color: colorList[list.dataIndex]["colorEnd"],
                  },
                ]);
              },
            },
          },

          label: {
            normal: {
              position: "inner", //不显示指示线文字
              show: false, //不显示指示线文字
            },
          },
          data: that.data,
        },
      ],
    };
  },
  methods: {
    arrCount(arr) {
      let count = 0;
      arr.forEach((item) => {
        count = count + item.value;
      });
      return count;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>