Echarts饼图tooltip渐变色，内部legend百分比保留整数方法

 

业务场景：1、tooltip的背景需要渐变色，写 html 标签，

                  2、饼图内部的百分比需要保留整数 ，使用formatter，

 

export function genChartPieOption(pieData) {
  const res = {
    replaceMerge: ['series',], // 解决刷新之后y轴丢失问题
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50,50,50,0)',
      // borderColor: '#032E74',
      borderWidth: 0,
      axisPointer: {
        crossStyle: {
          color: '#999',
          width: 2,
        }
      },
      formatter({ color, name, value, percent }) {
        const tipItems = [
          {
            color,
            name,
            value,
            percent,
          }
        ];
        const resArr = [
          ...tipItems.map((item => {
            return `<div style="background: linear-gradient(180deg, #008AFF99 0%, #114ACB99 100%);
            box-shadow: 0px 0px 10px 0px rgba(4,20,55,0.79);
            border-radius: 4px; padding: 12px; backdrop-filter: blur(2px);">
            <div>
              <div style="margin-bottom: 2px;color: #ffffff;">${item.name}<span style="margin-left: 16px;">${item.value}(${Math.round(item.percent) || 0}%)</span></div> 
            </div>
          </div>`;
          }))
        ]
 
        return resArr.join('')
      },
      textStyle: {
        color: '#D9DCE3',
      },
    },
    legend: {
      left: 'center',
      bottom: 0,
      itemGap: 8,
      // orient: "vertical",
      itemWidth: 16,
      itemHeight: 10,
      padding: [0, 5, 1, 0 ], 
      textStyle: {
        fontSize: '12px',
        fontFamily: 'MicrosoftYaHei',
        color: '#D9DCE3',
      },
    },
    color: [
      '#0C52C3',
      '#2B9DEE',
      '#1BBDB7',
      '#19D272',
    ],
    series: {
      type: 'pie',
      radius: ['40%', '52%'],
      center: ['50%', '45%'],
      labelLine: {
        show: false
      },
      label: {
        show: false,
        position: 'center',
      },
      itemStyle: {
        borderRadius: 2,
        borderColor: '#021744',
        borderWidth: 4
      },
      emphasis: {
        label: {
          // formatter: '{b|{b}}\n{d|{d}%}', // d代表百分比
          formatter: function(params) {
            var d = Math.round(params.percent); // 取整数
            return '{b|' + params.name + '}\n{d|' + d + '%}';
          },
          show: true,
          verticalAlign: 'middle',
          // 富文本样式
          rich: {
            b: {
              color: '#B1C8EB',
              lineHeight: 24,
              fontSize: 12,
            },
            d: {
              color: '#D9DCE3',
              lineHeight: 24,
              fontSize: 16,
              fontWeight: 600,
            },

          }
        }
      },
      data: pieData || [],
      // data: [
      //   { value: 468, name: '客服热线' },
      //   { value: 816, name: '管网留言' },
      //   { value: 365, name: '内部人员反馈'},
      //   { value: 500, name: '其他'},
      // ]
    }
  }
  return res
}