Echarts在线免费图表

 
            const sum = 66935
const colors = ['#8ae308', '#fb9a55', '#ee3e3e', '#b3c9d5']
const pieData = [
   { value: 2.3, name: '博士生', },
   { value: 10.9, name: '硕士生', },
   { value: 57.2, name: '本科生', },
   { value: 29.5, name: '专科生', }
]
option = {
   backgroundColor: '#001552',
   color: colors,
   tooltip: {
      formatter: '{a} <br/>{b} : {c} ({d}%)'
   },
   title: {
      text: sum, // 图表内容文本
      left: 'center', // 图表内容水平居中
      top: 'center', // 图表内容垂直居中
      // 文本样式
      textStyle: {
         color: '#fff',
         fontSize: 24,
      },
   },
   // 图表图例
   legend: {
      show: true, // 是否显示图例
      orient: 'vertical', // 图例排列方向
      icon: 'circle', // 图例样式为圆形
      itemWidth: 25, // 图例图形的宽度
      itemHeight: 25, // 图例图形的高度
      itemGap: 25, // 图例项之间的间隔
      right: '25%', // 图例距离容器右侧的距离
      top: 'center', // 图例垂直居中
      textStyle: {
         color: '#00ddff' // 图例文字颜色
      },
   },
   // 图表配置
   series: [
      {
         type: 'pie', // 图表类型为饼图
         radius: ['18%', '26%'], // 控制内外圆环的半径，18%代表内圆，26%代表外圆
         avoidLabelOverlap: true, // 是否启用防止标签重叠策略
         showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
         label: {
            show: false, // 是否显示引导文本
            formatter: '{b}{d}%',
            color: '#b3c9d5'
         },
         data: pieData // 饼图数据
      },
      {
         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' // 边框颜色
               }
            }
         ]
      }
   ]
};
// formatter: name => {
//    // 图例后面加数据
//    const data1 = option.series[0].data; // 获取series中的data
//    let total = 0;
//    let tarValue;
//    // eslint-disable-next-line no-plusplus
//    for (let i = 0, l = data.length; i < l; i++) {
//       total += data[i].value;
//       if (data1[i].name === name) {
//          tarValue = data1[i].value;
//       }
//    }
//    const p = ((tarValue / total) * 100).toFixed(1); // 不保留小数
//    return `${name}  ${p}%`;
// },