vue饼图配置

const options = (data) => {
  return {
    // 标题
    title: {
      text: data.title,
      x: 'left', // 标题位置
      textStyle: {
        color: '#333333',
        fontWeight: 500,
        fontSize: 14 // 主题文字字体大小，默认为18px
      }
    },

    tooltip: {
      trigger: 'item',
      backgroundColor: '#fff',
      borderColor: 'transparent',
      padding: [0, 0, 0, 0],
      formatter: (params) => {
        return `<div class="pie-tooltip-div"><p class="name">${params.name}：${params.value}<p><p class="value">${params.data.rate}</p></div>`
      }
    },
    // // 图例
    legend: {
      orient: 'vertical',
      right: '10%',
      top: 'middle',
      icon: 'circle',
      itemHeight: 8, // 改变圆圈大小
      itemWidth: 8, // 改变圆圈大小
      data: data.data,
      type: 'scroll',
      pageIcons: {
        vertical: [
          'path://M512 56.889c251.364 0 455.111 203.747 455.111 455.111S763.364 967.111 512 967.111 56.889 763.364 56.889 512 260.636 56.889 512 56.889z m-179 532.11l179-179 179 179a28.444 28.444 0 0 0 40.221-40.22l-199.11-199.111a28.444 28.444 0 0 0-40.221 0l-199.111 199.11A28.444 28.444 0 0 0 332.999 589z',
          'path://M512 32C246.4 32 32 246.4 32 512s214.4 480 480 480 480-214.4 480-480S777.6 32 512 32z m272 371.2l-249.6 249.6c-12.8 12.8-32 12.8-44.8 0l-249.6-249.6c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l227.2 227.2 227.2-227.2c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8z'
        ]
      },
      pageIconColor: '#509bfd', // 可以点击的翻页按钮颜色
      pageIconInactiveColor: '#a8cdfe', // 禁用的按钮颜色

      formatter: function(name) {
        const list = data.data
        var arr = []
        var index = 0
        for (var i = 0; i < list.length; i++) {
          if (list[i].name === name) {
            index = i
          }
        }
        arr.push(
          `{name|${name}  ${list[index].rate}}`,
          '{value|' + list[index].value + '}'
        )
        return arr.join('')
      },
      textStyle: {
        color: '#333333',
        rich: {
          name: {
            align: 'left',
            fontSize: 12,
            width: 160
          },
          value: {
            align: 'right',
            fontSize: 12,
            fontWeight: 500
          }
        }
      }
    },
    graphic:
      data.data.length === 0
        ? [
          {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              fill: '#999999',
              fontSize: '14',
              text: '无数据',
              textAlign: 'center'
            }
          }
        ]
        : [
          {
            type: 'group',
            left: '30%',
            top: '44%',
            bounding: 'raw',
            children: [
              {
                type: 'text',
                style: {
                  text: '总数',
                  textAlign: 'center',
                  fill: '#666666',
                  fontSize: 12,
                  fontWeight: 400
                }
              }
            ]
          },
          {
            type: 'group',
            left: '30%',
            top: '50%',
            bounding: 'raw',
            children: [
              {
                type: 'text',
                style: {
                  text: data.total,
                  textAlign: 'center',
                  fill: '#333',
                  fontSize: 20,
                  fontWeight: 500
                }
              }
            ]
          }
        ],
    // 饼图中各模块的颜色
    color: data.color,
    series: {
      type: 'pie',
      radius: ['60%', '80%'],
      center: data.data.length === 0 ? 'center' : ['30%', '50%'], // 整个饼图在整个父元素中的位置
      // data:''               //饼图数据
      data: data.data,
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        }
      }
    }
  }
}