Echarts在线免费图表

 
            var colors = ["#00E45F", "#00E45F", "#81E25C", "#D7E059", "#E7CC55", "#E7CC55", "#E7CC55", "#FF0000"],
   names = [], series = [];
for (var a = 0; a < colors.length; a++) {
   var val = Math.round(Math.random() * 30);
   names.push("数据" + a);
   series.push({
      name: "数据" + a,
      type: 'pie',
      startAngle: 0, //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
      hoverAnimation: false,
      radius: [(a * 20 + 10) + "%", (a * 20 + 20) + "%"],
      center: ['50%', '85%'],
      label: {
         normal: {
            show: false,
            position: 'right',
            color: '#fff',
            formatter: "{c}%",
         },
      },
      labelLine: {
         normal: {
            show: false
         }
      },
      data: [
         {
            value: 30,
            itemStyle: {
               normal: {
                  color: "rgba(80,150,224,0)"
               }
            }
         },
         {
            value: val,
            itemStyle: {
               normal: {
                  color: colors[a]
               }
            }
         },
         {
            value: 30 - Number(val),
            itemStyle: {
               normal: {
                  color: "rgba(80,150,224,0)"
               }
            }
         }
      ]
   })
}

option = {
   tooltip: {
      show: true,
      formatter: "{a}<br/>{c}%"
   },
   color: colors,
   legend: {
      x: "center",
      bottom: 20,
      data: names,
      itemWidth: 10,
      itemHeight: 10
   },
   series: series
}