Echarts在线免费图表

 
            var data = [{
   'name': '短信',
   'value': 1369
}, {
   'name': '客服',
   'value': 1476
}, {
   'name': '外呼',
   'value': 1845
}, {
   'name': '网厅',
   'value': 1476
}, {
   'name': '手厅',
   'value': 2997
}].sort(function (a, b) { return b.value - a.value })
const color = [
   '#E6C9A9',
   '#EB8B72',
   '#FFCC66',
   '#EB8B72',
   '#39A0ED',
   '#3DD9D6',
   '#7B6C5C'
]
const pieSeries = []
const sum = data.reduce((a, b) => a + b.value, 0)
data.forEach((v, i) => {
   pieSeries.push({
      name: '',
      type: 'pie',
      clockWise: true,
      hoverAnimation: false,
      radius: [50 - i * 10 + '%', 53 - i * 10 + '%'],
      center: ['40%', '50%'],
      startAngle: 90,
      label: {
         show: false
      },

      itemStyle: {
         borderRadius: 30
      },
      data: [
         {
            value: v.value,
            name: v.name,
            itemStyle: {
               normal: {
                  borderWidth: v.value > 0 ? 1 : 0,
                  borderColor: v.value > 0 ? color[i] : 'rgba(0,0,0,0)'
               }
            }
         },
         {
            value: sum === 0 ? 0.001 : sum - v.value,
            name: '',
            itemStyle: {
               color: 'rgba(0,0,0,0)'
            }
         }
      ]
   })
   pieSeries.push({
      name: '',
      type: 'pie',
      silent: false,
      z: 1,
      clockWise: true, // 顺时加载
      hoverAnimation: false, // 鼠标移入变大
      radius: [50 - i * 10 + '%', 53 - i * 10 + '%'],
      center: ['40%', '50%'],
      label: {
         show: false
      },
      itemStyle: {
         borderCap: 'round',
         borderJoin: 'round'
      },
      data: [
         {
            value: sum,
            itemStyle: {
               color: '#EDEDED'
            }
         }
      ]
   })
})
option = {
        backgroundColor: 'rgba(255,255,255,1)',
   name: '圆形进度条',
   color: color, 
   tooltip: {
      trigger: 'item',
      formatter: function (params) {
         if (params.name) {
            return `${params.marker} ${params.name} : ${params.value} (${params.percent}%)`
         }
      }
   },
   legend: {  
        right: '20%',
          top: 'middle',
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 10,
      textStyle: {
         color: 'rgba(128, 125, 125, 1)',
         fontSize: 12
      },
   },
   series: pieSeries
}