Echarts在线免费图表

 
            const pieData = [
  { key: 2, name: '0次', value: 30619 },
  { key: 2, name: '1次', value: 5921 },
  { key: 2, name: '2次', value: 1153 },
  { key: 2, name: '3次', value: 266 },
  { key: 2, name: '大于3次', value: 87 }
];
const title = '跳槽率19.5%'
const colors = ['#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d']
option = {
   backgroundColor: '#001552',
   title: {
      text: title, // 图标内容文本
      left: 'center', // 图标内容水平居中
      top: 'center', // 图标内容垂直居中
      // 文本样式
      textStyle: {
         color: '#fff', // 图标内容文字颜色
         fontSize: '18px', // 图标内容文字大小
         fontWeight: 'normal'
      }
   },
   // 图表图例
   legend: {
      show: false,
      orient: 'vertical', // 图例排列方向
      icon: 'circle', // 图例样式为圆形
      itemWidth: 10, // 图例图形的宽度
      itemHeight: 16, // 图例图形的高度
      itemGap: 10, // 图例项之间的间隔
      right: '6%', // 图例距离容器右侧的距离
      top: 'center', // 图例垂直居中
      textStyle: {
         color: '#00ddff' // 图例文字颜色
      },
   },
   color: colors,
   series: [
      {
         type: 'pie', // 图表类型为饼图
         radius: ['18%', '26%'], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
         avoidLabelOverlap: true, // 是否启用防止标签重叠策略
         showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
         label: {
            show: true,
            formatter: '{b}\n{d}%',
            color: '#b3c9d5'
         },
         data: pieData
      },
      {
         name: '内边框',
         type: 'pie',
         tooltip: {
            show: false
         },
         center: ['50%', '50%'],
         radius: ['16%', '16%'],
         label: {
            show: false // 不展示data中的value和name
         },
         data: [
            {
               value: 1, // 此处的值无所谓是多少
               name: '', // 因为不展示label，可不填
               itemStyle: {
                  // 边框样式，浅蓝色，颜色可自行修改
                  borderWidth: 2, // 边框宽度
                  borderColor: '#b3c9d5' // 边框颜色
               }
            }
         ]
      }
   ]
};