echarts_饼状图-空心

 

let totalNum = 32;
      let dataV = [
        { value: 1048, name: "恶意软件" },
        { value: 735, name: "窃听攻击" },
        { value: 580, name: "密码攻击" },
        { value: 484, name: "暴力破解" },
        { value: 300, name: "木马攻击" },
      ];
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
          textStyle: {
            fontSize: 30, //设置文字大小为14像素
          },
        },
        grid: {
          top: "10%", // grid距离容器顶部的距离
          left: "10%", // grid距离容器左侧的距离
          right: "10%", // grid距离容器右侧的距离
          bottom: "10%", // grid距离容器底部的距离
          // containLabel: true, // grid 区域是否包含坐标轴的标签
          // 其他可配置的属性...
        },
        legend: {
          orient: "vertical", // 垂直显示
          right: "20%",//legend距离canvas右边的距离
          y: "center",//legend距离canvas上面的距离
          icon: 'rect',//长方形
          selectedMode: true,
          itemWidth: 26, //图标宽
          itemHeight: 16,//图标高
          itemGap: 30,//图标上下高度
          textStyle: { //文字颜色
            color: "#fff",
            fontSize: 28,
            padding:[0,20]//文字与图形之间的左右间距
          },
        },
        title: {
          //标题位置
          left: "39%", // left的值为'left', 'center', 'right'
          top: "38%", // top middle bottom
          itemGap: 10, // 主副标题之间的间距，默认为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: 50, //字体大小
          },
          //副标题
          subtext: "总攻击数量",
          //副标题文本样式
          subtextStyle: {
            color: "#fff", //颜色
            fontSize: 25, // 字体大小
          },
        },
        graphic: [
          {
            type: "image",
            left: "265",
            top: "85",
            z: -10,
            //bounding: "raw",
            //rotation: 0, //旋转
            //origin: [510, 100], //中心点
            scale: [0.95, 0.95], //缩放
            style: {
              image: require("@/assets/img/largeScreen/wx_type.png"),
              opacity: 1,
            },
          },
          /* {
            type: "text", // 类型，可以是文字、图片或其它类型
            id: "text1",
            left: "37%",
            top: "39%",
            style: {
              text: totalNum,
              fill: "#fff",
              fontSize: 50,
            },
          }, */
          /* {
            type: "text",
            id: "text2",
            left: "34%",
            top: "53%",
            style: {
              text: "总攻击数量",
              fill: "#fff",
              fontSize: 25,
            },
          }, */
        ],
        series: [
          {
            type: "pie",
            radius: ["60%", "75%"], //内圈，外圈
            center: ["40%", "48%"], //位置
            itemStyle: {
              emphasis: {
                opacity: 0.7,
              },
              normal: {
                //饼状图每个的颜色
                color: function (params) {
                  var colorList = [
                    "#009FE1",
                    "#14CDF1",
                    "#0FB49D",
                    "#FFD300",
                    "#6C81FF",
                  ];
                  return colorList[params.dataIndex];
                },
                borderColor: "#00275C",
                borderWidth: 10,
              },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: dataV,
          },
        ],
      };