Echarts在线免费图表

 
            const colorList =  ['#00EBFC', '#1F6CFE', '#BF41FF', '#FF63D3', '#FF5858', '#FFA44E', '#FFFF41', '#75FD43', '#D6A3D3'];
const list = [{ value: 140, name: '数据 1' },  { value: 88, name: '数据 2' }, { value: 58, name: '数据 3' },  { value: 20, name: '数据 4' },  { value: 18, name: '数据 5' },  { value: 16, name: '数据 6' },  { value: 12, name: '数据 7' },  { value: 8, name: '数据 8' }]

const total = list.reduce((a, b) => {
  return (typeof a === 'number' ? a : a.value) + b.value;
})
let series = [],
length = list.length, maxRaduis = [80, 10], 
radiusWidth = (maxRaduis[0] - maxRaduis[1]) / length;
list.forEach((info, i) => {
  //计算环宽
  let outRadius = (length - i - 1) * radiusWidth + maxRaduis[1],
  radius = [outRadius + 3.5 + '%', (outRadius + radiusWidth) + '%'], 
  center = ['45%', '50%'];
  series.push({
    type: 'pie',
    clockWise: false, //顺时加载
    hoverAnimation: false, //鼠标移入变大
    radius,
    center,
    label: {
      show: true,
      position: 'inside',
      fontSize: 12,
      color: '#333',
      padding: [0, 0, 0, (parseInt(info.name.length / 2 * 20) + 40)],
      formatter: ('显示：'+info.name),
    },
    labelLine: {
      show: false,
    },
    data: [{
      value: 0,
      itemStyle: {
        color: colorList[i],
      }
    }, {
      value: info.value,
      name: info.name,
      itemStyle: {
        color: colorList[i],
      },
      tooltip: {
        show: false
      },
      label: {
        show: false
      }
    }, {
      value: total - info.value,
      itemStyle: {
        color: 'rgba(0,0,0,0)',
      },
      tooltip: {
        show: false
      },
      label: {
        show: false
      }
    }]
  });
  series.push({
    type: 'pie',
    silent: true,
    z: 1,
    clockWise: false, //顺时加载
    hoverAnimation: false, //鼠标移入变大
    radius,
    center,
    label: {
      show: false
    },
    data: [{
      value: 7.5,
      itemStyle: {
        color: 'rgb(0,0,255,.1)',
      },
      tooltip: {
        show: false
      },
    }, {
      value: 2.5,
      itemStyle: {
        color: 'rgba(0,0,0,0)',
      },
      tooltip: {
        show: false
      },
    }]
  });
})

option = {
  color:colorList,
  legend: {
    top: 'center',
    right: '5%',
  },
  series,
};