Echarts在线免费图表

 
            let colorList = ['rgb(21, 70, 187)', 'rgb(12, 139, 229)', 'rgb(211, 120, 126)', 'rgb(225, 168, 37)', 'rgb(231, 201, 27)', 'rgb(60, 185, 180)', 'rgb(17, 187, 215)'];
let data = [
   { name: "退休", value: 61 },
   { name: "下岗", value: 30 },
   { name: "无业", value: 40 },
   { name: "在职", value: 55 },
   { name: "待业", value: 24 },
   { name: "其他", value: 36 },
];
// data排序
data = data.sort((a, b) => {
   return a.value - b.value;
});
// data样式
data.forEach((item, index) => {
   const transparentColor = colorList[index % colorList.length].replace('rgb', 'rgba').replace(')', ', 0.5)');
   item.itemStyle = {
      color: transparentColor,
      borderColor: colorList[index % colorList.length],
   };
});
option = {
   backgroundColor: '#000',
   grid: {
      top: "0",
      left: "0",
      right: "0",
      bottom: "0",
   },
   series: [
      {
         type: "pie",
         color: '#8E99B3',
         silent: true,
         clockwise: true,
         radius: ["0%", "10%"],
         center: ["50%", "50%"],
         label: {
            show: false,
         },
         labelLine: {
            show: false,
         },
         data: [0],
      },
      {
         type: "pie",
         color: '#8E99B3',
         silent: true,
         clockwise: true,
         radius: ["15%", "16%"],
         center: ["50%", "50%"],
         label: {
            show: false,
         },
         labelLine: {
            show: false,
         },
         data: [0],
      },
      {
         stack: "a",
         type: "pie",
         radius: ["30%", "68%"],
         center: ["50%", "50%"],
         silent: true, // 鼠标悬浮效果
         clockwise: true, // 鼠标悬浮效果
         roseType: "area",
         zlevel: 10,
         label: {
            show: true,
            color: '#fff',
            fontSize: 15,
            lineHeight: 20,
            formatter: '{percent|{d}%}\n{name|{b}}',
            rich: {
               percent: {
               fontSize: 15,
               color: '#0be5ff',
            },
            }
         },
         itemStyle: {
            borderWidth: 3,
         },
         data: data
      }
   ]
};