echarts记录一下多环

247 阅读1分钟

echarts记录一下多环,免得后面还要再写一次,费时费力,还是复制粘贴就好。 没别的意思,就是记录一下,凑摘要的文字

图例 image.png

function paintPies(arr) {
    const START_ANGLE = 90
    const total = arr.reduce((p, c) => c.value + p, 0)
    let prevDege = START_ANGLE
    const series = arr.map(({ value, name }, idx) => {
      const index = idx + 1
      const rate = value / total
      prevDege += 360 * rate
      return {
        name: 'Access From' + value,
        type: 'pie',
        radius: [10 * index + '%', 10 * index + 5 + '%'],
        startAngle: prevDege,
        avoidLabelOverlap: false,
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
          lineStyle: {
            color: '#000',
          },
          formatter: ' {d}%'
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 20,
        },
        emphasis: {
          show: false,
        },
        data: [
          { value: value, name: name },
          {
            value: total - value, name: name + '0', itemStyle: { color: '#ccc' },
            label: {
              show: false,
            },
            labelLine: {
              show: false
            }
          },
        ],
      }
    })
    var option = {
      tooltip: {
        show: false
      },
      legend: {
        data: arr.map(it => it.name),
        right: '0',
        top: 'center',
        orient: 'vertical',
      },
      series,
    }
    return option
  }
  const arr = [
    {
      name: '牛逼1',
      value: 100,
    },
    {
      name: '牛逼112',
      value: 20,
    },
    {
      name: '11牛逼1',
      value: 30,
    },
    {
      name: '师傅带',
      value: 40,
    },
  ]
  myChart.setOption(paintPies(arr))