echarts-半圆

制作半圆：用到echarts，并用markline制作了4条标线

 var data = [];
var banyuanData=[{
    typename: '项目一', count: 45756, color: ['#1eabfd', '#01f5fe']
   }, { 
       typename: '项目二', count: 32846, color: ['#5ae190', '#7ffe56']
   },{ 
       typename: '项目三', count:11623, color: ['#a35afd', '#e785fd']
  }];
  
 banyuanData.forEach(function (items, index) { 
     data.push({ 
         name: items.typename, 
         value: items.count, 
         textStyle: { 
             fontSize: 24,
         },
      color: items.color,
    })
  })
 var arrName = getArrayValue(data, 'name');
 var arrValue = getArrayValue(data, 'value'); 
    for (var i = 0; i < arrName.length; i++) { 
        var sumValue = eval(arrValue.join('+'));//总和
  } 
  var optionData = getData(data) 
  function getArrayValue(array, key) {
      var key = key || 'value'; 
      var res = []; 
      if (array) { 
          array.forEach(function (t) { 
              res.push(t[key]);
      });
    } 
    return res;
  } 
  function getData(data) {
      var res = { 
          series: [], 
          yAxis: []
    }; 
    var xPosition = ['50%', '43%', '50%'] 
    var yPosition = ['60%', '50%', '42%'] 
    for (let i = 0; i < data.length; i++) {
        res.series.push({
            name: data[i].item, 
        type: 'pie', 
        clockWise: false, //顺时加载  
        hoverAnimation: false, //鼠标移入时不变大  
        radius: [93 - i * 13,98 - i * 13], //半径：每个半圆的半径相差13
        center: ['50%', '50%'], 
        label: {
            show: false,
        }, 
        itemStyle: { 
            label: { 
                show: false,
          }, 
          labelLine: { 
              show: false  
              
          },
          }, 
          data: [{ 
              value: data[i].value, 
              name: data[i].name, 
              'itemStyle': { //半圆的样式
                  'normal': { 
                      'color': { 
                          type: 'linear', 
                          x: 0, 
                          y: 0,
                          x2: 0, 
                          y2: 1, 
                          colorStops: [{ offset: 0, color: data[i].color[0] // 0% 处的颜色  
                          },  { 
                              offset: 1, color: data[i].color[1] // 100% 处的颜色 
                              }]
              },
              'borderWidth': 0 
                  },
          },
          hoverAnimation: false,//鼠标悬浮时不放大  
          }, {
              value: sumValue - data[i].value, //另一个半圆：显示为透明
              name: '',
              itemStyle: { 
                  color: 'rgba(0,0,0,0)',
                borderWidth: 0 
              },
              tooltip: { show: false  }, 
              hoverAnimation: false,
        }], 
        markLine: { //添加竖杠---图表标线
            silent: false, 
            symbol: 'none', 
            data: [[{ 
                name: (data[i].value / sumValue * 100).toFixed(2) + '%', 
                x: xPosition[i], 
                y: yPosition[i]
          },
            {
                x: '80%', 
                y: yPosition[i]
            }]],
            label: { 
                color: data[i].color[0], 
                fontSize: 24,
          }, 
          lineStyle: {
              color: data[i].color[0], 
              type: 'solid'  
              
          }
        }
      }) 
      res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + '%');
    } 
  res.series.push({
            name: '1', 
        type: 'pie', 
                markLine: { //图表标线
            silent: false, 
            symbol: 'none', 
            data: [[{ 
                name: '', 
                x:  '50%', 
                y: '38%'
          },
            {
                x: '50%', 
                y: '43%'
            }]],
            label: { 
                // color: data[i].color[0], 
                fontSize: 24,
          }, 
          lineStyle: {
              color: '#4e607b', 
              width:5,
              type: 'solid'  
              
          }
        }
  })
    return res;
  } 
 option =  {  
  grid: {
    top: '0%',
  bottom: '0%',
  left: '0%', 
  height: '0%',// 高度  
  containLabel: false  
  }, 
      series: optionData.series 
      };