Echarts在线免费图表

 
            var randNum = function (minnum, maxnum) {
   return Math.floor(minnum + Math.random() * (maxnum - minnum));
};

var datas = [
   { name: "初级", value: randNum(10, 100) },
   { name: "残疾", value: randNum(10, 100) },
   { name: "精神病", value: randNum(10, 100) },
   { name: "患病", value: randNum(10, 100) }
];

option = {
   backgroundColor: "#041139",
   tooltip: {
      trigger: 'item',
      formatter: function (param) {
         if (param.seriesName && param.seriesName == "number") {
            return param.marker + param.data.name + "<br/>" + param.data.value + "人 (" + param.percent + "%)"
         }
      }
   },
   legend: {
      orient: 'vertical',
      y: 'center',
      right: 20,
      itemWidth: 12,
      textStyle: {
         color: "#fff",
         fontSize: 14
      },
      formatter: function (param) {
         var str = '';
         datas.forEach(function (item, index) {
            if (item.name == param) {
               str = item.name + " " + item.value + "人"
               return
            }
         })
         return str
      }
   },
   color: ['#FFAA45', '#8F45FF', '#00AF6D', '#FF45E3', '#FF4545', '#80A4C7'],
   series: [
      {
         name: "number",
         type: 'pie',
         radius: ['30%', '50%'],
         center: ['40%', '50%'],
         label: {
            show: true,
            formatter: "{d}%",
            position: 'inside',
            color: "#fff",
            fontSize: 14
         },
         labelLine: {
            show: false
         },
         data: datas
      },
      {
         type: 'pie',
         radius: '25%',
         center: ['40%', '50%'],
         itemStyle: {
            color: function (param) {
               if (param.dataIndex == 0) {
                  return '#1E4672'
               } else {
                  return '#12305E'
               }
            }
         },
         label: {
            show: false
         },
         labelLine: {
            show: false
         },
         data: datas
      },
      {
         type: 'pie',
         radius: ['60%', '60%'],
         center: ['40%', '50%'],
         itemStyle: {
            borderColor: "#1574AC",
            borderWidth: 1,
            borderType: "dashed"
         },
         label: {
            show: false
         },
         labelLine: {
            show: false
         },
         data: datas
      }
   ]
}