echarts-饼状图

let xdata = [
        "版本升级",
        "硬盘占用率",
        "CPU温度日志",
        "接口链略状态",
        "服务监控日志",
        "系统温度日志",
        "CPU占用率日志",
        "内存占用率日志",
        "攻击检测日志",
      ]; 
      let data = [
        { value: 1048, name: "版本升级" },
        { value: 735, name: "硬盘占用率" },
        { value: 580, name: "CPU温度日志" },
        { value: 484, name: "接口链略状态" },
        { value: 300, name: "服务监控日志" },
        { value: 1048, name: "系统温度日志" },
        { value: 735, name: "CPU占用率日志" },
        { value: 580, name: "内存占用率日志" },
        { value: 484, name: "攻击检测日志" },
      ]; 
      let totalNum = 546;
      const options = {
        //提示框
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
          textStyle: {
            fontSize: 15, //设置文字大小为14像素
          },
        },
        title: {
          //标题位置
          left: "39%", // left的值为'left', 'center', 'right'
          top: "40%", // top middle bottom
          itemGap: 8, // 主副标题之间的间距，默认为10
          text: totalNum, // 标题文本
          textAlign: 'center',
          // 标题文本样式
          textStyle: {
            color: "#fff", // 颜色
            fontStyle: "normal", // 字体风格,'normal','italic','oblique'
            fontWeight: "700", //字体粗细 'normal','bold','bolder','lighter',数值：100-700
            fontFamily: "sans-serif", //字体系列
            fontSize: 28, //字体大小
          },
          //副标题
          subtext: "总数量",
          //副标题文本样式
          subtextStyle: {
            color: "#fff", //颜色
            fontSize: 14, // 字体大小
          },
        },
        //图例样式的配置
        legend: [
          {
            orient: "vertical", // 垂直显示
            right: 100,
            y: "center",
            icon: "circle",
            selectedMode: true,
            itemWidth: 15, //图例标记的图形宽度。
            itemHeight: 15, //图例标记的图形高度。
            type: "scroll",
            textStyle: {
              color: "#fff",
              fontSize: 14,
              padding:[0,7]//文字与图形之间的左右间距
            },
            data: xdata,
          },
        ],
        /* graphic: [
          {
            type: "text", // 类型，可以是文字、图片或其它类型
            id: "text1",
            left: "32%",
            top: "40%",
            style: {
              text: totalNum,
              fill: "#fff",
              fontSize: 28,
            },
          },
          {
            type: "text",
            id: "text2",
            left: "36%",
            top: "55%",
            style: {
              text: "总数量",
              fill: "#fff",
              fontSize: 14,
            },
          },
        ], */
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "74%"], //内圈，外圈
            center: ["40%", "50%"], //左右 上下 位置
            z: 0,
            zlevel: 0,
            hoverAnimation: false,
            itemStyle: {
              emphasis: {
                opacity: 0.7,
              },
              normal: {
                //饼状图每个的颜色
                color: function (params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(70, 206, 197, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(68, 122, 224, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(57, 217, 184, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(70, 218, 244, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(52, 185, 6, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(58, 225, 88, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(202, 247, 66, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(205, 220, 2, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(247, 212, 84, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(253, 178, 0, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(70, 150, 206, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(68, 99, 224, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(121, 98, 248, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(141, 94, 254, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(248, 98, 238, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(224, 68, 216, 1)", // 颜色渐变
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(255, 81, 81, 1)", // 颜色渐变
                      },
                      {
                        offset: 1,
                        color: "rgba(255, 135, 81, 1)", // 颜色渐变
                      },
                    ]),
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };