echarts 环形图，饼图，中间文字设置，数据块文字设置，图例的设置 , 饼图中间白条添加，饼图边框添加

1. 如下图所示：

 

 

 2. 环形图代码如下 

          vue引入echarts：https://blog.csdn.net/qq_34790644/article/details/119932743

     1. 中间字设置是 title ,数据内部显示文字是series中的label,图例是legend

     var sxechart=this.$echart.init(document.getElementById('echartId'))   

     var data = [
        {
          name: "正常兼职",
          value: 456
        },
        {
          name: "即将超期",
          value: 231
        },
        {
          name: "超期",
          value: 71
        }
      ];

      var subText = ((456 / (456 + 231 + 71)) * 100).toFixed(0) + "%";

      var option = {
        //环形图中间文字
        title: {
          text: "正常兼职",
          subtext: subText,
          textStyle: {
            fontSize: 12,
            color: "rgba(0,0,0,0.65)",
            fontWeight: 400
          },
          subtextStyle: {
            fontSize: 20,
            color: "#000000",
            fontWeight: 500
          },
          textAlign: "center", //图例文字居中显示
          x: "38%",   //距离左边的距离
          y: "37%"    //距离上边的距离
        },
        //数据的颜色设置
        color: ["#2BCB95", "#F6BD16", "#FF3B30"],
        //鼠标移入显示的文字
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/> {c}人  ({d}%)"
        },
        //图例设置
        legend: {
          orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          right: "10%",
          top: "center",
          align: "left",
          itemGap: 20,  //数据上下的距离
          icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 10, // 设置宽度
          data: data
        },
        series: [
          {
            radius: ["50%", "80%"], //第一个是中间圆的大小，第二个是外边圆的大小
            center: ["40%", "50%"], //左边的距离，上边的距离
            type: "pie",
            label: {、
              normal: {
                formatter: function(data) {
                  //.toFixed(0)去掉小数位，如果为2就是保留两位小数
                  let b = data.percent.toFixed(0) + "%";
                  subText = b;
                  return b;
                },
                // formatter: "{d}" + "%", //直接百分比，没有去掉小数位，上边是去掉小数位的
                //formatter: "{b}：{c}人"  //正常兼职：456 
                position: "inner", //文字显示在内部，如果在外边把这个去掉就好
                color: "#fff",     //文字的颜色
              }
            },
            data: data
          }
        ]
      };

      sxechart.setOption(option,true);

 2. 饼图的代码如下：

   

 var sxechart=this.$echart.init(document.getElementById('echartId')) 

 var option = {
        //鼠标移入显示文字
        tooltip: {
          trigger: "item",
          formatter: "{a}:{b}:({d}%)"
        },
        //图例设置
        legend: {
          orient: "vertical",
          left: "50%",
          top: "center",
          align: "left",
          itemGap: 20,
          icon: "circle",
          itemWidth: 10, // 设置宽度
          data: ["单位党委(党组，工委)审批", "区委组织部审批", "市委组织部审批"]
        },
        //颜色设置
        color: ["#5B8FF9", "#5AD8A6", "#78D3F8"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            radius: [0, "73%"], //饼图大小设置
            center: ["25%", "48%"], // 距离左边，距离上边距离
            //数据文字内部展示
            label: {
              normal: {
                formatter: "{d}%",
                position: "inner",
                color: "#fff"
              }
            },
            //中间的白边设置
            itemStyle: {
              // 此配置
              normal: {
                borderWidth: 1,
                borderColor: "#fff"
              },
            },
            data: [
              {
                value: 38.3,
                name: "单位党委(党组，工委)审批"
              },
              {
                value: 41.6,
                name: "区委组织部审批"
              },
              {
                value: 40.1,
                name: "市委组织部审批"
              }
            ]
          }
        ]
      };

     sxechart.setOption(option,true);

3. 不要忘了给echarts设置宽高哦！！！