除夕前,最后一个饼形图特效

93 阅读1分钟

话不多说,人狠上来就放代码

const optionData = {
  xAxisData: ['12.1', '12.2', '12.3', '12.4', '12.5'],
  series: [
    { name: 'a', data: [12, 33, 123, 43, 99] },
    { name: 'b', data: [33, 99, 22, 23, 123] },
    { name: 'c', data: [123, 55, 12, 123, 99] },
    { name: 'd', data: [23, 123, 60, 23, 12] }
  ]
}
const option = {
    title: {
      text: '单位:件',
      textStyle: {
        color: 'rgba(160, 160, 160, 1)',
        fontSize: 12
      }
    },
    color: ['#5AA5FA', '#23BEA0', '#5AD750', '#f5d147', '#e75f7b', '#9464e3', '#575ace'],
    grid: {
      top: '12%',
      right: '2%',
      left: '0%',
      bottom: '8%',
      containLabel: true
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: '4%',
      top: '30%',
      // right: '5%',
      textStyle: {
        color: '#fff',
        fontSize: 14
      },
      icon: 'circle',
      data: val
    },
    series: [
      // 主要展示层的
      {
        radius: ['40%', '65%'],
        center: ['45%', '50%'],
        type: 'pie',
        label: {
          show: false,
          // formatter: (params: any) => {
          //   const num = ((params.value / sum) * 100).toFixed()
          //   return params.name + '\n' + num + '%'
          // },
          fontSize: 14,
          position: 'outside'
        },
        labelLine: {
          show: true,
          length: 25
        },
        itemStyle: {
          normal: {
            // 饼状图阴影,值越大阴影亮度越高
            shadowBlur: 30,
            shadowColor: '#2745BE'
          }
        },
        // name: seriesName,
        data: val
      },
      // 内边框的设置
      {
        radius: ['40%', '45%'],
        center: ['45%', '50%'],
        type: 'pie',
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        animation: false,
        tooltip: {
          show: false
        },
        data: [
          {
            value: 1,
            emphasis: {
              disabled: true
            },
            itemStyle: {
              color: 'rgba(250,250,250,0.3)'
            }
          }
        ]
      },
      // 外边框设置
      {
        name: '外边框',
        type: 'pie',
        radius: ['85%', '85%'],
        center: ['45%', '50%'],
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [
          {
            value: 1,
            name: '',
            emphasis: {
              disabled: true
            },
            itemStyle: {
              borderWidth: 4,
              borderColor: 'rgba(85, 115, 235, 0.30)'
            }
          }
        ]
      }
    ]
  }

饼形图中间部分,我是使用了div定位上去的,与饼形图没有关系哈,怪我不讲武德