echarts圆环占比效果

    let echarts = require('echarts');
    var BorderWidth = '10';
    //反方向剩下部分的样式
    var placeHolderStyle = {
      normal: {
        label: {
          show: false,
          position: "outside"
        },
        labelLine: {
          show: false,
          length: 100,
          smooth: 0.5
        },
        /* color: "rgba(0,0,0,0)",
         borderColor: "rgba(0,0,0,0)",*/
        borderWidth: BorderWidth,
        /*shadowBlur: 40,*/
        borderColor: "#BEBEBE"
      },
      emphasis: {
        color: "#dedede",
        borderColor: "#dedede",
        borderWidth: 0

      }
    };
    // 初始化echarts实例
    let fruitChart = echarts.init(document.getElementById('fruit'));
    fruitChart.setOption({
      title: {
        text: '水果统计',
        /*subtext: '纯属虚构',*/
        left: 'center'
      },
      /* backgroundColor: '#000',*/
      color: ['#53f1f2', '#4ebefd', '#30ed9d', '#faa234'],
      legend: {
        show: true,
        orient: 'vertical',
        left: 'left',
        top: 'middle',
        data: ['苹果', '香蕉', '梨', '葡萄'],
        textStyle: {
          /*color: '#fff',*/
          fontSize: 16
        }
      },
      series: [{
        name: '葡萄',
        type: 'pie',
        clockWise: true, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [100, 101],
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: 'outside'
            },
            labelLine: {
              show: false,
              length: 100,
              smooth: 0.5
            },
            borderWidth: BorderWidth,
            /*shadowBlur: 40,*/
            borderColor: "#53f1f2"
            /*shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
          }
        },
        data: [{
          value: 7,
          name: '70%'
        },
          {
            value: 3,
            name: '',
            itemStyle: placeHolderStyle
          }
        ]
      }, {
        name: '梨',
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        radius: [80, 81],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false,
              length: 100,
              smooth: 0.5
            },
            borderWidth: BorderWidth,
            /* shadowBlur: 40,*/
            borderColor: "#4ebefd",
            /*  shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
          }
        },
        data: [{
          value: 6,
          name: '60%'
        },
          {
            value: 4,
            name: '',
            itemStyle: placeHolderStyle
          }
        ]
      }, {
        name: '香蕉',
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        radius: [60, 61],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false,
              length: 100,
              smooth: 0.5
            },
            borderWidth: BorderWidth,
            /*shadowBlur: 40,*/
            borderColor: "#30ed9d",
            /*shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
          }
        },
        data: [{
          value: 5,
          name: '40%'
        },
          {
            value: 5,
            name: '',
            itemStyle: placeHolderStyle
          }
        ]
      }, {
        name: '苹果',
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        radius: [40, 41],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false,
              length: 100,
              smooth: 0.5
            },
            borderWidth: BorderWidth,
            /* shadowBlur: 40,*/
            borderColor: "#faa234",
            /*shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
          }
        },
        data: [{
          value: 5,
          name: '30%'
        },
          {
            value: 5,
            name: '',
            itemStyle: placeHolderStyle
          }
        ]
      }]
    });